Monday 10 June 2013

Color coading to sharepoint list column

Reference url:
http://www.sharepointkings.com/2009/04/sharepoint-calculated-column-and-jquery.html

I have five status shown below based on status selection we need to highlight the color to perticular column

Steps:
1)Create status field(Status)
2)we need color to perticuar status based on status selection .create one more column(status color) for displaying color

status color  =IF([Issue Status]="Awaiting SME Action","#4682B4",
IF([Issue Status]="Consultation Provided","#1E90FF",
IF([Issue Status]="Document review /Approval Provided","#2F4F4F",
IF([Issue Status]="Awaiting Seed Funding","#008080",
IF([Issue Status]="Recevied Seed funding","#33CC33",
IF([Issue Status]="No Impacted","#A0522D",
IF([Issue Status]="Closed Request","#FF9999",
IF([Issue Status]="Estimation provided","#008000"))))))))


3)Create one more column for displaying the div tag(replace the status color and status column names in DIV tag)


="<DIV style='border: 1px "&status color&" solid;background-color:"&Color&";color:#FFFFFF;'>"&Status&"<DIV>"

4)Add this below code in content editor webpart

<script src="/sites/testingsite/SiteAssets/jquery-1.9.0.min.js" type="text/javascript"></script><script type="text/javascript">

$(document).ready(function(){
$(".ms-vb2:contains('<DIV')").each(function(){
var tempDIV = document.createElement ("DIV");
tempDIV.style.cursor = "pointer";
tempDIV.innerHTML = $(this).text();
$(this).text("");
$(this).append(tempDIV);
});}); </script>

No comments:

Post a Comment