Click here to Skip to main content
15,902,198 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi!
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:

JavaScript
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]);
    }
}());


So when i populate this code to my SharePoint site nothing happens.
We already use this script for coloring the timeline for the task status. Herefore the Task Name and the Task Status column have to be shown in the Sharepoint view.
Has anybody an idea where the error occurs or which part of the code has to be changed?
Thanks
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900