I am a JavaScript and SharePoint novice.
I would like to change the cell color based on contents using Client Side Rendering and JavaScript. I have had good luck with changing rows with you fine folks, but can't find a reference sheet to manipulating lists in SharePoint.
Can anyone recommend a good JavaScript book to help me learn what I need for manipulating SharePoint? Or even a reference library (online or dead-tree) for problems like this one?
Updated Code Used:
(function () {
var jan_field_name = document.querySelector('[displayname = "January"]').getAttribute('name');
// 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 January field on List View
jan_field_name: { "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 "Implementation":
return "<span style='color :#C8E6C9'>" + priority + "</span>";
break;
case "Planning":
return "<span style='color :#ff6a00'>" + priority + "</span>";
break;
case "Critical":
return "<span style='color :#cab023'>" + priority + "</span>";
}
}
Update:
I realized after the comments I don't need to find any specific row or column. The reference string only occurs in the cells want shaded.
Screen Shot of an offending cell
The blue text is a mail reference and the white is the cell identifier. I used HTML to fake the coloring, but I want to automate the process for my users.
Ugh! Can't seem to attach the picture. Imagine three lines of text. The last line is what I am using as a reference string to render the cell. I just want to automate the process so my user's fill in that reference text and the cell turns a color.
FINAL CODE USED
function colorStatusCells() {
// Create object that have the context information about the field that we want to change it's output render
var janFieldContext = {};
janFieldContext.Templates = {};
janFieldContext.Templates.Fields = {"January_x0020_End_x0020_Status" : { "View": priorityFiledTemplate } };
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(janFieldContext);
// Repeat the process for other fields
var febFieldContext = {};
febFieldContext.Templates = {};
febFieldContext.Templates.Fields = {"Feb_x0020_Full_x0020_Review" : { "View": priorityFiledTemplate } };
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(febFieldContext);
var marFieldContext = {};
marFieldContext.Templates = {};
marFieldContext.Templates.Fields = {"Mar_x0020_End_x0020_Status" : { "View": priorityFiledTemplate } };
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(marFieldContext);
var aprFieldContext = {};
aprFieldContext.Templates = {};
aprFieldContext.Templates.Fields = {"Apr_x0020_End_x0020_Status" : { "View": priorityFiledTemplate } };
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(aprFieldContext);};
// 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 "Completed":
return "<div style='background-color: #4caf50; color: white; border: 0; margin: 0; padding: 0;'>" + priority + "</div>";
break;
case "On Track":
return "<div style='background-color: #ff9800; color: white; border: 0; margin: 0; padding: 0;'>" + priority + "</div>";
break;
case "Delay":
return "<div style='background-color: #ffeb3b; border: 0; margin: 0; padding: 0;'>" + priority + "</div>";
break;
case "Problem":
return "<div style='background-color: #F44336; color: white; border: 0; margin: 0; padding: 0;'>" + priority + "</div>";
break;
default:
return "<div style='background-color: #bdbdbd; border: 0; margin: 0; padding: 0;'>" + priority + "</div>";
}
}
RegisterModuleInit(SPClientTemplates.Utility.ReplaceUrlTokens('~site/SiteAssets/Scripts/ColorCell05.js'), colorStatusCells);
colorStatusCells();
With the exception of having to look up the field names, this code works. Thanks all.
jan_field_name = document.querySelector(
will not work as CSR is executed before the DOM is build, so this call returnsundefined
. Copy a screenshot of what you mean with cells contain these words in addition to other information.jan_field_name
inside the Field definition must match an existing internal fieldname (the name used to create the field)