Covid-19 Tracker in Salesforce - Lightning Component

Hello Folks in this post I’m going to provide you the code of the Covid 19 Tracker which I created Last year and demonstrated over my youtube channel.

The problem is on that tutorial I forgot to add one important point which is Remote site Settings. So before you start writing Code make sure you create a remote site setting for the API.

To add a remote site setting:

From Setup, enter Remote Site Settings in the Quick Find box, then select Remote Site Settings.
Click New Remote Site.
Enter a descriptive term for the Remote Site Name.
Enter the URL (https://api.covid19api.com)for the remote site.
Optionally, enter a description of the site.
Click Save.

Learn more about Salesforce Flow Bootcamp

Sample of the Covid 19 Tracker (In the video tutorial code is not optimized so you can see the change in the code)

Now you can start creating your Lightning Component & Apex Controller

Apex Class Covid19Controller


public class Covid19Controller {
@AuraEnabled
public static Covid19Parser getCovidData(){
string baseURL = 'https://api.covid19api.com/summary';
HTTPRequest request = new HTTPRequest();
request.setEndpoint(baseURL);
request.setMethod('GET');
request.setHeader('Accept', 'application/json');
HTTP H = new HTTP();
HttpResponse response = h.send(request);

Covid19Parser prsr = Covid19Parser.parse(response.getBody().replace('"Global":','"AllStats":'));
return prsr;
}

}

Register for Salesforce Flow Bootcamp

Apex Class Covid19Parser


public class Covid19Parser {
@AuraEnabled
public AllStats allstats;

@AuraEnabled
public List<Countries> countries;

public class AllStats{

@AuraEnabled
public String NewConfirmed;
@AuraEnabled
public String TotalConfirmed;
@AuraEnabled
public String TotalDeaths;
@AuraEnabled
public String TotalRecovered;

}
public class Countries{
@AuraEnabled
public String Country;
@AuraEnabled
public String NewConfirmed;
@AuraEnabled
public String TotalConfirmed;
@AuraEnabled
public String NewDeaths;
@AuraEnabled
public String TotalDeaths;
@AuraEnabled
public String NewRecovered;
@AuraEnabled
public String TotalRecovered;
}
public static Covid19Parser parse(String json){
return(Covid19Parser) System.JSON.deserialize(json, Covid19Parser.class);

}

}

Lightning Component Covid19Tracker


<!--
Date: 21/05/2020
Source: Shubham Bhardwaj
Project Name: COVID-19 World Tracker
-->

<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes"
access="global"
controller="Covid19Controller">

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler event="aura:waiting" action="{!c.showSpinner}"/>
<aura:handler event="aura:doneWaiting" action="{!c.hideSpinner}"/>

<!-- Header Attributes -->
<aura:attribute name="confirmed" type="String"/>
<aura:attribute name="newConfirmed" type="String"/>
<aura:attribute name="recovered" type="String"/>
<aura:attribute name="deaths" type="String"/>

<aura:attribute name="spinner" type="boolean" default="FALSE"/>

<!-- Table Attributes -->

<aura:attribute name="data" type="Object"/>
<aura:attribute name="columns" type="List"/>

<!-- Pagination Attributes -->
<aura:attribute name="PaginationList" type="Object"/>
<aura:attribute name="startPage" type="Integer" />
<aura:attribute name="endPage" type="Integer"/>
<aura:attribute name="totalRecords" type="Integer"/>
<aura:attribute name="pageSize" type="Integer" default="10"/>

<div class="slds-page-header">
<div class="slds-grid">

<div class="slds-col slds-size_11-of-12">
<span style="font-size:24px;">COVID-19 World Tracker</span>
</div>
<div class="slds-col slds-size_1-of-12">

<lightning:buttonIcon iconName="utility:refresh" variant="brand" onclick="{!c.doInit}" alternativeText="Settings" title="Settings" />
</div>
</div>
</div>
<!--loading spinner start-->
<aura:if isTrue="{!v.spinner}">
<div aura:id="spinnerId" class="slds-spinner_container">
<div class="slds-spinner--brand slds-spinner slds-spinner--large slds-is-relative" role="alert">
<span class="slds-assistive-text">Loading...</span>
<div class="slds-spinner__dot-a"></div>
<div class="slds-spinner__dot-b"></div>
</div>
</div>
</aura:if>
<!-- Loading spinner end-->
<lightning:card>
<lightning:tabset>
<lightning:tab label="Live Data">
<div class="slds-grid" >
<div class="slds-col slds-size_3-of-12" Style="background-color:Orange; padding:10px;">
<span style="color:white; font-size:18px;">TOTAL CONFIRMED: <b stye="font-size:17px;">{!v.confirmed}</b> </span>
</div>
<div class="slds-col slds-size_3-of-12 " Style="background-color:blue; padding:10px;">
<span style="color:white; font-size:18px;">NEW CONFIRMED: <b stye="font-size:17px;">{!v.newConfirmed}</b></span>
</div>
<div class="slds-col slds-size_3-of-12" Style="background-color:Green; padding:10px;">
<span style="color:white; font-size:18px;">TOTAL RECOVERED: <b stye="font-size:17px;">{!v.recovered}</b></span>
</div>
<div class="slds-col slds-size_3-of-12" Style="background-color:Gray; padding:10px;">
<span style="color:white; font-size:18px;">TOTAL DEATHS: <b stye="font-size:17px;">{!v.deaths}</b></span>
</div>
</div>
<!-- Data Table -->
<div style="height: 100%; font-size: 18px; padding: 1%;">
<lightning:datatable
keyField="id"
data="{! v.PaginationList }"
columns="{! v.columns }"
hideCheckboxColumn="true"/>
</div>
<div class="slds-align_absolute-center">
<lightning:buttonGroup>
<lightning:buttonIcon iconName="utility:back"
variant="brand"
disabled="{!v.startPage == 0}"
alternativeText="Back"
title="Back"
onclick="{!c.previous}"/>
&nbsp; &nbsp; &nbsp;
<lightning:buttonIcon iconName='utility:forward'
variant="brand"
disabled="{!v.endPage >= v.totalRecords}"
alternativeText="Forward"
title="Forward"
onclick="{!c.next}"/>
</lightning:buttonGroup>
</div>
</lightning:tab>
</lightning:tabset>
</lightning:card>
</aura:component>

Controller


({
doInit : function(component, event, helper) {
component.set('v.columns', [
{label: 'Country', fieldName: 'Country', type: 'text'},
{label: 'New Confirmed', fieldName: 'NewConfirmed', type: 'text'},
{label: 'Total Confirmed', fieldName: 'TotalConfirmed', type: 'text'},
{label: 'New Recovered', fieldName: 'NewRecovered', type: 'text'},
{label: 'Total Recovered', fieldName: 'TotalRecovered', type: 'text'},
{label: 'New Deaths', fieldName: 'NewDeaths', type: 'text'},
{label: 'Total Deaths', fieldName: 'TotalDeaths', type: 'text'},
]);
helper.getApiData(component);

},
// function automatic called by aura:waiting event
showSpinner: function(component, event, helper) {
// make Spinner attribute true for displaying loading spinner
component.set("v.spinner", true);
},

// function automatic called by aura:doneWaiting event
hideSpinner : function(component,event,helper){
// make Spinner attribute to false for hiding loading spinner
component.set("v.spinner", false);
},
next: function (component, event, helper) {
helper.next(component);
},
previous: function (component, event, helper) {
helper.previous(component);
},
})

Helper


({
getApiData : function(component) {
var action = component.get('c.getCovidData');

action.setCallback(this,function(response){
var state = response.getState();

if(state === 'SUCCESS' || state === 'DRAFT'){
// alert('SUCCESS');
var result = response.getReturnValue();
var resList = response.getReturnValue().countries;
console.log(JSON.stringify(result));

component.set('v.newConfirmed',result.allstats.NewConfirmed);
component.set('v.confirmed',result.allstats.TotalConfirmed);
component.set('v.recovered',result.allstats.TotalRecovered);
component.set('v.deaths',result.allstats.TotalDeaths);

//List of Data

component.set('v.data',resList);
component.set("v.totalRecords", resList.length);

//setting start/end page value
var pageSize = component.get('v.pageSize');
component.set('v.startPage',0);
component.set('v.endPage',pageSize-1);

var PaginationList = [];
for(var i=0; i< pageSize; i++){
if(component.get("v.data").length> i)
PaginationList.push(resList[i]);
}
component.set('v.PaginationList', PaginationList);

}else if(state === 'ERROR'){
alert('ERROR');
}else if(state === 'INCOMPLETE'){
alert('INCOMPLETE');
}
},'ALL');

$A.enqueueAction(action);

},next : function(component, event){
var resCountries = component.get("v.data");
var end = component.get("v.endPage");
var start = component.get("v.startPage");
var pageSize = component.get("v.pageSize");
var Paginationlist = [];
var counter = 0;
for(var i=end+1; i<end+pageSize+1; i++){
if(resCountries.length > i){
Paginationlist.push(resCountries[i]);
}
counter ++ ;
}
start = start + counter;
end = end + counter;
component.set("v.startPage",start);
component.set("v.endPage",end);
component.set('v.PaginationList', Paginationlist);
},
previous : function(component, event){
var resCountries = component.get("v.data");
var end = component.get("v.endPage");
var start = component.get("v.startPage");
var pageSize = component.get("v.pageSize");
var Paginationlist = [];
var counter = 0;
for(var i= start-pageSize; i < start ; i++){
if(i > -1){
Paginationlist.push(resCountries[i]);
counter ++;
}else{
start++;
}
}
start = start - counter;
end = end - counter;
component.set("v.startPage",start);
component.set("v.endPage",end);
component.set('v.PaginationList', Paginationlist);
},

})

Style


.THIS lightning-primitive-header-actions {
display: none;
}

Result:

For the video tutorial check this out

Get complete Roadmap To Learn Salesforce Admin And Development 👇

Share Now

Covid-19 Tracker in Salesforce – Lightning Component

Learn more about Salesforce Flow Bootcamp

Register for Salesforce Flow Bootcamp

Get complete Roadmap To Learn Salesforce Admin And Development 👇

Shubham Bhardwaj

Leave a Reply Cancel reply

Learn Salesforce Flows 👇

Prepare for PD1 Exam

Crack the Admin Exam

Book a 1:1 Call 👇

Featured on Apex Hours

Use Responsive Web Forms for Salesforce Lead Generation

Salesforce Integration Roadmap for Beginners

Order of execution in Salesforce

Covid-19 Tracker in Salesforce – Lightning Component

Get complete Roadmap To Learn Salesforce Admin And Development 👇

Similar Posts

Leave a Reply Cancel reply