Salesforce Code Crack: HTTPRequest

This post explains how to make the callout in Lightning Web Components(lwc)

We can make the callout from Lightning Web Component in two ways
1. Client-side controller(JS controller)
2. Using the server-side controller(Apex Class)

In this demo, I am using https://www.alphavantage.co/
alpha vantage provides the following services for free

Realtime and historical stock data
FX(Foreign exchange) and cryptocurrency feeds
50+ technical indicators
Global coverage

Get your free API Key https://www.alphavantage.co/support/#api-key

Endpoint URL : https://www.alphavantage.co

Make the Callout to Alpha Vantage and it sends the data in the form of JSON.

For more information Alpha Vantage Documentation

In this demo, I am making the callout to check the foreign currency exchange rates.
Example endpoint URL:
https://www.alphavantage.co/query?function=CURRENCY_EXCHANGE_RATE&from_currency=USD&to_currency=INR&apikey=<API_KEY>

Sample JSON Response

{
    "Realtime Currency Exchange Rate": {
        "1. From_Currency Code": "USD",
        "2. From_Currency Name": "United States Dollar",
        "3. To_Currency Code": "INR",
        "4. To_Currency Name": "Indian Rupee",
        "5. Exchange Rate": "70.87700000",
        "6. Last Refreshed": "2019-08-09 14:01:57",
        "7. Time Zone": "UTC",
        "8. Bid Price": "70.86700000",
        "9. Ask Price": "70.88700000"
    }
}

Note
Make sure to white-list the endpoint URL based on your approach.

Client-side controller

Make sure your endpoint is white-list in Content Security Policies (CSP)

Path:

From Setup, enter CSP Trusted Sites in the Quick Find box, and then CSP Trusted Sites

Enter the endpoint URL and save.

Server-side controller

Add your endpoint URL in Remote Site settings

Path:

From Setup, enter Remote Site in the Quick Find box, and then Remote Site Settings

Once you white-listed the endpoint URL now we are ready to create the component.

Approach 1: Client-Side Controller

HTTPCalloutInLWC.html

<template>
    <lightning-card title="Realtime Currency Exchange Rate" icon-name="standard:currency">

        <lightning-layout multiple-rows="true" vertical-align="end">
        <lightning-layout-item size="12" small-device-size="4" medium-device-size="2" large-device-size="2" padding="around-small">
                <div class="slds-form-element">
                        <div class="slds-form-element__control">
                                <lightning-combobox title="Select Currency" 
                                                    label="From Base Currency"
                                                    value={fromCurrencyValue}
                                                    placeholder="-Select-"
                                                    options={options}
                                                    onchange={handleFromCurrencyChange}></lightning-combobox>
                        </div>
                    </div> 
            </lightning-layout-item>

            <lightning-layout-item size="12" small-device-size="4" medium-device-size="2" large-device-size="2" padding="around-small">
                    <div class="slds-form-element">
                            <div class="slds-form-element__control">
                                    <lightning-combobox title="Select Currency" 
                                                        label="To Currency"
                                                        value={toCurrencyValue}
                                                        placeholder="-Select-"
                                                        options={toCurrencyOptions}
                                                        onchange={handleToCurrencyChange}></lightning-combobox>
                            </div>
                        </div> 
            </lightning-layout-item>
            <lightning-layout-item size="12" small-device-size="2" medium-device-size="2" large-device-size="2" padding="around-small">
                    <lightning-button title="Currency Conversion" 
                                      label="Conversion Rate" 
                                      variant="brand" 
                                      onclick={handleCurrencyConversion}></lightning-button>
                </lightning-layout-item>
            </lightning-layout><br/>

            <template if:true={conversionData}>    
                <div class="slds-p-around_medium" id="modal-content-id-1">
                        <div style="font-size: 20px"><h1>Exchange rate from Currency <b>{fromCurrencyValue}</b> to <b>{toCurrencyValue}</b> </h1></div><br/>
                        <dl class="slds-list_horizontal slds-wrap">
                            <dt class="slds-item_label slds-truncate" title="From Currency Name">From Currency Name</dt>
                            <dd class="slds-item_detail slds-truncate"><b>: {conversionData.From_Currency_Name}</b></dd>
                            <dt class="slds-item_label slds-truncate" title="From Currency Code">From Currency Code</dt>
                            <dd class="slds-item_detail slds-truncate"><b>: {conversionData.From_Currency_Code}</b></dd>
                            <dt class="slds-item_label slds-truncate" title="To Currency Name">To Currency Name</dt>
                            <dd class="slds-item_detail slds-truncate"><b>: {conversionData.To_Currency_Name}</b></dd>
                            <dt class="slds-item_label slds-truncate" title="To Currency Code">To Currency Code</dt>
                            <dd class="slds-item_detail slds-truncate"><b>: {conversionData.To_Currency_Code}</b></dd>
                            <dt class="slds-item_label slds-truncate" title="Exchange Rate">Exchange Rate</dt>
                            <dd class="slds-item_detail slds-truncate">: <b style="color:red;">{conversionData.Exchange_Rate}</b></dd>
                            <dt class="slds-item_label slds-truncate" title="Last Refershed">Last Refereshed</dt>
                            <dd class="slds-item_detail slds-truncate"><b>: {conversionData.Last_Refershed}</b></dd>
                        </dl>
                </div>
            </template>
    </lightning-card>
