We come across using API integrations frequently but, reading responses becomes a bit apprehensive. So, how can we resolve it to get data in a format that is easily readable? We can fulfill our requirement by building an LWC component to represent API response in a tabular format.
We will use the API of Currency-Rate and our output will come up like this:
Steps to show API response in tabular format:
● Step 1: Register your API in salesforce.
Go to setup > Home.
Search Remote Site Settings.
Click new > then click on the New Remote Site button.
Enter Remote Site Name: currencyRateData and Remote Site URL: http://api.exchangeratesapi.io
Click on save.
● Step 2 : Create a Wrapper Class: currencyRateWrapper
global class currencyRateWrapper{
@AuraEnabled
global String Country;
@AuraEnabled
global Decimal Rate;
}● Step 3 : How to Create a class : currencyRateCallout
global class currencyRateCallout {
@AuraEnabled(cacheable=true)
global static List<currencyRateWrapper> getCalloutData() {
Http HTTP = new Http();
HttpRequest request = new HttpRequest();
request.setEndpoint(‘callout:exchangeRates/path?format=json’);
request.setMethod('GET');
HttpResponse response = http.send(request);
map<string,object> result = (map<string,object>)JSON.deserializeUntyped(
response.getBody()
);
map<string,object> countryRateMap = (map<string,object>)result.get('rates');
List<currencyRateWrapper> countryRate = new List<currencyRateWrapper>();
for(string currentVar : countryRateMap.keySet()) {
currencyRateWrapper wrapper = new currencyRateWrapper();
wrapper.country = currentVar;
wrapper.rate =(Decimal)countryRateMap.get(currentVar);
countryRate.add(wrapper);
}
return countryRate;
}
}● Step 4: How to create an LWC component: currencyRate.html
To know, how to create an LWC Component, Click Here.
<template>
<div class="slds-text-heading_large" style = "padding-top: 42px; padding-bottom: 29px;">
{label.CURRENCYRATE_PAGE_HEADER}
</div>
<div if:true= {callout.data}>
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<thead>
<th>{label.COUNTRY_NAME}</th>
<th>{label.CURRENCY_RATE}</th>
</thead>
<tbody>
<template for:each={callout.data} for:item="item">
<tr key ={item.id}>
<td>{item.Country}</td>
<td>{item.Rate}</td>
</tr>
</template>
</tbody>
</table>
</div>
</template>● Step 5 : In controller: currencyRate.js write the following :
import { LightningElement,wire } from 'lwc';
import CURRENCYRATE_PAGE_HEADER from '@salesforce/label/c.CURRENCYRATE_PAGE_HEADER';
import COUNTRY_NAME from '@salesforce/label/c.COUNTRY_NAME';
import CURRENCY_RATE from '@salesforce/label/c.CURRENCY_RATE';
import getCallout from '@salesforce/apex/currencyRateCallout.getCalloutData';
export default class currencyRate extends LightningElement {
ready= false;
label = {
CURRENCYRATE_PAGE_HEADER,
COUNTRY_NAME,
CURRENCY_RATE,
};
@wire (getCallout) callout;
}● Step 6 : Update the xml file : currencyRate.xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>● Step 7 : Preview the app.
● Note: custom labels used:
{Label.CURRENCYRATE_PAGE_HEADER} | CURRENCY RATE TABLE |
{Label.COUNTRY_NAME} | Country |
{Label.Rate} | Rate |
Happy!! To help you add to your knowledge. You can leave a comment to help me understand how the blog helped you. If you need further assistance, please leave a comment or contact us. You can click on "Reach us" on the website and share the issue with me.
Blog Credit:
N. Mehra
Salesforce Developer
Avenoir Technologies Pvt. Ltd.
Reach us: team@avenoir.ai
Comments