Recently I've been assigned to set up a few simple changes to SharePoint site.
Few initial conditions:
- it's sharepoint 2013
- it should be implemented with JS
- I have basic knowledge of JS and no experience with SharePoint whatsoever
I have a JS file linked with the view on my page.
When I test with with sth simple like alert('a')
, it works just fine.
However, when I try to manipulate sth that is within the view - for example highlight values in Priority column, I have no luck.
This is the code I use:
(function () {
// Create object that have the context information about the field that we want to change it's output render
var priorityFiledContext = {};
priorityFiledContext.Templates = {};
priorityFiledContext.Templates.Fields = {
// Apply the new rendering for Priority field on List View
"Priority": { "View": priorityFiledTemplate }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext);
})();
// This function provides the rendering logic for list view
function priorityFiledTemplate(ctx) {
var priority = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
// Return html element with appropriate color based on priority value
switch (priority) {
case "(1) High":
return "<span style='color :#f00'>" + priority + "</span>";
break;
case "(2) Normal":
return "<span style='color :#ff6a00'>" + priority + "</span>";
break;
case "(3) Low":
return "<span style='color :#cab023'>" + priority + "</span>";
}
}
And this is my view:
I've tried it both with MDS enabled and disabled. I've tried to anchor the code in script editor and as a part of html web part. I took this sample code actually from MS website where it works just fine: https://code.msdn.microsoft.com/office/Client-side-rendering-code-0a786cdd
Would appreciate some help, I've tried different properties settings when I uploaded the code to masterpages, I've tried putting it in other directories but nothing really works.
After digging for some time, it turns out that although Column name seem to be Priority, it was only a display name.
After checking the HTML source, it turned out that for some reason it's actual name is _x007a_it4.