Need help creating table row countdown timer

  • 1
  • Question
  • Updated 1 year ago
  • Answered
I am trying to create a table row specific counter using a data/time field and a formula field that is set to NOW(). The Custom field would be subtracted from NOW() and that would return the countdown timer. 

I am a javascript noob, so any help is greatly appreciated. I am referencing this counter from W3 schools.


Here is my snippet that currently doesn't. I need help identifying the row field value for a custom date/time field, "MarketingStatusSLAStop__c". I then need to assign that to either a template field or custom field render, but can't seem to figure that out. 

Again any help is apprecaited. 


var params = arguments[0],	$ = skuid.$;
	
var model = skuid.model.getModel('Main_Contact');
var row = model.getFirstRow();
var dateVar = row.MarketingStatusSLAStop__c;

// Get todays date and time
//var now = Date.now();
var now = row.Now;

//convert from Salesforce date to Javascript date
var jsdateVar = skuid.time.parseSFDateTime(dateVar);
var jsNow = skuid.time.parseSFDateTime(now);

// Set the date we're counting down to
var countDownDate = jsdateVar;
//var jscountDownDate = skuid.time.parseSFDateTime(countDownDate);

//alert(countDownDate);

// Update the count down every 1 second
var x = setInterval(function() {

    
    
    // Find the distance between now an the count down date
    var distance = countDownDate - jsNow;
    
//alert(distance);    

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    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);
    
    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("Now2").innerHTML = "EXPIRED";
    }
}, 1000);


//convert from Javascript date back to Salesforce date
//var hourAdded = skuid.time.getSFDateTime(jsDate);
//model.updateRow(row,{Your_Date_Field__c : hourAdded});
Photo of Josef Lagorio

Josef Lagorio

  • 2,864 Points 2k badge 2x thumb

Posted 1 year ago

  • 1
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Josef,

I have looked at your question several times.  I don't think there is a way to get a running clock on every row of the table without causing an issue for your user.  One way to accomplish the running clock is to add a Model UI Formula field to calculate the time remaining.  Then setup an Inline script to requery and re-render the table every second.  The issue is that on such a short interval, the table would requery before the user could make and save any changes.

You could do an auto-refresh every minute where the user is prompted whether they want to refresh or not.  Zach demonstrates this on a dashboard.  See here-> https://community.skuid.com/skuid/topics/real-time-dashboards

Thanks,

Bill