Time tracker in a DFFS enabled list

Here is an example of a simple time tracker in a DFFS enabled list.

Before you start you must set up DFFS. You find more info here.

Create the list

Create a custom list, and add these fields. Ensure you use the exact same FieldInternalName as described here. When the field has been created, you can change the name to whatever you like.

  • Title (Default field already present in the list)
  • Description (Multiple lines of text ) – This field is optional, and not required in the solution.
  • StartTimeString (Single line of text
  • TotalTimeString (Single line of text)
  • Activity (Multiple lines of text – plain text)
  • Log (Multiple lines of text – plain text)
  • TotalTime (Calculated) – with this formula – output as “Single line of text”:
    =TEXT(INT(TotalTimeString/1000)/86400,"hh:mm:ss")
  • Ticking (Calculated) – with this formula – output as “Yes/No”:
    =StartTimeString<>""

Configure DFFS

Enter DFFS backend in NewForm and EditForm, and set up DFFS like this (you can create NewForm first, and then clone it to EditForm):

TimeTrackerInDFFS_1

TimeTrackerInDFFS_2

TimeTrackerInDFFS_3

TimeTrackerInDFFS_4

Then add this code to the Custom JS textarea:

(function(){
 var a = [], b = [], tt;
 a.push("<tr style='font-size:18px;color:green;'>");
 a.push("<td colspan='2' style='padding:2px;'>");
 a.push("<span id='elapsedTime'></span><span id='totalTime'></span>"); 
 a.push("</td>");
 a.push("</tr>");
 $("table.ms-formtable").prepend(a.join(""));
 b.push("<span title='You can save and close the list item while the timer is running. It will keep tracking time until you edit the item and click \"Stop the timer\".'>");
 b.push("<input style='background-color:#C2CF8A;color:#444;' type='button' id='dffsTimeTrackerStartBtn' value='Start the timer' onclick='startTicker()'>");
 b.push("<input style='background-color:#D57C7C;color:#ffffff;display:none;' type='button' id='dffsTimeTrackerStopBtn' value='Stop the timer' onclick='stopTicker()'>");
 b.push("<span>&nbsp;</span>");
 b.push("</span>");
 $("input[id$='_diidIOSaveItem']:last").before(b.join(""));
 tt = getFieldValue("TotalTimeString");
 if(tt !== ""){
 $("#elapsedTime").html("Total time: "+getFriendlyTime(Number(tt)));
 }
})();

function startTicker(){
 var a= getFieldValue("StartTimeString");
 if(a === ""){
 setFieldValue("StartTimeString",new Date().valueOf());
 $("#dffsTimeTrackerStartBtn").hide();
 $("#dffsTimeTrackerStopBtn").show();
 $("#totalTime").html("");
 }
}

function stopTicker(){
 var a = getFieldValue("StartTimeString")
 , b = new Date().valueOf()
 , u = spjs.utility.userInfo(_spPageContextInfo.userId)
 , et = b-Number(a)
 , tt = Number(getFieldValue("TotalTimeString")) + et
 , log = getFieldValue("Log")
 , al = getFieldValue("Activity");
 setFieldValue("TotalTimeString",Number(tt));
 // Reset start time and log
 setFieldValue("StartTimeString","");
 setFieldValue("Activity","");
 if(a !== ""){
 if(log !== ""){
 log += "\n*******************\n";
 }
 if(al !== ""){
 al = "\n\nActivity log:\n"+al;
 }
 setFieldValue("Log",log+u.Title+"\nStart: "+new Date(Number(a)).toLocaleString(_spPageContextInfo.currentUICultureName)+"\nEnd: "+new Date().toLocaleString(_spPageContextInfo.currentUICultureName)+"\nElapsed time="+getFriendlyTime(et)+al);
 }
 $("#elapsedTime").html("");
 $("#totalTime").html("Total time: "+getFriendlyTime(tt));
 $("#dffsTimeTrackerStartBtn").show();
 $("#dffsTimeTrackerStopBtn").hide();
}

function getFriendlyTime(ms){
 var h, m, s;
 h = Math.floor(ms / 3600000);
 m = Math.floor((ms % 3600000) / 60000);
 s = Math.floor((ms % 60000) / 1000);
 return (h<10?"0"+h:h)+":"+(m<10?"0"+m:m)+":"+(s<10?"0"+s:s);
}

if(getFieldValue("StartTimeString") !== ""){
 $("#dffsTimeTrackerStartBtn").hide();
 $("#dffsTimeTrackerStopBtn").show();
}

setInterval(function(){
 var a = getFieldValue("StartTimeString"), b = new Date().valueOf(), tt = Number(getFieldValue("TotalTimeString"));
 if(a !== ""){
 $("#elapsedTime").html("Elapsed time: "+getFriendlyTime(b - Number(a))); 
 if(tt !== ""){
 $("#elapsedTime").append(" / Total time: "+getFriendlyTime(tt + (b - Number(a))));
 }
 } 
},1000);

Final result

When you press “Start the timer”, this is how it looks in the form:

TimeTrackerInDFFS_5

When you stop the timer, the total time is displayed like this:

TimeTrackerInDFFS_6

If you restart the timer again, it will count the current elapsed time, and the total time like this:

TimeTrackerInDFFS_7

You can save the list item with the timer running. When you  edit it again afterwards, press “Stop the timer” and save the item.

This is how it looks in the list view:

TimeTrackerInDFFS_8

Please note that the “TotalTime” field will only show the time after the timer has been stopped, and will not show the “live ticker”.

Post any questions in the forum for DFFS here

Alexander