1

I have a SharePoint site that uses a Traffic Light column to indicate color based on another column, "Due Date." However, we just added a new column called, "Actual Start Date." In the case where "Actual Start Date" is blank / empty, the Traffic Light color should be blue, and disregard what is in the 'Due Date' column.

Here is the JavaScript that we have so far, I am just stuck as to how to add the new column and then make it do what I want, show Blue Traffic Light if "Actual Start Date" column is blank.

(function() {

    var itemCtx = {};
    itemCtx.Templates = {};
    itemCtx.Templates.Fields = {

        'Status': {
            'View': renderStatus
        },

        'DueDate': {
            'View': renderDueDate
        },

        'Start_x0020_Date': {
            'View': renderStartDate
        },
        'Traffic_x0020_Light': {
            'View': renderTrafficLight
        },


        'Priority': {
            'View': renderPriority
        },

    };

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);

})();


// Changes the background of the status

function renderDueDate(ctx) {
    var curritem = ctx.CurrentItem;
    var dueDateValue = ctx.CurrentItem['DueDate'];
    var returnValue;

    // extract date (US notation)
    var aDate = dueDateValue.split("/");
    if (aDate.length == 3) {
        var dDate = new Date(aDate[2], aDate[0] - 1, aDate[1]);
        var dNow = new Date();
        dNow = new Date(dNow.getFullYear(), dNow.getMonth(), dNow.getDate());
        var dTomorrow = new Date(dNow.getFullYear(), dNow.getMonth(), dNow.getDate() + 14);
        // warn if date diff is ...
        if (dDate - dNow < 0) { // Overdue
            returnValue = "<span style=\"color: #f00;white-space: nowrap;font-weight: bold;\">" + dueDateValue + "</span>";
        } else if (dDate >= dNow && dDate <= dTomorrow) { // Due Tomorrow
            returnValue = "<span style=\"white-space: nowrap;font-weight: bold;\">" + dueDateValue + "</span>";
        } else { // Fine
            returnValue = "<span style=\"white-space: nowrap;\">" + dueDateValue + "</span>";
        };
    };
    return returnValue
}

function renderStatus(ctx) {
    var curritem = ctx.CurrentItem;
    var dueDateValue = ctx.CurrentItem['DueDate'];
    var statusValue = ctx.CurrentItem['Status'];
    var returnValue;

    // extract date (US notation)
    var aDate = dueDateValue.split("/");
    if (aDate.length == 3) {
        var dDate = new Date(aDate[2], aDate[0] - 1, aDate[1]);
        var dNow = new Date();
        dNow = new Date(dNow.getFullYear(), dNow.getMonth(), dNow.getDate());
        var dTomorrow = new Date(dNow.getFullYear(), dNow.getMonth(), dNow.getDate() + 14);
        // warn if date diff is ...
        if (dDate - dNow < 0) { // Overdue
            returnValue = "<span style=\"color: #f00;white-space: nowrap;font-weight: bold;\">" + statusValue + "</span>";
        } else if (dDate >= dNow && dDate <= dTomorrow) { // Due in a week
            returnValue = "<span style=\"white-space: nowrap;font-weight: bold;\">" + statusValue + "</span>";
        } else { // Fine
            returnValue = "<span style=\"white-space: nowrap;\">" + statusValue + "</span>";
        };
    };
    return returnValue
}




function renderTrafficLight(ctx) {
    var curritem = ctx.CurrentItem;
    var dueDateValue = ctx.CurrentItem['DueDate'];
    var trafficLightValue = ctx.CurrentItem['Traffic_x0020_Light'];
    var returnValue;

    // extract date (US notation)
    var aDate = dueDateValue.split("/");
    if (aDate.length == 3) {
        var dDate = new Date(aDate[2], aDate[0] - 1, aDate[1]);
        var dNow = new Date();
        dNow = new Date(dNow.getFullYear(), dNow.getMonth(), dNow.getDate());
        var dTomorrow = new Date(dNow.getFullYear(), dNow.getMonth(), dNow.getDate() + 14);
        // warn if date diff is ...
        if (dDate - dNow < 0) { // Overdue
            returnValue = "<DIV style='width: 16px; height: 16px; -webkit-border-radius: 12px;   -moz-border-radius: 12px; border-radius: 12px; margin-left: 40%; float: left; background: red;'></DIV>";
        } else if (dDate >= dNow && dDate <= dTomorrow) { // Due in a week
            returnValue = "<DIV style='width: 16px; height: 16px; -webkit-border-radius: 12px;   -moz-border-radius: 12px; border-radius: 12px; margin-left: 40%; float: left; background: #FFC300;'></DIV>";
        } else { // Fine
            returnValue = "<DIV style='width: 16px; height: 16px; -webkit-border-radius: 12px;   -moz-border-radius: 12px; border-radius: 12px; margin-left: 40%; float: left; background: green;'></DIV>";
        };
    };
    return returnValue
}



