COVID-19 tracker in LWC

-
What's the best way to spend the weekend when the country is in lockdown mode - write some cool Lightning components. Over the weekend, I have created a single page application in LWC which gives you the live numbers of how many people are affected by the COVID-19 pandemic worldwide. In a single view, the application gives you an overview of how many people are affected globally. It also gives you the breakdown of the numbers on a per-country basis. You can filter the information by providing the desired country name. Also, besides each country's name is an info icon, which gives you more details for that specific country.

You can install this application using the following unmanaged package: https://login.salesforce.com/packaging/installPackage.apexp?p0=04t6F000004LDId
A live demo of the application is hosted on the following force.com site: https://covid19-info-developer-edition.ap17.force.com/statistics . Please note that this is a developer account and it allows only a limited number of hits per day, so you may get an exception if the limit is already consumed for the day.
The source of data is a web service that is created by a group of developers and hosted on Github.
Now let us look at the architecture of the application. I have followed a design pattern in which the parent component (sometimes called a container component) is responsible for fetching the data. The child components have minimal logic and are mainly used to display the data. Any required data manipulation is done by the parent component and the modified data is again passed back to the child component which re-renders itself on change of data. The need for data change by child components is communicated with the parent component using events. The application is composed of 3 components:
  • covidInfo: This is the top-level component of the application whose role is to do a web service call and fetch the required data. Once the data is fetched, it massages the data and feeds it the child components.
  • covidCounts: This component displays the aggregated count. This is a display only component and does not contain any business logic.
  • covidTable: This component displays the data on a per-country basis in a tabular format. This component also has the functionality to filter the table. 
  • covidCountryInfo: This component is displayed when the info icon present next to a country's name is clicked. This component displays the counts specific to a given country.
Let's have a look at the code and try to understand how this application works.
covidInfo.html
covidInfo.js
When the element is inserted into the document, the connectedCallback method is automatically called. We make a web service call in this method using the fetch API provided by JavaScript. On completion of the web service call, we iterate over the response array and aggregate the information which is being passed to the child component covidCounts in the form of an object. covidCounts.html
This component displays the data which is fed by the parent component covidInfo. covidCounts.js
covidCounts.css covidTable.html
This table displays the country wise data in a tabular format. I have used an HTML table styled with custom CSS to display the data. covidTable.js
The handleChange method is called when user types in the search box. I have debounced the method so that it does not throw an event with the change of each keystroke. Instead, the method waits for 1000ms and then throws an event that is handled by the parent component - covidInfo. The debouncing allows us to have a better performing app and you should always consider debouncing methods which perform some action on change event. covidTable.css
covidCountryInfo.html
This component is conditionally rendered. When the user clicks on the info icon present next to each country's name is the covidTable component, this component will render. covidCountryInfo.js
covidCountryInfo.css
I hope you have enjoyed reading this article. If you have any questions, please feel free to drop a comment or message me on LinkedIn.

Comments

  1. Anjali11 February 2021 at 15:04

    Such a very useful article. Very interesting to read this article. I would like to thank you for the efforts you had made for writing this awesome article. After reading your article I was amazed. I know that you explain it very well. And I hope that other readers will also experience how I feel after reading your article .Check out our website also we are one of the best salesforce marketing cloud implementation service in . We are register salesforce consulting and ISV Partner.

    ReplyDelete

Post a Comment

Popular posts from this blog

Salesforce Lightning: Countdown timer

-
Image
Today we will have a look at how to create a lightning component for countdown timer which can be used on pages where an operation needs to be completed within a specific time period. Example, an online exam or a banking transaction which expires after a specific time period. The component contains a datetime field which represents the end time. Once the user selects the date and time and clicks on Start Timer button, the countdown timer will start. Below is the lightning component: CountdownTimer.cmp <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >       <aura:attribute name="endTime" type="String"/>       <aura:attribute name="timeLeft" type="String"/>       <lightning:tile label="Time Left" class="slds-page-header">         {!v.timeLeft}     </lightning:tile...
Read more

Salesforce Hacks: System.LimitException: Too many queueable jobs added to the queue: 2

-
Queueable classes are great to use and provides a wide range of advantages when compared to future methods. But there are some undocumented limitations which you will come across if you are using Queueable classes extensively inside your batch classes. Lets take an example of badly written trigger on Account.  trigger AccountTrigger on Account (before insert) {     for(Account acc: Trigger.new){         Database.executeBatch(new CreateContactBatch(), 2);     } }   The above trigger calls a batch class for every account record that gets inserted in database. So if you insert N accounts in a single transaction via dataloader or anonymous block or through any other means, the trigger will execute the batch class N number of times. Below is the code for batch class: global class CreateContactBatch implements Database.Batchable<sObject> {          global Database.QueryLocator start(Database.Bat...
Read more

Building an Org Role Hierarchy component in LWC

-
Image
You might have observed that the role hierarchy which gets displayed in the org (Setup > Users > Roles) is still displayed using a VF component. Today, we will see how to create the same role hierarchy using LWC and Apex. LWC provides us with a component called lightning-tree which displays a nested tree. We will make use of this component to display the role hierarchy in a tree structure. In Apex, we will query all the user roles and form a JSON structure which will be fed to the lightning-tree component. Let's first see the LWC component - roleHierarchy: roleHierarchy.html <template> <div class="slds-p-around_medium lgc-bg"> <lightning-tree items={roles} header="Roles"> </lightning-tree> </div> </template> Here we have used the lightning-tree component which will display the data in a tree structure. The items attribute is of type Object which has nested i...
Read more