2

I want to color a timeline with data of a specific column. This column is named Topic. So I wrote some code and added it to my SharePoint site but it didn't work. Here's the code I used:

var timeline = (function() {
    var colorCodes = {
        "Flyer / brochure": "#ff757a", //red
        "Decor / texture": "rgb(130, 202, 255)", //blue
        "Product": "rgb(150, 222, 186)", //green
        "Benchmark": "rgb(200, 216, 216)", //gray
        "Target groups / markets": "rgb(216, 216, 216)", //gray
        "Pricing": "rgb(216, 200, 216)", //gray
        "Logistic": "rgb(216, 216, 200)", //gray
    };
    var timer;

    return {
    "processTimeline" : function(customColorCodes){

    if(customColorCodes != null){
        colorCodes = customColorCodes;
        }

        if ($("div.ms-webpart-zone table.ms-listviewtable > tbody > tr").length)
            colorTimeline();
        else
            timer = setTimeout(colorTimeline, 1000);
        }
    }

    function colorTimeline() {
        if (timer != null) {
            clearTimeout(timer);
        }

        //$("div.ms-webpart-zone").each(function () {
        //$(".ms-webpart-chrome").each(function () {

        $.expr[':'].hasClassStartingWith = function(obj){
            return (/\bms-webpart-chrome/).test(obj.className);
        };

        $('div:hasClassStartingWith').each(function () {

            var webpart = $(this);
            var cnt = 0;
            var found = false;
            webpart.find("table.ms-listviewtable > thead > tr.ms-viewheadertr > th").each(function () {
                cnt++;
                if ($(this).children("div.ms-vh-div").attr('name') == 'Topic') {
                    found = true;
                    return false;
                }
            });

            if (!found)
                return;

            webpart.find("table.ms-listviewtable > tbody > tr > td:nth-child(" + cnt + ")").each(function () {
                var topic = ($(this).text());
                var title = ($(this).siblings("td.ms-vb-title").eq(0).text());
                var barTitle = webpart.find("span.ms-tl-barTitle").filter(function () { return $(this).text() == title });

                colorBar(barTitle.parent(), topic);
            });
        });
    }

    function colorBar(bar, topic) {
        bar.css("background-color", colorCodes[topic]);
    }
}());
2
  • Can you provide more details on how it did not work? Did you receive an error? If so, what error? Did nothing happen?
    – wjervis
    Commented Nov 4, 2014 at 12:59
  • I inserted the script with a Script Editor webpart and nothing happened (no errors). Commented Nov 4, 2014 at 13:00

1 Answer 1

0

There are couple of issue with your script. For example the colorCodes array object has an extra comma.

Below is a re-factored version of your code.

Add below code inside the Script Editor

$(document).ready(function() {
    ExecuteOrDelayUntilScriptLoaded(ColorCode, "sp.js");
});

function ColorCode() {
    var colorCodes = {
        "Flyer / brochure": "#ff757a", //red
        "Decor / texture": "rgb(130, 202, 255)", //blue
        "Product": "rgb(150, 222, 186)", //green
        "Benchmark": "rgb(200, 216, 216)", //gray
        "Target groups / markets": "rgb(216, 216, 216)", //gray
        "Pricing": "rgb(216, 200, 216)", //gray
        "Logistic": "rgb(216, 216, 200)" //gray
    };

    $('span.ms-tl-barTitle').each(function(){
        var color = colorCodes[$(this).text()];
        if(color != undefined && color != null)
            $(this).parent().css("background-color":color);
    });
}
4
  • I tried your code but it didn't work (without any error). The script which I have posted is currently used in our SharePoint farm and it works well. In the other script we ask for the task status and then we color the timeline of the tasks app. So I thought it might be possible to change the value from status to topic. Commented Nov 4, 2014 at 13:59
  • @MichaelMayr ok in that case your script has an error. Remove the last comma in colorCodes array and try Commented Nov 4, 2014 at 14:02
  • thanks for your help but it's also not working. So i have to check everything again and hope to find the error. Commented Nov 5, 2014 at 7:41
  • Did you try to debug your js code in browser console?
    – Raf
    Commented Jun 4, 2019 at 4:19

Your Answer

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

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