0

I followed this post on this site about color coding a SharePoint Column based on a date column. This worked really well and I got the result I wanted.

I followed the answer from @chris-g. Below is my code:

    (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. 
        "Next_x0020_Review_x0020_Date": {
            "View": ColorCodeNextReviewDate
            }
    };

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

function ColorCodeNextReviewDate(ctx) {
    //update internal column name at the end of the next line
    var MyDateVar = new Date(ctx.CurrentItem.Next_x0020_Review_x0020_Date.split('/')[2],ctx.CurrentItem.Next_x0020_Review_x0020_Date.split('/')[1]-1,ctx.CurrentItem.Next_x0020_Review_x0020_Date.split('/')[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 then30 = new Date();
    then30.setHours(0,0,0,0);
    //use this to set how many days you want var then to be.
    then30.setDate(then30.getDate() + 30);

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

    // 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.Next_x0020_Review_x0020_Date + "</div>";
    }
    else if (MyDateVar.getTime() == today.getTime()) { 
        return "<div style='background-color:orange;color:white'>" + ctx.CurrentItem.Next_x0020_Review_x0020_Date + "</div>";
    }   
    else if (MyDateVar.getTime() >= then1.getTime() && MyDateVar.getTime() <= then30.getTime()) { 
        return "<div style='background-color:yellow;color:black'>" + ctx.CurrentItem.Next_x0020_Review_x0020_Date + "</div>";
    }
    else if (MyDateVar >= then31) {  
        return "<div style='background-color:#00a58e;color:white'>" + ctx.CurrentItem.Next_x0020_Review_x0020_Date + "</div>";
    }
}

I was hoping to also add DIV styles to the same IF statements to colour another column. So currently, based off the formula, the "Next_x0020_Review_x0020_Date" is coloured - I also want the "Next_x0020_Review" column (a calculated column) to be coloured. So, I thought, I'd add the additional DIV lines to the result statements (which I think could work?) but I think my trouble area is in the initial Function statement at the top of the code where I add the column names (see below). My expertise is not JS so I'm just trying and testing but no luck so far.... Any help would be most appreciated :-)

(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. 
        "Next_x0020_Review_x0020_Date": {
            "View": ColorCodeNextReviewDate
            }
        "Next_x0020_Review": {
            "View": ColorCodeNextReviewDate
            }
    };

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

function ColorCodeNextReviewDate(ctx) {
    //update internal column name at the end of the next line
    var MyDateVar = new Date(ctx.CurrentItem.Next_x0020_Review_x0020_Date.split('/')[2],ctx.CurrentItem.Next_x0020_Review_x0020_Date.split('/')[1]-1,ctx.CurrentItem.Next_x0020_Review_x0020_Date.split('/')[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 then30 = new Date();
    then30.setHours(0,0,0,0);
    //use this to set how many days you want var then to be.
    then30.setDate(then30.getDate() + 30);

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

    // 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.Next_x0020_Review_x0020_Date + "</div>";
        return "<div style='background-color:red;color:white'>" + ctx.CurrentItem.Next_x0020_Review + "</div>";
    }
    else if (MyDateVar.getTime() == today.getTime()) { 
        return "<div style='background-color:orange;color:white'>" + ctx.CurrentItem.Next_x0020_Review_x0020_Date + "</div>";
        return "<div style='background-color:orange;color:white'>" + ctx.CurrentItem.Next_x0020_Review + "</div>";
    }   
    else if (MyDateVar.getTime() >= then1.getTime() && MyDateVar.getTime() <= then30.getTime()) { 
        return "<div style='background-color:yellow;color:black'>" + ctx.CurrentItem.Next_x0020_Review_x0020_Date + "</div>";
        return "<div style='background-color:yellow;color:black'>" + ctx.CurrentItem.Next_x0020_Review + "</div>";
    }
    else if (MyDateVar >= then31) {  
        return "<div style='background-color:#00a58e;color:white'>" + ctx.CurrentItem.Next_x0020_Review_x0020_Date + "</div>";
        return "<div style='background-color:#00a58e;color:white'>" + ctx.CurrentItem.Next_x0020_Review + "</div>";
    }
}
Improve this question

1 Answer 1

Reset to default
1

You have to write separate handler functions for each column. Try using below code:

(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. 
        "Next_x0020_Review_x0020_Date": {
            "View": ColorCodeNextReviewDate
        },
        "Next_x0020_Review": {
            "View": ColorCodeNextReviewColumn
        }
    };

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

function ColorCodeNextReviewDate(ctx) {
    //update internal column name at the end of the next line
    var MyDateVar = new Date(ctx.CurrentItem.Next_x0020_Review_x0020_Date.split('/')[2], ctx.CurrentItem.Next_x0020_Review_x0020_Date.split('/')[1] - 1, ctx.CurrentItem.Next_x0020_Review_x0020_Date.split('/')[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 then30 = new Date();
    then30.setHours(0, 0, 0, 0);
    //use this to set how many days you want var then to be.
    then30.setDate(then30.getDate() + 30);

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

    // 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.Next_x0020_Review_x0020_Date + "</div>";
    }
    else if (MyDateVar.getTime() == today.getTime()) {
        return "<div style='background-color:orange;color:white'>" + ctx.CurrentItem.Next_x0020_Review_x0020_Date + "</div>";
    }
    else if (MyDateVar.getTime() >= then1.getTime() && MyDateVar.getTime() <= then30.getTime()) {
        return "<div style='background-color:yellow;color:black'>" + ctx.CurrentItem.Next_x0020_Review_x0020_Date + "</div>";
    }
    else if (MyDateVar >= then31) {
        return "<div style='background-color:#00a58e;color:white'>" + ctx.CurrentItem.Next_x0020_Review_x0020_Date + "</div>";
    }
}

function ColorCodeNextReviewColumn(ctx) {
    //update internal column name at the end of the next line
    var MyDateVar = new Date(ctx.CurrentItem.Next_x0020_Review_x0020_Date.split('/')[2], ctx.CurrentItem.Next_x0020_Review_x0020_Date.split('/')[1] - 1, ctx.CurrentItem.Next_x0020_Review_x0020_Date.split('/')[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 then30 = new Date();
    then30.setHours(0, 0, 0, 0);
    //use this to set how many days you want var then to be.
    then30.setDate(then30.getDate() + 30);

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

    // 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.Next_x0020_Review + "</div>";
    }
    else if (MyDateVar.getTime() == today.getTime()) {
        return "<div style='background-color:orange;color:white'>" + ctx.CurrentItem.Next_x0020_Review + "</div>";
    }
    else if (MyDateVar.getTime() >= then1.getTime() && MyDateVar.getTime() <= then30.getTime()) {
        return "<div style='background-color:yellow;color:black'>" + ctx.CurrentItem.Next_x0020_Review + "</div>";
    }
    else if (MyDateVar >= then31) {
        return "<div style='background-color:#00a58e;color:white'>" + ctx.CurrentItem.Next_x0020_Review + "</div>";
    }
}

You can get the correct internal name of your column by following this article: How to find the Internal name of columns in SharePoint Online?

Improve this answer
1
  • 1
    Nice one! Worked perfectly. Just in the event anyone else follows this, I also removed the second DIV elements from the first section of IF Statements. Thanks Ganesh
    – Kelsnz
    Jul 18, 2022 at 22:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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