How to change row's color based on status field

Hi there!

This is more of a sharepoint question.

You might set a status with Nintex, but here is how you could colour code:

Color Code SharePoint List 

Hi,

Could you show me where I can input the code?, And I have 4 status, that means they need to have 4 colors. What code of colors?

The link I posted up above will walk you step by step through what you need to do.

Hi,

I saw your link, however, I don't know how to add the code to the list (Add a content edit web part in Allitems.aspx page and add the following code) and other binary string for other colors?

Ah, I see.

To add a Content Editor to a page,  you need to add a Web Part. a Content Editor is a type of web part.

For other HexCodes of colours, check here: http://htmlcolorcodes.com/ 

Hi

it don't work. I added Content Editor and went to Embed Code to past the code, and then change Yes/No to Handover/Preparation.

I'd say your problem is in expression:  rows["Handover"]

handover is a field value, whereas you should refer to field name ("Project status"?).

other note, this is CSR script, so it should be configured for List View Web Part.

I've never tried to invoke CSR scripts from within script editor web part, but I would say they are invoked too late to be applied correctly.

have a look on this working example CSR Row Highlighting - assistance needed  

Hi Marian,

Thanks for your instruction. I downloaded the js source code file, but I dont know where to store reside it in the sharepoint site. Could you instruct me more about that?

Thanks

you can save it in any library, that doesn't matter.

if you already have a library dedicated to scripts you can place it there, if not you can place it in some default one eg. SiteAssets

Hi Marian,

I downloaded the code from your link above. I placed it in Site Assets as your advice. However, I could not open it to review something as my specific case. Please show me how to do that?

See client side rendering examples at Office Client-side rendering (JS Link) code samples in JavaScript 

Hi Manfred,

Thanks for your instruction. Unfortunately, my problem is how to create .js file.

it seems to me that you clicked on script and let it execute, so the script errored out since it was not started in proper context.

I'd suggest that you first customize it to your needs, upload it to sharepoint, and then try to run list view page

Hi Marian,

My problem is that how to create .js file? I downloaded it from internet already, however, I could not open it to customize as my needs because that is that .js file.

You can edit js file with a text editor.

if you have downloaded the script (.js file) you already have one created, haven't you?
then  you can edit/update it  in any plain text editor, like notepad.

if you haven't any yet, similarly open notepad, type in script code and save it with .js extension.

if your local system is configured to execute js file on doubleclick, do not doubleclick it but rather select by purpose Edit option from right click menu.
just once you have customized it, upload it to sharepoint. if you need to edit/change it once again, proceed just the same way - edit your local copy and then upload it to sharepoint.

Hi all,

I edited the code as my needs, and then uploaded to Site Assets. In the List View web-part properties, I inputted JS Link file (~sitecollection/Site Assets/FormatRowColor.js) to JS link property under the Miscellaneous Tab. However, it still don't work. I even tried to put the whole URL https://teamspace.healthcare.siemens.com/content/90002095/SiteAssets/Forms/AllItems.aspx/FormatRowColor.js. The result is the same.

Could you show me what I did wrongly?

Thanks  

what is that 'Javascript' at the very beginning? if it is really in your script, it will definitelly cause error.

are you aware that this recent version of script highlights just status field and not whole row as you requeted above?

~sitecollection/Site Assets/FormatRowColor.js

format of this path should be correct. question, however, is whether you really saved the script into sitecollection's SiteAssets library or site's one.

https://teamspace.healthcare.siemens.com/content/90002095/SiteAssets/Forms/AllItems.aspx/FormatRowColor.js

this link is definitelly not correct, it refers to library page, not to file in library.

I believe it should be like

https://teamspace.healthcare.siemens.com/content/90002095/SiteAssets/FormatRowColor.js‍‍

I suggest to use first format of path.

to determine whether path is resolved correctly, once you are in list view open page source and search for your script name. check whether its path point to correct location.

btw, it's hard to follow any progress and provide sensefull hints if you switch to completely different script with different errors with every post....

Hi Marian,

I did as your instruction at the beginning. However it didn't work. So I tried to use other code. I just come back to use your code as below:

<script type="text/javascript">
SP.SOD.executeFunc("clienttemplates.js", "SPClientTemplates", function() {

   SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
     OnPostRender: function(ctx) {

       var statusColors =  {
          'Handover' : '#FF0000', 
          'Preparation' :  '#0000FF'

       };

       var rows = ctx.ListData.Row;
       for (var i=0;i<rows.length;i++)
       {
          var status = rows["Project Status"];
          var rowId = GenerateIIDForListItem(ctx, rows);
          var row = document.getElementById(rowId);
          row.style.backgroundColor = statusColors[status];
       }
     }
   });

});
</script>

And in the JS link, I entered the link

~sitecollection/Site Assets/FormatRowColor.js

So far, it didn't work. Could you help more

First of all, try to follow script exactly as is it this on provided link - there are no  <script> tags, SOD  wait is not needed as well.

next, make sure 'Project Status' is field's internal name and not just display name => go to list settings >> field properties and check carefully URL - somewhere at the end you should see field name. if it is anything else than 'Project%20Status' then use name from URL in your script.

next, as already suggested, while in list view open page source and search  for your script name  (without path). proof check that path resolved there fits with script path. to get script path, go to the library where you saved it and 'copy link location'

if above still doesn't help, proceed as follows

- press F12 in browser to open developer console. in the window that opens switch to console tab

- now in the browser/browser tab where you opened dev console from, open or refresh list view

- check all the errors reported in developer console. if you are not able to resolve them on your own post all of then here

Hi Marina,

Please see screenshot attached. That is an error happened. I could not fix it by myself. Pls support me to do that.

it's not an error, just a warning, you can ignore this one.

what about the rest checks?

Hi Marian

I checked others, its ok. Could you have a look at the code below. Is it right?

1. you have used wrong braces in OnPostRender definition

2. if you really named list field with a space in it, sharepoint converts its internal name to non-space identifier,  like Project_x0020_Status. but you have said above you have already checked this...

following was working for me

(function (){
    var overrideCtx = {};
    overrideCtx.Templates = {}, 

    overrideCtx.OnPostRender = [
        HighlightRowOverride
    ]
    
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx) ; 
})() ;


function HighlightRowOverride (inCtx) {
    // for each item (row) 
    for (var  i = 0; i < inCtx.ListData.Row.length; ++i){ 
        var listItem =inCtx.ListData.Row[i]; 
        var iid = GenerateIIDForListItem(inCtx,listItem);  
        var row = document.getElementById(iid); 
        
        if ( listItem.Project_x0020_Status == "Handover"){
          if (row != null)
              row.style.backgroundColor = "rgba(255,0,0,0.5)";
        } 
    }
    inCtx.skipNextAnimation =true;
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Hi Marina,

I already change the braces at you mentioned. Actually, I change "Project Status" field to "Status" to make it simple. And then I used the code :if ( listItem.Status== "Handover"). I check the properties of Status field, Screenshot is what I see