0

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

BadCell

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.

3
  • Post code of what you tried. As for learning, it is all DOM and JavaScript. Anything written by Andrei Markeev is a must read. Apr 28, 2016 at 18:15
  • Basically it is just a few changes from Amal 's suggestion. What I am running into is that the cells contain these words in addition to other information. Apr 28, 2016 at 19:04
  • Your jan_field_name = document.querySelector( will not work as CSR is executed before the DOM is build, so this call returns undefined. 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) Apr 28, 2016 at 19:15

1 Answer 1

1

Using CSR you can change the look and feel of List Views. Below is a sample I copied from https://code.msdn.microsoft.com/office/Client-side-rendering-code-0a786cdd/sourcecode?fileId=109730&pathId=1836828232

(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>"; 
    } 
} 

In this example the cell color of column Priority is changed. You can change this to your column. Then add logic on how the color will be decided. In the example the color is decided based on the value in the field.

For more CSR samples use - https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a

Javascript programming with SharePoint - http://www.amazon.in/Custom-SharePoint-Solutions-HTML-JavaScript/dp/1484205456

2
  • That sounds great, but I have one issue. The cells have other information in them than the flagging string. I don't know how to use a case with only part of the contents. Ideas? Apr 28, 2016 at 17:29
  • Use a simple if-else insteat of the switch statement. Of course, the field you are going to check should be a Choice Field.
    – Emaborsa
    Apr 29, 2016 at 9:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.