SharePoint List: Modify text color based on choice in list view

Question

List Item: Choice - Selection

I'd like to change the text color based on the selection. For Example.

Column Name Red (choice 1, red txt) Blue (Choice 2, blue txt) Yellow (choice 3, yellow txt)

Answer 1

You need to use (CSR) Client Side Rendering for more information about it, please go to below links :

• https://code.msdn.microsoft.com/office/Client-side-rendering-code-0a786cdd

• https://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views

Answer 2

Put this below code in content editor webpart or in JS file and connect it with JSLink property to your webpart.

Here it is using priority field. You can use your desired field.

Code:

(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
        "Status": { "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];
    var color = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];

    // Return html element with appropriate color based on priority value
    switch (priority) {
        case "Choice 1":
            return "<span style='color :#f00; background-color:#f00;'>" + priority + "</span>";
            break;
        case "Choice 2":
            return "<span style='color :#ff6a00; background-color:#f6a00;'>" + priority + "</span>";
            break;
        case "Choice 3":
            return "<span style='color :#cab023; background-color:#cab023;'>" + priority + "</span>";
    }
}