Color-Coding for Lists with jquery

Although there are many resources and examples in the internet about how to color-code SharePoint list items, here’s my approach.

Goal

Improve user experience by using different colors for different approval steps.
Rather than searching (and reading) for the approval status, different colors are used so that users are able to spot draft, pending, rejected and approved versions more easily.

Prerequisites

• jquery (I use jquery-1.5.1.min.js) stored on each SharePoint server in the layouts folder
• list or library with content approval enabled
• Approval status column part of the view

Approach

Create a text file with the following content and name it e.g. ColorCoding.txt:

<script type="text/javascript">
$header = '_ModerationStatus';
$colorGrey = "#DCE1EC";
$colorYellow = "#FDF289";
$colorRed = "#FF9696";
// ENGLISH
$(".ms-vb2:contains('Draft')").each(function(){
	var $this = $(this);
	
	if($this.closest('table').find('th').eq($this.index()).children().attr('Name') == $header){
		$(this).css("background-color", $colorGrey );
		$(this).siblings().css("background-color", $colorGrey );
	}		
});
$(".ms-vb2:contains('Pending')").each(function(){
	var $this = $(this);
	
	if($this.closest('table').find('th').eq($this.index()).children().attr('Name') == $header){
		$(this).css("background-color", $colorYellow );
		$(this).siblings().css("background-color", $colorYellow );
	}		
});
$(".ms-vb2:contains('Rejected')").each(function(){
	var $this = $(this);
	
	if($this.closest('table').find('th').eq($this.index()).children().attr('Name') == $header){
		$(this).css("background-color", $colorRed );
		$(this).siblings().css("background-color", $colorRed );
	}		
});
// GERMAN
$(".ms-vb2:contains('Entwurf')").each(function(){
	var $this = $(this);
	
	if($this.closest('table').find('th').eq($this.index()).children().attr('Name') == $header){
		$(this).css("background-color", $colorGrey );
		$(this).siblings().css("background-color", $colorGrey );
	}		
});
$(".ms-vb2:contains('Ausstehend')").each(function(){
	var $this = $(this);
	
	if($this.closest('table').find('th').eq($this.index()).children().attr('Name') == $header){
		$(this).css("background-color", $colorYellow );
		$(this).siblings().css("background-color", $colorYellow );
	}		
});
$(".ms-vb2:contains('Abgelehnt')").each(function(){
	var $this = $(this);
	
	if($this.closest('table').find('th').eq($this.index()).children().attr('Name') == $header){
		$(this).css("background-color", $colorRed );
		$(this).siblings().css("background-color", $colorRed );
	}		
});

The script queries all cells with the different approval status and sets the color using css accordingly to the cell itself and the entire row (siblings).

Copy the file to the Site Assets library on each site. This file will be used as content source in a Content Editor Web Part (CEWP) on the list’s view. It is required that the file is stored on the SharePoint site and not in the layouts folder. The CEWP cannot access files in the layouts folder.

I wrote a PowerShell script to automate this taks:

function UploadFile($Web, $DocLibName, $FilePath) 
{
    $List = $Web.GetFolder($DocLibName)
    $Files = $List.Files
    $FileName = $FilePath.Substring($FilePath.LastIndexOf("")+1)
    $File= Get-ChildItem $FilePath
    $Files.Add($DocLibName +"/" + $FileName,$File.OpenRead(),$true)
}
get-spsite -limit all | %{
    UploadFile $_.rootweb "SiteAssets" "\servershareColorCoding.txt"
    Write-Host "Document uploaded to $_.url"
}
Whenever I change the file, I run the script to provision the new code.
Then a new CEWP must be added to the view and the content source must be set to the script. Do not forget to change the Chrome Type to none.
I also wrote a PowerShell script to add this Web Part to all list that have content approval enabled:
function addWPtoPage( $Web, $ListName, $ViewUrl){    
    $WPTitle = "Color"
    $ListID = $web.Lists[$ListName].id
    $View = $web.Lists[$ListName].DefaultView
    $wpManager=$web.GetLimitedWebPartManager($ViewUrl,[System.Web.UI.WebControls.WebParts.PersonalizationScope]::Shared)
    $WP = $wpManager.WebParts | ?{$_.title -match $WPTitle}
If ($WP -ne $NULL){$wpManager.DeleteWebPart($WP)}
    $webpart = new-object Microsoft.SharePoint.WebPartPages.ContentEditorWebPart
    $webpart.ChromeType = [System.Web.UI.WebControls.WebParts.PartChromeType]::None;
    $webpart.Title = $WPTitle    #$webpart.ContentLink = "../SiteAssets/ColorCoding.txt";
    $webpart.ContentLink = $web.site.url + "/SiteAssets/ColorCoding.txt";
$wpManager.AddWebPart($webpart,"Main",5)
}
get-spsite -limit all | %{
    $_.allwebs | %{
        $_.lists | %{
if ($_.EnableModeration -eq $true -and $_.title -ne "Master Page Gallery")
            {
                write-host $_.RootFolder.ParentWeb.Url $_.title
                addWPtoPage $_.RootFolder.ParentWeb $_.RootFolder $_.DefaultView.Url
            }
        }
    }
}

The result is similar to this screenshot:

Summary

My first approach was to use conditional formating using SPD (SharePoint Designer), but this is very time consuming.

Now I have to possibility to color-code any list I want with always having the same color schema I deploy and manage centrally.

#sharepoint