0

I would like to change the color and text size of a calculated column in a SharePoint 2013 not based on any condition.

Searching online I have only been able to to find ways of applying conditional formatting but don't have the experience to modify the JS to suit my needs.

I am using the JS Link method.

CSS seems not be an option because it will effect other lists on my page.

Any help would be much appreciated.

Updates:

Code I am using:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() { 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPostRender: function(ctx) {
            var rows = ctx.ListData.Row;
            for (var i = 0; i < rows.length; i++) {
                var status = rows[i]["Aplus"]; //Replace with your column name
                var rowId = GenerateIIDForListItem(ctx, rows[i]);
                var row = document.getElementById(rowId);

                //To Change the Background color of complete row  
                row.style.backgroundColor = "#FFFF00"; //Yellow Color - You can change the color according to your requirements.
            }
        }
    });
});

enter image description here

enter image description here

1
  • Hi Ganesh, I appreciate your help. Are there any changes I should make to correct the issue of formatting other tables?
    – Bob
    Sep 23, 2019 at 2:25

1 Answer 1

0

To achieve this type of functionality, you can use Client Side Rendering in SharePoint 2013.

You can use below code for the same:

SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() { 
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
        OnPostRender: function(ctx) {
            var rows = ctx.ListData.Row;
            for (var i = 0; i < rows.length; i++)
            {
                var status = rows[i]["YourColumnName"];     //Replace with your column name
                var rowId = GenerateIIDForListItem(ctx, rows[i]);
                var row = document.getElementById(rowId);

                //To Change the Background color of complete row        
                row.style.backgroundColor = "#FFFF00";  //Yellow Color - You can change the color according to your requirements.

                //To Change the Background color of Particular cell
                var cell = row.cells[9];    //Replace 9 with your columns cell number
                cell.style.backgroundColor = "#FFFF00";
            }
        }
    });
});

Check my answer given here to know how to set the JSLink property of your Web Part:
Color Coding List Item by Web Part based on value

7
  • Ganesh, thank you. Followed your instructions however the changes are not taking. When saving the .js file, should I save as a document or JavaScript Display Template? If saving as a JavaScript Display Template are there any specific properties I should set? Right now I have them set to: Target Control: View, Standalone: Override, Target Scope: / , and Target List Template ID : 100. I have tried both so far...
    – Bob
    Sep 19, 2019 at 4:37
  • First of all you need to create a JavaScript (.js) file, add above code in the file. Then upload this file in Site Assets library in your SharePoint site. And you need to reference this file to your list view web part properties (Check the last link provided in my answer to check how to reference this js file). Sep 19, 2019 at 5:06
  • It's now working but highlights the first row of every list on the page. Can I target just one list? Thanks for the help!
    – Bob
    Sep 19, 2019 at 5:15
  • Yes, you need to add this JS file to the only list on which you want to format the list column. No need to add this file to another web parts. Sep 19, 2019 at 5:19
  • Yes, I only added it to the list I wanted to format but it is changing all other lists on the page.
    – Bob
    Sep 19, 2019 at 5:22

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.