</template>

HTTPCalloutInLWC.js

import { LightningElement, track} from 'lwc';

// Currency options
const options = [
                { label: 'USD', value: 'USD' },
                { label: 'EUR', value: 'EUR' },
                { label: 'CAD', value: 'CAD' },
                { label: 'GBP', value: 'GBP' },
                { label: 'INR', value: 'INR' }];

export default class HTTPCalloutInLWC extends LightningElement {
    @track fromCurrencyValue;
    @track toCurrencyValue;
    @track options = options;
    @track toCurrencyOptions = options;
    @track conversionData;
    
    // Getting Base currency value
    handleFromCurrencyChange(event) {
        this.fromCurrencyValue = event.detail.value;
    }

    // getting exchange currency value
    handleToCurrencyChange(event) {
        this.toCurrencyValue = event.detail.value;
    }


    // Making Callout using Fetch
    handleCurrencyConversion() {
        fetch('https://www.alphavantage.co/query?function=CURRENCY_EXCHANGE_RATE&from_currency=' 
                    + this.fromCurrencyValue + '&to_currency=' + this.toCurrencyValue + '&apikey=4W7NZUQNJ061YHHF', // End point URL
        {
            // Request type
            method:"GET",
            
            headers:{
                // content type
                "Content-Type": "application/json",
                // adding your access token 
                "Authorization": "OAuth 00DB0000000EfVQ!AQwAQEiiynMU2EsBcS2PhXSQ6KQTTG.Zr0hlDHTFcGcAPqKQOBNDB0rwyASZK44fqIAVe6GrVNZPsAWJ6iqXLNBfSQ.dqvW1",
            }
        })
        .then((response) => {
            return response.json(); // returning the response in the form of JSON
        })
        .then((jsonResponse) => {

            let objData = {
                From_Currency_Name : '',
                From_Currency_Code : '',
                To_Currency_Name : '',
                To_Currency_Code : '',
                Exchange_Rate : '',
                Last_Refersed : '',
            };

            window.console.log('jsonResponse ===> '+JSON.stringify(jsonResponse));
            // retriving the response data
            let exchangeData = jsonResponse['Realtime Currency Exchange Rate'];

            // adding data object
            objData.From_Currency_Code = exchangeData['1. From_Currency Code'];
            objData.From_Currency_Name = exchangeData['2. From_Currency Name'];
            objData.To_Currency_Code = exchangeData['3. To_Currency Code'];
            objData.To_Currency_Name = exchangeData['4. To_Currency Name'];
            objData.Exchange_Rate = exchangeData['5. Exchange Rate'];
            objData.Last_Refershed = exchangeData['6. Last Refreshed'];

            // adding data object to show in UI
            this.conversionData = objData;
        })
        .catch(error => {
            window.console.log('callout error ===> '+JSON.stringify(error));
        })
    } 

}

HTTPCalloutInLWC.js-meta.xml

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

Approach 2: Server-Side Controller

To make the callout using server-side I created apex class it accepts the endpoint URL.

Apex Class

