Salesforce Lightning: Countdown timer

-
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>

    <lightning:input type="datetime" name="input1" label="Enter a date/time value" value="{!v.endTime}"/>
 
    <lightning:button variant="brand" label="Start Timer" title="Start Timer" onclick="{!c.startTimer}" />

</aura:component>

CountDownTimerController.js
({
    startTimer : function(component, event, helper) {
        var countDownDate = new Date(component.get("v.endTime"));

        // Update the count down every 1 second
        var timer = setInterval(function() {
         
            // Get todays date and time
            var now = new Date().getTime();
         
            // Find the distance between now and the count down date
            var distance = countDownDate - now;
         
            // Time calculations for days, hours, minutes and seconds
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
         
            // Display the result in the element with id="demo"
            var timeLeft =  hours + "h " + minutes + "m " + seconds + "s ";
            component.set("v.timeLeft", timeLeft);
        }, 1000);
    }
})

Comments

  1. bbennyb3 November 2020 at 22:00

    Would it be possible to set the value of endTime using the datetime value of a field on the case record page, such as an SLA target deadline, and if so, how would you call and pass the field value to the function when the page loads?

    ReplyDelete
  2. Ravi Dutt Sharma15 November 2020 at 20:13

    Yes, add an init handler and query the field value in apex and return back to your aura component.

    ReplyDelete
  3. TheRealIZ3 November 2023 at 18:25

    Do you have a version that can run on Experience Cloud? and Can it be customized with color, font and size?

    ReplyDelete

Post a Comment

Popular posts from this blog

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.BatchableContext BC) {         String query = 'SELECT Id FROM Account'
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