The aim of this section is to build a Lightning Application to display a sales LeaderBoard and to launch a modal using the events. We will pass data to the modal component using the application event.

A diagram of the component that we will be building is as follows:

The following screenshot displays the LeaderBoard card component:

Once the card is clicked on, the modal displays the details as follows:

Let's start with the backend Apex code needed for the frontend markup. The SalesLeader class creates the data structure that we need for each card on the UI. Each card shows data from the Salesforce user table. Notice that we have implemented an Apex comparable interface, to allow for the capability to sort the list:

public class SalesLeader implements Comparable{

 @AuraEnabled
 public String fullname {get;set;}
 @AuraEnabled
 public String email {get;set;}
 @AuraEnabled
 public String userId {get;set;}
 @AuraEnabled
 public Decimal...