Calculating how long a user spend in New form and editform.aspx

Question

Business Requirements: I require a way to track how long a ticket takes to complete (including time spent "working on" the ticket). Essentially I have a SP2013 list, which I can customise using InfoPath

My colleagues take a phone call and start a ticket by clicking new item. If they spend 20 mins on that phone call, then press save. Then go back into it and work on the ticket for 30 mins, then press save, then go back into the item and call the customer back and that takes 10 mins. I'd like to be able to see that the particular ticket took 1 hour to complete.

Questions As Follows:

1. Is this even possible in SP2013?

2. What would I need to do this? Workflows, JScript, Event Handlers etc

3. Considering my limited sharepoint experience (I'm not a developer) would I be able to google the answers?

Answer 1

I find your requirement interesting, as it is quite common for a ticketing system.

SharePoint can't do this natively, the reason being that the created and modified dates get written when an item is actually inserted and updated. You need to track the time spent on a form, that is the timespan between the click on the "add new item"/"edit item" button and the click on the "save" button.

The only thing I can see as feasible is resorting to some javascript to keep track of the time spent. So basically a timer function that kicks off as soon as the new form/edit form is opened and on saving, sets a hidden field value with the elapsed time (I would go for the total number of seconds elapsed, it should be easier working with the value later).

This is not that complicated, but some knowledge of both SharePoint and javascript is required. The complete receipt is as follow:

• add a new column of time Number to your list. Call it eg. timespan
• in SharePoint designer: create a new "new form" and new "edit form" and set them as the default for your list.
• add a script tag to the body of each form, with the following javascript code:

--

<script type="text/javascript">
    var startTime = Date.now();        
</script>

add a PreSaveAction function that will get called when the save button is clicked:

function PreSaveAction(){
    var endTime = Date.now();
    var elapsed = (endTime - startTime) / 1000;  // total number of seconds
    var timespanFieldValue = $('[title="timespan"]').val(); //current timespan (this should have some value if in edit form)
    var currentTimespan = isNaN(parseInt(timespanFieldValue )) ? 0 : parseInt(timespanFieldValue);
    $('[title="timespan"]').val(currentTimespan + elapsed);
}

(The last javascript snippet requires jQuery).

Answer 2

Since you are using SharePoint 2013 and in SharePoint 2013 Client-Side-Rendering (CSR) is a default rendering mode, below is demonstrated the CSR solution.

The solution consist of:

• Duration Text field for storing the duration of time when the item was in Create/Edit Mode
• JavaScript Template file for calculating of duration in New/Edit Form pages, displaying duration in user friendly format (minutes) in Display Form and View pages

Duration column

Assume the tickets are stored in Tasks list. Let's add a Text column named Duration to track how long a ticket takes to complete into Tasks list.

JavaScript template file

Key points:

• The value in Duration column is stored in Milliseconds ( see durationEdit function for a details)
• Since value in Duration column is stored in Milliseconds, function formatDuration is used to display formatted value (in minutes) for Display Form & View pages

File: Tasks.js

(function () {


    function durationEdit(renderCtx) {
       var fieldCtx = SPClientTemplates.Utility.GetFormContextForCurrentField(renderCtx);
       var durationControl = SPFieldText_Edit(renderCtx); 

       var startDate = new Date();
       var durationVal = renderCtx.CurrentFieldValue.length > 0 ? parseInt(renderCtx.CurrentFieldValue) : 0;


       fieldCtx.registerGetValueCallback(fieldCtx.fieldName, function(){
          var endDate = new Date(); 
          durationVal+= (endDate - startDate); 
          return durationVal.toString();
       });

       return durationControl;

    }


     function durationDisplay(renderCtx) {
        renderCtx.CurrentFieldValue = formatDuration(renderCtx.CurrentFieldValue); 
        return SPField_FormDisplay_Default(renderCtx);
     }

     function durationView(renderCtx) {

        return formatDuration(renderCtx.CurrentItem.Duration); 
     }

    //Format Duration column to display value in minutes
    function formatDuration(val)
    {
        if(val !== null  && val.length > 0) {
            return Math.round(((parseInt(val) % 86400000) % 3600000) / 60000) + ' min';
          }
        return '0 min';  
    }





    function registerRenderer()
    {
      var ctxTmpl = {};
      ctxTmpl.Templates = {};
      ctxTmpl.Templates.Fields = {
          'Duration' : { 'NewForm': durationEdit, 'EditForm': durationEdit, 'DisplayForm' : durationDisplay,'View' : durationView }
      };

      SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctxTmpl);
    } 
    ExecuteOrDelayUntilScriptLoaded(registerRenderer, 'clienttemplates.js');

})();

How to apply changes

Set the JSLink property for a Web Part in New Form (NewForm.aspx), Edit Form (EditForm.aspx), Display Form (DispForm.aspx) and View (AllItems.aspx) pages.

Steps:

• Upload JavaScript template file into Site Assets library
• Edit the page, then edit the web part. Under Advanced specify JavaScript template file location in JS Link property: ~sitecollection/SiteAssets/Tasks.js

Results

Task Display Form page

Task View page