In
this article, we will know how to change the color of a column based upon the
values in the column. It is something like “Color Indicator” in SharePoint.
Scenario:
We
have a custom list used for Project Tracking. In the list, we have column named STATUS for tracking the project.
Whenever
an item in the list is updated with the status in the column, then the
background color of the status column should automatically change depending upon
the status. Hence it gives a better UI for tracking the status.
Solution:
Solution:
1.
Create a custom list named “Project Tracking System” with the columns such as
“Title”, “Description” and Status with the data type as shown below:
Columns
with the data types to be created:
2.
Now, we will insert 4-5 items in the list created.
In the
above list, we can see that the status column is updated, but it would be good
when we have background color of the each status separately. It is gives easy tracking to the users.
3. We
can achieve this through JAVA
SCRIPT
4. Add a Content Editor Web part below the list as shown below:
5.
Now in the content editor web part, add the below java script code (Open the
tool pane->Source Editor->Place the Java Script->Click Ok) and save
the page.
Add the below code in the script JavaScript tag
Add the below code in the script JavaScript tag
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| var colorCode = document.getElementsByTagName("td")// finding all the TD tags var i=0; for (i=0;i { if (colorCode[i].className=="ms-vb2") { if (colorCode[i].innerHTML=="Not Started")//finding the word to which the color has to be set { colorCode[i].style.backgroundColor='lightblue'; // setting the color depending upon the value colorCode[i].style.color='Black'; // setting the color of the words inside the content } if (colorCode[i].innerHTML=="Started") { colorCode[i].style.backgroundColor='Brown'; colorCode[i].style.color='Black'; } if (colorCode[i].innerHTML=="In Progress") { colorCode[i].style.backgroundColor='Orange'; colorCode[i].style.color='Black'; } if (colorCode[i].innerHTML=="Completed") { colorCode[i].style.backgroundColor='green'; colorCode[i].style.color='Black'; } if (colorCode[i].innerHTML=="Deffered") { colorCode[i].style.backgroundColor='Red'; colorCode[i].style.color='Black'; } } } |
6. Now, you can see the status column
background is changed depending upon the status inserted for each item as shown
below:
It gives good interface to the users
and also we can categorize the status easily.
Please free to comment and share the post, if it helps you!