HomeLightningSalesforce Lightning Time Ago

Salesforce Lightning Time Ago

By April 27, 2017 Lightning 0 Comments

In this blog, I am going to explain the time ago lightning components. Time Ago is the feature that will allow displaying the dates in “time Ago “format. The Application which you are going to build with this blog is going to look like as show like below image. Opportunity table that contains the close date and created date will be displayed in the time ago format.

What you are going to do 

  • Opportunity Lightning Time Ago Application
  • Opportunity Time Ago Component
  •  Using Timeago.js in components

Prerequisite

  • My Domain Should is enabled.
  • bootstrap static resource. Static resource name “bootstrap”
  • time ago JavaScript static resource. Static resource name “timeago”

Step 1:  Creating “OpportunityTimeAgo” lightning APP.

This Application is the container to place the lightning Time ago components.

Go to Developer Console, Create a Lightning App bundle with name “OpportunityTimeAgo” and add the below code.

 . 

Step 2:  Creating Apex Class “OpportunityCls” 

Now you are going to create an Opportunity list Component which contains time ago feature. After that, we will be adding to the Above App

 

Step 3: Creating “OpportunityList” Component

This Component will fetch the List of opportunities and display it in table format

Add the Below logic to OpportunityListController.js

 

Code Highlights

  • Opportunities attributes have contained the list of Opportunities return from Apex Controller.
  • aura: handler that will be executed on the component initialization.

Adding OppotynityList Component  to OpportunityTimeAgo App .

go to Developer Console — > Open Lightning resource  “OpportunityTimeAgo” and add the OpportunityList component to it as shown below.

Step 4 : Creating “OpportunityListTimeAgo” Component

Create an OpportunityListTimeAgo Component with the below code. This Component will be displayed the date in time ago format.

Add below code to OpportunityListTimeAgoController.js

Code Highlights 

  •  OpportunityListTimeAgo Component have a attribute “timeAgo” which will be used to pass from the OpportunityList.cmp Component .
  • aura:handler used to convert the date into TimeAgo format .

Step 5 : Adding OpportunityListTimeAgo.cmp to OpportunityList.cmp 

add OpportunityListTimeAgo to the OpportunityList component as show below .

Github URL for Complete code: https://github.com/rajamohanvakati/Lightning-Time-Ago

Related Posts