Post
Ask Question

Change The Format Of Field By Overriding The Display Item Template

In this blog, I would like to discuss the field format in the classic experience of the list/library using custom Display Item Template.

Introduction to Display Item Template

The Display item template consists of two files -- HTML and JS. The HTML file provides the HTML for list item display and JS file searches the data for displaying from the result set.

Based on the count of the result set item, the item template creates an HTML section as per the count in the list display.

Using the custom display item template, the format of the field can be changed.

For example, the format of the date field has to be DD/MMM/YYYY in the list display. But SharePoint is unable to support this format without the help of a calculated column. To achieve this in the particular list, we can add the custom item template js link to the list web part.

Steps to create the custom display item template

Upload the custom item template js file in the path mentioned below.

Path: site settings-> master page and page layout under web Designer Galleries-> Display template -> Content web parts -> upload the Custom Display Item template.js.

 
 
Custom Display Item Template.js file
  1. (function () {   
  2.     // Create an object that have the context information about the fields that we want to change the rendering of.    
  3.     var priorityFiledContext = {};   
  4.     priorityFiledContext.Templates = {};   
  5.     priorityFiledContext.Templates.Fields = {             
  6.         "EventDate": { "View": priorityFiledTemplate },  
  7.         "FbTime": { "View": priorityFiledTemplate },  
  8.         "test":{"View": priorityFiledTemplate}  
  9.     };    
  10.     SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext);    
  11. })();   
  12.  var dateString;  
  13. // This function provides the rendering logic for the list view   
  14. function priorityFiledTemplate(ctx) {  
  15. debugger;     
  16.     var priority =ctx.CurrentFieldSchema.RealFieldName;   
  17.     dateString= ctx.CurrentItem[ctx.CurrentFieldSchema.Name];  
  18.     // Return html element with custom date format   
  19.         if(dateString!=''&& priority!='test'){  
  20.             const monthNames = ["0","Jan", "Feb", "Mar", "Apr", "May", "Jun","Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];  
  21.             var dateParts = dateString.split('/');  
  22.             dateParts=(dateParts[1]+'/'+monthNames[dateParts[0]]+'/'+dateParts[2]) ;  
  23.         }  
  24.         else{dateParts=dateString;}
  25.         switch (priority) {   
  26.         case "EventDate":    
  27.             return "<span>"+dateParts+"</span>";  
  28.             break;          
  29.         case "FbTime":   
  30.             return "<span>"+dateParts+"</span>";  
  31.             break;  
  32.          case "test":  
  33.             return "<div style='width:400px;'>"+dateParts+"</div>";  
  34.     }   
  35. }   
After the upload of the file, add the js reference in the respective list web part.
 
~site/_catalogs/masterpage/Display Templates/Content Web Parts/Custom Item_Template.js 
 
 
 
Here, I have the changed the format of the date field (Eventdate, FbDate) and increased the width of the test (multiline text) field.
 
Output

 
Note
The remaining fields are following the default display item template of the SharePoint list.