Color coding gantt view bars based on status field

Question

I have created a Gantt View for a List in Sharepoint. The List has a field named Status based on which the Gantt bars' color need to be changed. By Default the gantt bar is in blue color. It should be something like

1. Complete- Green
2. Dropped-Red

Could anyone help me with this?

Thanks.

Answer 1

This can be achieved by using JS Link propery. You either specify the JS Link property for a field, view, or list view web part. Not all web parts have a JS Link property. You won’t be able to set it to an XsltListViewWebPart or any other web part that is not inherited from IListWebPart. The best approach, in my opinion, is setting the JS Link property of an SPView – this would work everywhere the view is being used.

Your JSLink file should have all logic regarding what color (or any customization) and on what conditions to assign. The following is an example, which changes cell's background based on the value of the field:

(function () {
    var FieldContext = {};
    FieldContext.Templates = {};
    FieldContext.Templates.Fields = {
        "CRiskRAG": {
            "View": RAGTemplate,
            'DisplayForm': null,
            'NewForm': null,
            'EditForm': null
        }
    };
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(FieldContext);
})();

function RAGTemplate(ctx) {
    var rag = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
    switch (rag) {
        case "Green":
            return "<div style='background-color :#40f607'>" + rag + "</div>";
            break;
        case "Amber":
            return "<div style='background-color :#f9af00'>" + rag + "</div>";
            break;
        case "Red":
            return "<div style='background-color :#f93030'>" + rag + "</div>";
    }
}

A while ago I wrote a post regarding customization of Gantt view. You can find it here. You might find some useful info there.

If you cannot do any coding, you can set JSLink property by powershell:

Field:

$web = Get-SPWeb http://site
$field = $web.Fields["Status"]
$field.JSLink = "/_layouts/15/Status.js"
$field.Update($true)

Or view:

$web = Get-SPWeb http://site
$list = $web.Lists["Tasks"]
$view = $list.Views["Gantt View"]
$view.JSLink = "/_layouts/15/Status.js"
$view.Update()

Answer 2

you would have to inject your own custom javascript directly into the page, for instance using a Script Editor Webpart. Unfortunately it is not possible to use JSlink on a Gannt View.