public inherited sharing class CurrencyConversionController {

    @AuraEnabled
    public static map<String, Object> retriveCurrencyConversionRates(String strEndPointURL){
        map<String, Object> mapJsonData = new map<String, Object>();
        String strResponse = null;
        if(String.isNotBlank(strEndPointURL)) {
            HttpRequest httpRequest = new HttpRequest();  
            httpRequest.setEndpoint(strEndPointURL);

            httpRequest.setMethod('GET');   
            httpRequest.setHeader('Authorization', 'OAuth ' + UserInfo.getSessionId());        
            httpRequest.setHeader('Authorization', 'Bearer ' + UserInfo.getSessionId()); 
            
            try {  
                Http http = new Http();   
                HttpResponse httpResponse = http.send(httpRequest);  

                while(httpResponse.getStatusCode() == 302) {
                    httpRequest.setEndpoint(httpResponse.getHeader('Location'));
                    httpResponse = new Http().send(httpRequest);
                }

                if (httpResponse.getStatusCode() == 200 ) {  
                    strResponse = httpResponse.getBody();  
                } 
                else {  
                    throw new CalloutException(httpResponse.getBody());  
                }   
            } 
            catch(Exception ex) {  
                throw ex;  
            }  
        } 

        if(!String.isBlank(strResponse)) {
            mapJsonData = (map<String, Object>)JSON.deserializeUntyped(strResponse);
            System.debug('mapJsonData ===> '+mapJsonData);
        }

        if(!mapJsonData.isEmpty()) {
            return mapJsonData;
        }
        else {
            return null;
        }
    }
}

Import the Apex class method in JS controller

import getCurrencyData from '@salesforce/apex/CurrencyConversionController.retriveCurrencyConversionRates';

update JS Controller with below code

HTTPCalloutInLWC.js

import { LightningElement, track} from 'lwc';

// importing apex class to make callout
import getCurrencyData from '@salesforce/apex/CurrencyConversionController.retriveCurrencyConversionRates';

// Currency options
const options = [
                { label: 'USD', value: 'USD' },
                { label: 'EUR', value: 'EUR' },
                { label: 'CAD', value: 'CAD' },
                { label: 'GBP', value: 'GBP' },
                { label: 'INR', value: 'INR' }];

export default class HTTPCalloutInLWC extends LightningElement {
    @track fromCurrencyValue;
    @track toCurrencyValue;
    @track options = options;
    @track toCurrencyOptions = options;
    @track conversionData;
    
    // Getting Base currency value
    handleFromCurrencyChange(event) {
        this.fromCurrencyValue = event.detail.value;
    }

    // getting exchange currency value
    handleToCurrencyChange(event) {
        this.toCurrencyValue = event.detail.value;
    }

    // Making Callout using apex class
    handleCurrencyConversion() {
        // endpoint URL
        let endpointURL = 'https://www.alphavantage.co/query?function=CURRENCY_EXCHANGE_RATE&from_currency=' 
                                + this.fromCurrencyValue + '&to_currency=' + this.toCurrencyValue + '&apikey=4W7NZUQNJ061YHHF';
        
        // calling apex class method to make callout
        getCurrencyData({strEndPointURL : endpointURL})
        .then(data => {
        
            let objData = {
                From_Currency_Name : '',
                From_Currency_Code : '',
                To_Currency_Name : '',
                To_Currency_Code : '',
                Exchange_Rate : '',
                Last_Refersed : '',
            };

            window.console.log('jsonResponse ===> '+JSON.stringify(data));
            // retriving the response data
            let exchangeData = data['Realtime Currency Exchange Rate'];

            // adding data object
            objData.From_Currency_Code = exchangeData['1. From_Currency Code'];
            objData.From_Currency_Name = exchangeData['2. From_Currency Name'];
            objData.To_Currency_Code = exchangeData['3. To_Currency Code'];
            objData.To_Currency_Name = exchangeData['4. To_Currency Name'];
            objData.Exchange_Rate = exchangeData['5. Exchange Rate'];
            objData.Last_Refershed = exchangeData['6. Last Refreshed'];

            // adding data object to show in UI
            this.conversionData = objData;
        })
        .catch(error => {
            window.console.log('error ====> '+JSON.stringify(error));
        })

    } 

}

Output

This Post explains the how to get the governor limits of current org using REST API Callout.

