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.