JavaScript for SharePoint Traffic Light Color

Question

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
}

Answer 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
}