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
- My Domain Should is enabled.
- bootstrap static resource. Static resource name “bootstrap”
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
- 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
- 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