SharePoint List items with different color depending on approval status using JavaScript and Script Editor web part
Output will look like this
1. Create SharePoint List named “Review List”
2. Go to setting and rename title column as Name and create columns as shown in below table
| sr no | Column Name | Column Type | Description |
| 1 | Product Name | Single Line of text | Renamed Title column |
| 2 | Employee Name | Single Line of text | |
| 3 | Approval Status | Choice (menu to choose from) | Pending, Approved, Rejected (by default Pending) |
| 4 | Comment | Multiple lines of text | For comment |
3. Edit the list by using Gear icon on Top Right side
4. Click on Insert button on Top Left side then select Media and Content, then click on Script Editor and click Add button on right
5. Click on edit snippet
6. Paste below code and click insert and the stop editing the page
<style>
.foo {
float: left;
width: 20px;
height: 20px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
}
.Pending {
background: #EAC117;
}
.Approved{
background: #01DF3A;
}
.Rejected{
background: #F90101;
}
</style>
<div class="headerlinks">
<table>
<tr><td><div class="foo Pending"></div><td><td>- Pending <td>
<td><div class="foo Approved"></div><td><td>- Approved<td>
<td><div class="foo Rejected"></div><td><td>- Rejects<td></tr>
</table>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$Text = $("td.ms-cellstyle.ms-vb2:contains('Approved')");
$Text.parent().css("background-color", "#01DF3A");
$Text = $("td.ms-cellstyle.ms-vb2:contains('Rejected')");
$Text.parent().css("background-color", "#F90101");
$Text = $("td.ms-cellstyle.ms-vb2:contains('Pending')");
$Text.parent().css("background-color", "#EAC117");
});
</script>
7. Congratulations you done with programming