How to change row's color based on status field

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?

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?

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.

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

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?

Hi Manfred,

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

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.

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.

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....

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

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

what about the rest checks?

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;
}
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