1

I have a SharePoint list with a date column called 'Expiration Date' containing a date value.

Using some JS code, I would like to first check if the date value equals to today and if so I would like to highlight it in red.

Can someone help me with the JS code for the same.

Node: I am working with SPOnline.

Thanks in advance.

3

For Modern UI:

Yes, you can use json formatting to conditionally color fields in sharepoint online.

The following example colors the current date field red when the value inside an item's ExpirationDate is before the current date/time.

{
   "$schema": 
   "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
   "elmType": "div",
   "debugMode": true,
   "txtContent": "@currentField",
   "style": {
       "color": "=if([$ExpirationDate] <= @now, '#ff0000', ''"
   }
}

Source: Use column formatting to customize SharePoint.

For Classic UI:

You can use Client Side Rendering (CSR) which represents a rendering engine for list views, list forms and search results. I would recommend you to consider the following approach for your task.

Below example demonstrates how to highlight list rows based on their date values:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() { 

  SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
    OnPostRender: function (ctx) {

        // get today's date
        var today = new Date();
        // zero out the time portion so we will only compare days
        today.setHours(0,0,0,0);

        var rows = ctx.ListData.Row;
        for (var i = 0; i < rows.length; i++) {

            // get the date set in your date YourDateField
            var itemDate = new Date(rows[i]['ExpirationDate']);
            // zero out the time portion so we only compare days
            itemDate.setHours(0,0,0,0);

            var rowId = GenerateIIDForListItem(ctx, rows[i]);
            var row = document.getElementById(rowId);

            if (itemDate >= today) {
                row.style.backgroundColor = '#ED9898';
            }
        }
    }
  });
});

For more clarification and how to add this code in JSLink of list view, see my answer How to Highlight a Row on Active Status.

Source:

  1. SharePoint 2013 Client Side Rendering: List Views.
|improve this answer|||||
  • 1
    Thanks Ganesh. Does this work in Modern UI only? Should I use the internal name of Expiration Date field? – mdevm Nov 9 '18 at 2:07
  • Yes. It works in Modern UI and use internal name of date field. – Ganesh Sanap Nov 9 '18 at 2:19
  • 1
    This will work only in Modern UI. for classic UI you need to use JSLink – Rahil Nov 9 '18 at 2:22
  • @mdevm are you using modern UI or classic UI? – Ganesh Sanap Nov 9 '18 at 2:30
  • I am using CLassic UI – mdevm Nov 9 '18 at 2:36
2

In Classic UI, we can add the following code into a script editor web part in list view to achieve it.

<script type="text/javascript">
(function () { 
    // Create object that have the context information about the field that we want to change it's output render  
    var fieldContext = {}; 
    fieldContext.Templates = {}; 
    fieldContext.Templates.Fields = { 
        // Apply the new rendering for Priority field on List View 
        "Expiration_x0020_Date": { "View": fieldTemplate } 
    }; 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(fieldContext);
})(); 

// This function provides the rendering logic for list view 
function fieldTemplate(ctx) { 
    var expirationDate = ctx.CurrentItem[ctx.CurrentFieldSchema.ExpirationDate];
    // Return html element with appropriate color based on priority value 
    if(new Date(expirationDate) <= new Date()) {
        return "<span style='color : red'>" + expirationDate + "</span>";
    }else {
        return expirationDate;
    }    
}
</script>

enter image description here

|improve this answer|||||
1

You can use calculated columns or js link See example in the link below

Calculated Column to change text color in a custom list

|improve this answer|||||
  • 2
    Do not use calculated column as MS has removed this functionality from SharePoint Online. – Rahil Nov 9 '18 at 2:23
0

I have an example I wanted to share here that applies to SharePoint 2013 on prem or it could be used in the classic experience in the new SharePoint. I stored my script in a site assets library and used the jslink to connect it to the list view. (Edit the page > edit the list web part > miscellaneous > JS Link: ~site/SiteAssets/ColorListDate.js)

Javascript:

(function () {
    var statusFieldCtx = {};

    statusFieldCtx.Templates = {};
    statusFieldCtx.Templates.Fields = {
    //internal column name between double quotes on the next line. If your column name has a space in its internal name use "_x0020_" in place of the space. 
        "My_x0020_Date": {
            "View": ColorCodeDueDate
            }
    };

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

function ColorCodeDueDate(ctx) {
    //update internal column name at the end of the next line
    var MyDateVar = new Date(ctx.CurrentItem.My_x0020_Date);
    MyDateVar.setHours(0,0,0,0);

    var today = new Date();
    today.setHours(0,0,0,0);

    var then1 = new Date();
    //use this to set how many days you want var then to be.
    then1.setHours(0,0,0,0);
    then1.setDate(then1.getDate() + 1);

    var then3 = new Date();
    then3.setHours(0,0,0,0);
    //use this to set how many days you want var then to be.
    then3.setDate(then3.getDate() + 3);

    var then4 = new Date();
    then4.setHours(0,0,0,0);
    //use this to set how many days you want var then to be.
    then4.setDate(then4.getDate() + 4);

    // if there's no due date don't render anything. Also update the column names in the else statements below. If your column name has a space in its internal name use "_x0020_" in place of the space.
    if (MyDateVar < today) {
        return "<div style='background-color:red;color:white'>" + ctx.CurrentItem.My_x0020_Date + "</div>";
    }
    else if (MyDateVar.getTime() == today.getTime()) { 
        return "<div style='background-color:orange;color:white'>" + ctx.CurrentItem.My_x0020_Date + "</div>";
    }
    else if (MyDateVar.getTime() >= then1.getTime() && MyDateVar.getTime() <= then3.getTime()) { 
        return "<div style='background-color:yellow;color:black'>" + ctx.CurrentItem.My_x0020_Date + "</div>";
    }
    else if (MyDateVar >= then4) {  
        return "<div style='background-color:green;color:white'>" + ctx.CurrentItem.My_x0020_Date + "</div>";
    }
}

End result (today was 3/10/20 in my screen shot)

enter image description here

Sources that helped me

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.