function renderStartDate(ctx) {
    var curritem = ctx.CurrentItem;
    var dueDateValue = ctx.CurrentItem['DueDate'];
    var startDateValue = ctx.CurrentItem['Start_x0020_Date'];
    var returnValue;

    // extract date (US notation)
    var aDate = dueDateValue.split("/");
    if (aDate.length == 3) {
        var dDate = new Date(aDate[2], aDate[0] - 1, aDate[1]);
        var dNow = new Date();
        dNow = new Date(dNow.getFullYear(), dNow.getMonth(), dNow.getDate());
        var dTomorrow = new Date(dNow.getFullYear(), dNow.getMonth(), dNow.getDate() + 14);
        // warn if date diff is ...
        if (dDate - dNow < 0) { // Overdue
            returnValue = "<span style=\"color: #f00;white-space: nowrap;font-weight: bold;\">" + startDateValue + "</span>";
        } else if (dDate >= dNow && dDate <= dTomorrow) { // Due Tomorrow
            returnValue = "<span style=\"white-space: nowrap;font-weight: bold;\">" + startDateValue + "</span>";
        } else { // Fine
            returnValue = "<span style=\"white-space: nowrap;\">" + startDateValue + "</span>";
        };
    };
    return returnValue
}

function renderPriority(ctx) {
    var curritem = ctx.CurrentItem;
    var dueDateValue = ctx.CurrentItem['DueDate'];
    var priorityValue = ctx.CurrentItem['Priority'];
    var returnValue;

    // extract date (US notation)
    var aDate = dueDateValue.split("/");
    if (aDate.length == 3) {
        var dDate = new Date(aDate[2], aDate[0] - 1, aDate[1]);
        var dNow = new Date();
        dNow = new Date(dNow.getFullYear(), dNow.getMonth(), dNow.getDate());
        var dTomorrow = new Date(dNow.getFullYear(), dNow.getMonth(), dNow.getDate() + 14);
        // warn if date diff is ...
        if (dDate - dNow < 0) { // Overdue
            returnValue = "<span style=\"color: #f00;white-space: nowrap;font-weight: bold;\">" + priorityValue + "</span>";
        } else if (dDate >= dNow && dDate <= dTomorrow) { // Due Tomorrow
            returnValue = "<span style=\"white-space: nowrap;font-weight: bold;\">" + priorityValue + "</span>";
        } else { // Fine
            returnValue = "<span style=\"white-space: nowrap;\">" + priorityValue + "</span>";
        };
    };
    return returnValue
}
1

Modify the renderTrafficLight method as below.

function renderTrafficLight(ctx) {
    var curritem = ctx.CurrentItem;
    var dueDateValue = ctx.CurrentItem['DueDate'];
    var trafficLightValue = ctx.CurrentItem['Traffic_x0020_Light'];
    var actualStartDate= ctx.CurrentItem['Actual_x0020_Start_x0020_Date'];
    var returnValue;
    if(actualStartDate!=""){
        // extract date (US notation)
        var aDate = dueDateValue.split("/");
        if (aDate.length == 3) {
            var dDate = new Date(aDate[2], aDate[0] - 1, aDate[1]);
            var dNow = new Date();
            dNow = new Date(dNow.getFullYear(), dNow.getMonth(), dNow.getDate());
            var dTomorrow = new Date(dNow.getFullYear(), dNow.getMonth(), dNow.getDate() + 14);
            // warn if date diff is ...
            if (dDate - dNow < 0) { // Overdue
                returnValue = "<DIV style='width: 16px; height: 16px; -webkit-border-radius: 12px;   -moz-border-radius: 12px; border-radius: 12px; margin-left: 40%; float: left; background: red;'></DIV>";
            } else if (dDate >= dNow && dDate <= dTomorrow) { // Due in a week
                returnValue = "<DIV style='width: 16px; height: 16px; -webkit-border-radius: 12px;   -moz-border-radius: 12px; border-radius: 12px; margin-left: 40%; float: left; background: #FFC300;'></DIV>";
            } else { // Fine
                returnValue = "<DIV style='width: 16px; height: 16px; -webkit-border-radius: 12px;   -moz-border-radius: 12px; border-radius: 12px; margin-left: 40%; float: left; background: green;'></DIV>";
            };
        };
    }else{
        returnValue = "<DIV style='width: 16px; height: 16px; -webkit-border-radius: 12px;   -moz-border-radius: 12px; border-radius: 12px; margin-left: 40%; float: left; background: blue;'></DIV>";
    }    
    return returnValue
}

enter image description here

|improve this answer|||||
  • You are my hero! Thank you, this worked perfectly!! <3 – Courtney Wilson Jul 25 '19 at 13:55

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.