Hi
As most people probably know the option for conditional formatting is no longer available in SharePoint Designer 2013. I was looking at some JavaScript and JQuery examples and found this:
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js” type=”text/javascript”></script><script>
$(document).ready(function(){
$Text = $(“td .ms-vb2:contains(‘Bristol’)”).filter(function() {
return $(this).text() == “Bristol”;})
$Text.parent().css(“background-color”, “#00FF66”);
$Text = $(“td .ms-vb2:contains(‘Thames’)”);
$Text.parent().css(“background-color”, “#FFFF66”);
}); </script>
In this example and the examples I find, it seem to be checking the entire list for a value and not searching for the value in a particular column. Being very new to JavaScript or JQuery is there a way I can alter this to search on a particular column.
You can also use SharePoint List Booster to do conditional formatting on the lists and document libraries. You can also resize columns, manage font styles and colors – http://www.spbooster.com
?width=721
You can also mix in Javascript in a Calculated Column (as explained on http://viewmaster365.com/#/How)
Then you can easily add more Towns and color the whole Row:
=[Town]
&”<img src=””/_layouts/images/blank.gif”” onload=””{“
&”this.parentNode.parentNode.parentNode.style.backgroundColor=“
&”({‘Bristol’:’Yellow’,’Thames’:’Green’,’London’:’Pink’})[‘“
&[Town]
&”‘];“
&”}””>”
Be aware debugging Formulas is a real PITA in SharePoint;
CalcMaster
When you add one JS file to your SharePoint environment and have it called with a Bookmarklet (Button on you Browser Favourites bar) this GitHub code will attach itself to the textarea when editting a Formula and provide immediate feedback on errors.
I agree with Paul, CSR is the documented approach.
An (undocumented) alternative is to stuff the layout in a Calculated Column Formula which gets executed for every List Item in a View (and only in a View!)
In your case where you want to highlight a row based on a Text value, you can do without jQuery and no need to add JS files to your environment.
Beginners explanation of coloring a Row is at http://ViewMaster365.com/#/How
If you are sattisfied with only coloring the current Calculated Column then the Formula gets even simpler and only requires HTML+CSS:
=”<div style=’background-color:” & IF( [Town]=”Bristol” , “#00FF66″ , IF( [Town]=”Thames” , “#00FF66” , “none” )) & “;’>” & [Town] & “</div>”
The only thing to remember is set the Calculated Column Datatype to Number, as Text will display the HTML as text. (this trick goes back to 2010 and works in 2013/Online as well)
If you have more then 7 Towns you will run into the 7 levels maximum nesting in Formula. Then extract the needed color from a long string:
“Bristol00FF66ThamesFFFF66”
Find the Town in the string, and get the 6 characters after it…
“strings” can be a maximum of 255 characters in Formulas, but you can concatenate with: “string1” & “string2”. The total number of characters in a Formula is 4000
My favourite list of Formula Functions you can use: http://ViewMaster365.com/functions
It’s better to use CSR via JSLink to change the colors instead of doing DOM manipulation like that. This link has more information on that. Doing it with CSR allows you to hook into the OOTB way of rendering the columns instead of trying to override it after it’s rendered. If a future patch were to alter the rendering, your CSR would still be viable when the DOM manipulation method would require re-work.
