How to change row's color based on status field

if you only rename list field it's internal name doesn't change.

Can you remove the field and create it once again with new name?

Hi,

I deleted the field, and created the new one named as Status. I don't know how to check whether it is internal name or not?

I've explained it above, URL shows internal name.

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.

but if you created new column with no space or other special characters internal name should fit to display name.

hi ,

I just tested the code by searching the link of Java code in, I copied it and pasted in in JS Link under Miscellaneous section. After that, the list can not be displayed anymore. What should I do to solve that?

if you really copy&pasted link as shown on the picture, then it's not correct!

the link points to display form of some item with ID 41, not to the js script that should perform client side rendering.

once again the procedure:

- copy the code from above post

- paste it to some plain text editor like notepad. save it somewhere to your local machine

- in the browser navigate to your site, then Site Content, then SiteAssets libray.  upload the file from local machine to the library

- once the file is uploaded, right-click on it and 'Copy shortcut'

- paste the link into JS Link of list view webpart

‌  list view webpart‌‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ color by status‌ ‌

Hi ,

Thanks for your help. The problems right now is that I can not access to the list anymore, the list's content can not display, so that I can not go to Edit Mode of the web part and change the JS Link.

follow this procedure How to fix a SharePoint page that a web part is causing to crash | CONCENTRA  to get to the web part maintenance page.

once in there select list view webpart and delete it.

after that, page should show but without list content. so go to edit page and add list view web part once again.

Hi,

I recovered the content of the list successfully. However, when I go to Site content, and clicked on The Project app (name of that list), it is not available.

And how can I move "Add new item " to the top of the list

what's the URL of 'Project app" in site content and what's the URL that works (recovered)?

The URL of Project apps  is https://teamspace.healthcare.siemens.com/content/90002095/Lists/The%20Project

And URL of Project list (recovered) https://teamspace.healthcare.siemens.com/content/90002095/Lists/The%20Project/AllItems.aspx

The interface of Project list (recovered) is also different from the original one.

try following

- go to working page (second link)

- open modify view page

- tick 'Mark this the default view' option (should be somewhere at top below view name)

if the option isn't there, then first try to make some other view default one and then repeat it once again for AllItems view

Hi,

I use a simpler "traffic light" system which involves a numerical status field in combination with a calculated list column. You determine what colour is indicated by the status integer and then define your calculated column to a simple DIV code function. The result looks like the below:

The Div code that is placed into the formula for the calculated column is below:

="<DIV style='font-weight:bold; font-size:48px; color:"&CHOOSE(([Status Index]),"Orange","Palegreen","Palegreen","Orange","Palegreen","Palegreen","Palegreen","Red","Forestgreen","Green","red","Darkgreen","Darkgreen")&";'>•</DIV>"

In this you can see the style is set to 48px, bold and I just use a dot. The key part is the CHOOSE function which utilises the Status Index (my numeric status field) and the order that you nominate the colours to display the relevant color next to the list row. That's it.

Cheers,

Mark

Further to this, I have also tested using some other characters to use for the traffic light. By holding down the Alt key and typing 254 you can get a solid square (■) which subsequently allows you to reduce the px size and the row spacing won't be so large.

Hi ‌, have you managed to get this working?

Hi Marian,

Thanks so much for your very nice support. It works already. Sorry for late update.

Thanks again

that's a great message

please mark a correct answer.