Some Cases we need to check the Max limit value and remaining limits values of current org in the apex.
For Example
Single Email Limit Values, Max limit value of Single Emails of Current org(Based on Licences it will depend) and How many are already invoked in a day.
Check below link to get limits by using the workbench
https://www.salesforcecodecrack.com/2018/09/how-to-check-your-org-governor-limits.html

if you need to check limits in Apex code, this post may help for you

Note:
your salesforce instance URL must be added in your org remote site settings.

Check below class

/*
purpose: This Class gives response based on resource name you entered.
Author: Shaik Nagajani
Date: 10/3/2018
*/

public class OrgREST {
    
    public static String retriveResult(String strResourceName) {
        String response;
        String strEndPonitURL = URL.getSalesforceBaseUrl().toExternalForm() + '/services/data/v43.0/' + strResourceName;
        if(String.isNotBlank(strResourceName)) {
            HttpRequest httpRequest = new HttpRequest();  
            httpRequest.setMethod('GET');   
            httpRequest.setHeader('Authorization', 'OAuth ' + UserInfo.getSessionId());        
            httpRequest.setHeader('Authorization', 'Bearer ' + UserInfo.getSessionID()); 
            httpRequest.setEndpoint(strEndPonitURL); 
            
            try {  
                Http http = new Http();   
                HttpResponse httpResponse = http.send(httpRequest);  
                if (httpResponse.getStatusCode() == 200 ) {  
                    response = httpResponse.getBody();  
                } 
                else {  
                    throw new CalloutException(httpResponse.getBody());  
                }   
            } 
            catch(Exception ex) {  
                throw ex;  
            }  
        } 
        return response;
    }
}

Open Developer Console, Execute below code from the anonymous window

String response = OrgREST.retriveResult('limits');

above class returns the response,
the response looks like(the small part of response) below.

"HourlyODataCallout" : {
    "Max" : 1000,
    "Remaining" : 1000
  },
  "HourlySyncReportRuns" : {
    "Max" : 500,
    "Remaining" : 500
  },
  "HourlyTimeBasedWorkflow" : {
    "Max" : 50,
    "Remaining" : 50
  },
  "MassEmail" : {
    "Max" : 10,
    "Remaining" : 10
  },
  "Package2VersionCreates" : {
    "Max" : 50,
    "Remaining" : 50
  },
  "PermissionSets" : {
    "Max" : 1500,
    "Remaining" : 1497,
    "CreateCustom" : {
      "Max" : 1000,
      "Remaining" : 997
    }
  },
  "SingleEmail" : {
    "Max" : 15,
    "Remaining" : 15
  },

Go to developer console, open execute anonymous window, copy below code and past in anonymous window

Integer iMax = 0;
Integer iRemaining = 0;
// Sending Request to the Server
String response = OrgREST.retriveResult('limits');

// deserializing the response
map<String, Object> mapJsonData = (map<String, Object>)JSON.deserializeUntyped(response);

// getting single Email max limit value and Remaining limit value 
map<String, Object> mapLimitValues = (map<String, Object>)mapJsonData.get('SingleEmail');
iMax = (Integer)mapLimitValues.get('Max');
iRemaining = (Integer)mapLimitValues.get('Remaining');

System.debug('Single Email Max Limit Vlaue====> '+iMax);
System.debug('Single Email Remaining Limit Vlaue====> '+iRemaining);

map<String, Object> mapLimitValues1 = (map<String, Object>)mapJsonData.get('DailyWorkflowEmails');
iMax = (Integer)mapLimitValues1.get('Max');
iRemaining = (Integer)mapLimitValues1.get('Remaining');

System.debug('DailyWorkflowEmails Max Limit Vlaue====> '+iMax);
System.debug('DailyWorkflowEmails Remaining Limit Vlaue====> '+iRemaining);

from above code, I checked single Email Max Limit, Remaining Limit Value and DailyworkfowsEmails invocation limit values.
Check below screenshot for more information about the result.

Output:

Based on Your Requirement, get the max limit and remaining limit values.
Let us Know if you have any queries.
Happy Learning!!!

Salesforce Code Crack

Friday, August 9, 2019

How to make REST API Callout in Lightning Web Component(lwc)

Client-side controller

Server-side controller

Approach 1: Client-Side Controller

Approach 2: Server-Side Controller

Wednesday, October 3, 2018

How to get governor limits of current org using REST API Callout

Blog Archive

Popular Posts

Total Pageviews

Translate