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:
var timeline = (function() {
var colorCodes = {
"Flyer / brochure": "#ff757a",
"Decor / texture": "rgb(130, 202, 255)",
"Product": "rgb(150, 222, 186)",
"Benchmark": "rgb(200, 216, 216)",
"Target groups / markets": "rgb(216, 216, 216)",
"Pricing": "rgb(216, 200, 216)",
"Logistic": "rgb(216, 216, 200)"
};
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);
}
$.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