How to Make HTTP callout from LWC Lightning Web Component and show data on UI.

Posted on April 18, 2020 Post Thumbnail

Hey Trailblazers, In this blog we are going to create a Lightning web component  which going to make an external API callout to verify email Id and shows result to the UI.

Before creating LWC component, Have a look on my previous Blog Post for getting third party API Key and Setup remote site on Salesforce.

https://heysalesforce.org/posts/make-http-callout-from-lightning-component-and-show-data-on-ui-using-js-object

All done with this small setup ?

Let's create our LWC component for verification email ID.

emailVerifierLWC.html

<template>
    <div class="slds-box">
        <div class="slds-box">
            <img src={SfLogo}>
        <h1>Email Verifier ( Using LWC )</h1>
        <lightning-input type="email" name="emailId" label="E-mail address" onchange={inputChange}></lightning-input>
        <lightning-input type="text" label="API Key" name="apiKey" value="NhX3FJkuk4Rf5imvrg4XTCdYA" onchange={inputChange}></lightning-input>
        <br/>
        <lightning-button variant="brand" name="verifyMail" label="Verify Email" onclick={verifyMail}></lightning-button>
        <br/>
    </div>
        <div class="slds-box slds-m-top_x-small">
        <div class={resultCss}>
            Result : {outputObject.result}
        </div>
       
            Credits Left : {outputObject.credits}
        </div>
    </div>
</template>

emailVerifierLWC.js

import { LightningElement, track } from 'lwc';
import getCalloutResponse from '@salesforce/apex/emailVerifierLwcCtrl.getCalloutResponse';
import heySfLogo from '@salesforce/resourceUrl/heySfLogo';
const DELAY = 350;

export default class EmailVerifierLWC extends LightningElement {
    emailId;
    apiKey ='NhX3FJkuk4Rf5imvrg4XTCdYA';
    apiUrl;
    @track outputObject =[];
    error;
    @track SfLogo;
    @track resultCss;
    SfLogo = heySfLogo ;
    inputChange(event)
    {
        if(event.target.name === 'emailId')
        {
        this.emailId = event.target.value;
        }
        else if(event.target.name === 'apiKey')
        {
        this.apiKey = event.target.value;
        }
    }
    verifyMail(event){
       
       this.apiUrl = `https://api.millionverifier.com/api/v3/?email=${this.emailId}&api=${this.apiKey}`;
        //console.log(this.emailId);
        //console.log(this.apiKey);
        window.clearTimeout(this.delayTimeout);
        const mainUrl = this.apiUrl ;
        console.log(mainUrl);
        // eslint-disable-next-line @lwc/lwc/no-async-operation
        this.delayTimeout =setTimeout(() =>{
       
            getCalloutResponse({mainUrl})
            .then(result =>{
               console.log(result);
                //console.log('Object');
                this.outputObject = result;
                this.resultCss = result.result;
                this.error = undefined;
            })
            .catch(error => {
                console.log(error);
                console.log('error');
                this.error = error;
                this.outputResult = undefined;
            });

        }, DELAY);
    }
}

emailVerifierLWC.css

div{
    background-color: white;
    }
    .ok
    {
        background-color: aquamarine;
        color: rgb(19, 17, 17);
    }
    .invalid
    {
        color: white;
        background-color: salmon;
    }
    img {
        width:60%
    }

emailVerifierLWC.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>47.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Apex Controller : emailVerifierLwcCtrl.cls

public with sharing class emailVerifierLwcCtrl {
        @AuraEnabled
        public static Object getCalloutResponse(String mainUrl) {
            Http h = new Http();
            HttpRequest req = new HttpRequest();
            req.setEndpoint(mainUrl);
            req.setMethod('GET');
            HttpResponse res = h.send(req);
            Object results = (Object) JSON.deserializeUntyped(res.getBody());
            return results;
        }
}

Let's test this component :

Positive Test : Correct Email ID

Positive Test

Negative Test: Incorrect Email ID

Negative Test

Let me know if you face any difficulty, Ask your question here

Thank you :)


2243
1

Tags: #httpCallout

Comments

  • Shivendra TechSter Avatar
    Shivendra TechSter - 1 year ago
    Nice post

Your message is required.

Get notified of new posts