In a SharePoint task list we can enter a due date as the date, when the task should be finished. When we need the information, how many days we have until this due date, we have a problem, because the number of days depend on the current date. In SharePoint 2013 we actually have the option to display the value in a date field in a friendly format.

But sometimes an additional presentation is requested. Because this value needs to be calculated, we have the option to use the new JS Link functionality in SharePoint 2013 to do this calculation. All we need is a field that displays the value and some JavaScript to do the calculation.

In my article Colored output in list view with JSLink I described already the necessary steps to upload the JavaScript file to the masterpage gallery. We will use exacly the same steps in this step-by-step guide.

In our site I have already created a new task list. To see some results, when we are finished, I also added some sample data to the list.

The next thing we need is a new field that could be used for the number of remaining days. Because it is not shown in the new and edit forms, I will use a calculated field. To add the field, open the list, in the ribbon choose List Settings and in the columns section click on Create column.

The formula for the calculated field is very simple, it is zero. I added the field directly to the default view, but when you plan to create your own view to display the number of remaining days (or any other value to will calculate in the same way), uncheck this checkbox before clicking OK to add the field.

Next step is to create the script with the JavaScript code that is necessary to manipulate the output. Create a text file (eg. with Notepad) with the following content and store the file in a folder on your harddisk.

(function () {
  var fieldCtx = {};

  fieldCtx.Templates = {};
  fieldCtx.Templates.Fields = {
    "Remaining": {
                "View": RemainingFieldViewTemplate
              }
  };

  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldCtx);
})();


function RemainingFieldViewTemplate(ctx) {
  var _dueDateValue = ctx.CurrentItem.DueDate;  // the value of the due date field

  var today = new Date();  // the current date
  today.setHours(0, 0, 0, 0);  // we just need the date part, so set the time to 00:00:00

  var date = new Date(_dueDateValue);  // convert the due date value to a variable of type Date

  var diff = date - today;  // calculate the difference

  var noOfDays = diff / (24 * 60 * 60 * 1000);  // normalize the difference to days

  return noOfDays;  // return the string that should be displayed
}

Next upload the JavaScript file as shown in the article Colored output in list view with JSLink.

With the script uploaded to the masterpage gallery, go to the view in the task list that should show the remaining days. Switch to the edit mode of the web part page and open the tool pane of the list view web part. Expand the Miscellaneous section in the web part properties and enter the reference to the JavaScript file in the JS Link field. In this example I added the value “~site/_catalogs/masterpage/Remaining_Days_JSLink.js”.


Click OK to save the settiings in the web part properties and Stop Editing in the ribbon to save the changes to the web part page.

This will show the result in this view:


Remark: Because we manipulate the values that are displayed in the column in the view, we do not change the value itself. This means, when we open the control for sorting and filtering, we do not see the changes we made to the output.

Advertisements