In the previous article I showed a step-by-step guide to display the remaining days in a task list. In the example I just described the modification for a view. To have the same value also in the display form of a task item, only a small extension is necessary.

The script itself needs to be extended, so it could also be used in a display form. But do not forget the comma in line 7.

(function () {
  var fieldCtx = {};

  fieldCtx.Templates = {};
  fieldCtx.Templates.Fields = {
    "Remaining": {
                "View": RemainingFieldViewTemplate,
                "DisplayForm": 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 we need to upload the script as seen in my article Colored output in list view with JSLink.

Last step is, to add the link to the script in the web part that is used to show the display form. Open any item from the task list by clicking the View Item button in the ribbon. Switch to the edit mode of the web part page and open the tool pane of the web part on the page to show the properties of the web part.

Expand the Miscellaneous section in the tool pane and enter the link to the script file to the JS Link field. In this example we enter “~site/_catalogs/masterpage/Remaining_Days_JSLink.js”. Click OK to save the properties in the web part and Stop Editing in the ribbon to save the changes in the web part page.

Again open any item by clicking the View Item button in the ribbon. Click the Show More link to display all fields for the task to see the remaining days.

Advertisements