none
Adding highlight colors to rows in a list view (non-Designer) RRS feed

  • Question

  • So I've got a list of servers in various environments, and the boss wants color-coding for the different categories, just like in the Excel workbook he made:

    As always, our primary limitation is that we can't use SharePoint Designer. The ONLY thing we're allowed is a Content Editor Webpart with some sort of JavaScript code to apply the highlighting color row-by-row. (And I'm not a coder.)

    Has anyone seen a solution for this?

    Tuesday, July 29, 2014 6:26 PM

Answers

  • I have a solution that should work in your case, using JavaScript CSS selectors to find values and apply styles, and using the JavaScript client object model to save and retrieve conditional formatting rules.

    1. Create a text file, paste in the code below, and save the file to a library on the SharePoint site where visitors will have access to read it (but not edit it).
    2. Edit the page where you want to add the conditional formatting and add a content editor web part.
    3. Set the "Content Link" property of the web part to be the path to the uploaded text file.

    The code will run to create a "Conditional Formatting" list on which you can create formatting rules, and it will then give you an interface for adding, editing, and removing rules. For example, here's the interface after adding a pair of rules for highlighting all overdue items in a list (where the status is not complete and the due date is past):

    The rules will apply to any list view web parts on the same page as the content editor web part. You can re-use that text file elsewhere in the site on any page where you want conditional formatting to be applied; the rules only apply to the page on which they were added.

    The interface is security trimmed so only people who have access to edit the Conditional Formatting list will be able to add/edit rules, so to lock it down, just lock down the Conditional Formatting list so people can only read it.

    Here's the code! (Tip: to copy the code, start highlighting outside the code block.)

    <div id="_conditional_formatting_link" style="display:none;"> <div unselectable="on" style="display:inline-block;user-select:none;cursor:pointer;padding: 3px;background-color:#9b9b9b;color:white;border:1px solid #888;" onclick="javascript:var rules = document.getElementById('_conditional_formatting');if(rules.style.display == 'none'){rules.style.display = 'inherit'}else{rules.style.display = 'none'}"> Conditional Formatting </div></div><div id="_conditional_formatting" style="display:none;background-color:#dfdfdf;border: 1px solid black;width:95%;max-width:1100px;"> <a style="border:0px;padding:5px;float:right;" title="Reapply Formatting" href="javascript:getConditions(false);"> <img style="border:0px;" src="/_layouts/images/staticrefresh.gif"/> </a><ol id="_conditional_formatting_rules"></ol><div style="text-align:right;"> <div id="_add_conditional_formatting_rule" unselectable="on" onclick="javascript: Add_Conditional_Formatting();" style="user-select:none;cursor:pointer;padding: 3px;margin: 3px;display:inline-block;background-color:#9b9b9b;border:1px solid #888;color:white;">Add Rule</div></div></div><script>function target(){var column;var comparison;var value;var style;var scope;var type;var id;var offset} /* structure for storing formatting rules */ var conditionalFormattingList = "Conditional Formatting";function getConditions(reloadRules){/* if reloadRules, query the conditions list and get all the rules. Otherwise just reapply the ones in memory to the current document. */ if(typeof(reloadRules) == "undefined"){reloadRules = true} if(reloadRules){while(document.getElementById("_conditional_formatting_rules").children.length > 0){/* Clear out the currently displayed list of rules. */ document.getElementById("_conditional_formatting_rules").removeChild(document.getElementById("_conditional_formatting_rules").children[0])}this.clientContext = new SP.ClientContext();var list = clientContext.get_web().get_lists().getByTitle(conditionalFormattingList);var camlQuery = new SP.CamlQuery();var folder = list.get_rootFolder();camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'URL\' /><Value Type=\'Text\'>'+document.location.pathname+'</Value></Eq></Where><OrderBy><FieldRef Name=\'Priority\' /><FieldRef Name=\'Name\' /></OrderBy></Query></View>');this.items = list.getItems(camlQuery);clientContext.load(list, 'EffectiveBasePermissions');clientContext.load(items);clientContext.load(folder)} this.clientContext.executeQueryAsync( Function.createDelegate(this, function(){/*Get the current user name from the drop-down box*/ var Me = document.querySelector("#RibbonContainer-TabRowRight span[title='Open Menu'] [accesskey='W'] span").innerHTML;if(reloadRules){var baseFormUrl = folder.get_serverRelativeUrl() + "/EditForm.aspx?ID=";/* Figure out if the current user has access to create or edit items on the Conditional Formatting list */ var perms = list.get_effectiveBasePermissions();this.hasEdit = perms.has(SP.PermissionKind.editListItems);this.hasCreate = perms.has(SP.PermissionKind.addListItems);/* Fill an array with our formatting rules */ this.targets = [];var itemEnumerator = this.items.getEnumerator();while(itemEnumerator.moveNext()){var item = itemEnumerator.get_current();var targ = new target();targ.column = item.get_item("Column");targ.comparison = item.get_item("Comparison");targ.style = item.get_item("Style");targ.scope = item.get_item("Scope");targ.type = item.get_item("Type");targ.value = item.get_item("Value");if(targ.value == null){targ.value = ""} targ.id = item.get_item("ID");targ.offset = item.get_item("Offset");targets.push(targ)}} if(!this.hasCreate){document.getElementById("_add_conditional_formatting_rule").style.display = "none"} for(var targetIterator = 0;targetIterator < targets.length;targetIterator++){if(reloadRules){var rulelist = document.getElementById("_conditional_formatting_rules");var ruletoadd = document.createElement("li");var comparisondisplay = targets[targetIterator].type.indexOf("Field") != -1 ? "value of the <b>" + targets[targetIterator].value + "</b> column" : "<b>'"+targets[targetIterator].value+"'</b>";if(targets[targetIterator].type == "Special" || targets[targetIterator].type == "Number"){if(targets[targetIterator].value.toString().toLowerCase() == "[me]"){comparisondisplay = "<b>[Me]("+Me+")</b>"} else{comparisondisplay = "<b>"+targets[targetIterator].value+"</b>"}} if(targets[targetIterator].value == ""){comparisondisplay = "<b>(blank)</b>"} if(targets[targetIterator].offset != null){comparisondisplay += "<b>"+(targets[targetIterator].offset < 0 ? " " : " +" )+targets[targetIterator].offset+"</b>"} var editLink = this.hasEdit ? "<div style='display:inline-block;cursor:pointer;' onclick='SP.UI.ModalDialog.commonModalDialogOpen("+'"'+ baseFormUrl + targets[targetIterator].id +'&Source='+document.location.pathname+'"' +",{},refreshPageConditions);'>" + "<img src='/_layouts/images/EDITITEM.GIF' style='vertical-align:middle;' title='Customize' alt='Customize'/>"+"&nbsp;</div>" : "";ruletoadd.innerHTML = editLink + "When <b>"+ targets[targetIterator].column + "</b> " + targets[targetIterator].comparison + " " + comparisondisplay + ", apply {" + (targets[targetIterator].style == null ? "remove all formatting" : "<span style='"+targets[targetIterator].style+"'>"+targets[targetIterator].style+"</span>") + "} to the <b>" + targets[targetIterator].scope + "</b>" + ((targets[targetIterator].scope != "Cell" && targets[targetIterator].scope != "Row") ? " column" : "");rulelist.appendChild(ruletoadd)} var tables = document.querySelectorAll("table.ms-listviewtable");/* Should get all the list view web parts on the page. */ var t_i = 0;while(t_i < tables.length){var columnIndex = null;/* Index of the column to compare against */ var valueIndex = null;/* Index of a second column from which to pull the value to compare */ var styleTargetIndex = null;/* Index of a column to apply formatting to */ var thisTable = tables[t_i];var headings = thisTable.rows[0].cells;var h_i = 0;while(h_i < headings.length){/* Check all the column headings... */ var thisHeading = headings[h_i].querySelector("div:first-child");if(thisHeading!=null){/* In Internet Explorer, the headings have a DisplayName attribute you can grab. If that's not there, just grab the innerText or textContent */ var dispname = thisHeading.DisplayName ? thisHeading.DisplayName : (thisHeading.innerText ? thisHeading.innerText : thisHeading.textContent);dispname = dispname.replace(/^\s+|\s+$/g,'');/* removes leading and trailing whitespace */ if(targets[targetIterator].scope != "Cell" && targets[targetIterator].scope != "Row"){/*If the scope isn't Cell or Row, see if this is the cell to which the formatting should applied */ if(dispname == targets[targetIterator].scope){styleTargetIndex = h_i}} if(targets[targetIterator].type.indexOf("Field") != -1){/*If the value type is a Field, check to see if this is the field whose value we care about */ if(dispname == targets[targetIterator].value.toString()){valueIndex = h_i}} if(dispname == targets[targetIterator].column){columnIndex = h_i}} h_i +=1} if(columnIndex != null){/* If we found a matching heading, let's try to apply the rules... */ var rows = thisTable.rows;for(var i = (rows.length > 0 ? 1 : 0);i < rows.length;i++){var cells = rows[i].children;if(cells.length <= columnIndex){continue} var innerLink = cells[columnIndex].querySelector("a");/* I want to specifically target links so that we can change their text color if necessary */ /* Populate valueToEval with the text value of the current cell, or its inner link if it has one */ var valueToEval = cells[columnIndex].innerText ? (innerLink != null ? innerLink.innerText : cells[columnIndex].innerText) : (innerLink != null ? innerLink.textContent : cells[columnIndex].textContent);if(typeof(valueToEval) == "undefined"){valueToEval = ""} /* Treat empties as blanks */ var listValueToCompareAgainst = null;if(valueIndex != null){/* valueIndex only has a value if we need to grab the comparison value from another column on the list */ valueLink = cells[valueIndex].querySelector("a");listValueToCompareAgainst = cells[valueIndex].innerText ? (valueLink != null ? valueLink.innerText : cells[valueIndex].innerText) : (valueLink != null ? valueLink.textContent : cells[valueIndex].textContent) } var needsStyling = false;switch(targets[targetIterator].type){case "Number": if( !isNaN(Number(valueToEval)) ){valueToEval = Number(valueToEval)} if(!isNaN(Number(targets[targetIterator].value))){targets[targetIterator].value = Number(targets[targetIterator].value)} break;case "Date": valueToEval = new Date(valueToEval);targets[targetIterator].value = new Date(targets[targetIterator].value);if(targets[targetIterator].offset != null){targets[targetIterator].value.setDate(targets[targetIterator].value.getDate() + Number(targets[targetIterator].offset))} break;case "Text": /* Already covered, bro */ break;case "Date Field": valueToEval = new Date(valueToEval);targets[targetIterator].value = new Date(listValueToCompareAgainst);if(targets[targetIterator].offset != null){targets[targetIterator].value.setDate(targets[targetIterator].value.getDate() + Number(targets[targetIterator].offset))} break;case "Text Field": targets[targetIterator].value = listValueToCompareAgainst;break;case "Number Field": if(!isNaN(Number(listValueToCompareAgainst))){targets[targetIterator].value = listValueToCompareAgainst;if(targets[targetIterator].offset != null){targets[targetIterator].value += Number(targets[targetIterator].offset)}} if( !isNaN(Number(valueToEval)) ){valueToEval = Number(valueToEval)} break;case "Special": if(targets[targetIterator].value.toLowerCase){if(targets[targetIterator].value.toLowerCase() == "[me]"){targets[targetIterator].value = Me} else if(targets[targetIterator].value.toLowerCase().indexOf("[today]") != -1){var dateDifference = Number(targets[targetIterator].value.toLowerCase().replace("[today]","").replace(" ","").replace("+",""));targets[targetIterator].value = new Date();if(!isNaN(dateDifference)){targets[targetIterator].value.setDate(targets[targetIterator].value.getDate() + dateDifference)} if(targets[targetIterator].offset != null){targets[targetIterator].value.setDate(targets[targetIterator].value.getDate() + Number(targets[targetIterator].offset))} valueToEval = new Date(valueToEval)}}else{valueToEval = new Date(valueToEval)} break} switch(targets[targetIterator].comparison){case "Greater Than or Equal To": needsStyling = (valueToEval >= targets[targetIterator].value);break;case "Greater Than": needsStyling = (valueToEval > targets[targetIterator].value);break;case "Less Than or Equal To": needsStyling = (valueToEval <= targets[targetIterator].value);break;case "Less Than": needsStyling = (valueToEval < targets[targetIterator].value);break;case "Equal To": needsStyling = (valueToEval == targets[targetIterator].value);break;case "Not Equal To": needsStyling = (valueToEval != targets[targetIterator].value);break;case "Contains": needsStyling = ( valueToEval.indexOf(targets[targetIterator].value) != -1 );break;case "Does Not Contain": needsStyling = (valueToEval.indexOf(targets[targetIterator].value) == -1);break} if(needsStyling ){var links;if(targets[targetIterator].scope != "Row"){var targetIndex = (styleTargetIndex != null) ? styleTargetIndex : columnIndex;cells[targetIndex].setAttribute("style",targets[targetIterator].style);links = cells[targetIndex].querySelectorAll("a")}else{rows[i].setAttribute("style",targets[targetIterator].style);for(var j = 0;j < cells.length;j++){cells[j].setAttribute("style",targets[targetIterator].style)} links = rows[i].querySelectorAll("a")} for(var j = 0;j < links.length;j++){if(links[j].title != "Open Menu"){links[j].setAttribute("style",targets[targetIterator].style);links[j].style.backgroundColor = ""} links[j].style.border = "0px"}}}} t_i+=1}} document.getElementById("_conditional_formatting_link").style.display = "inline-block"} ), Function.createDelegate(this, function(sender, args){/* There was an error accessing the list. Time to create it! */ var lci = new SP.ListCreationInformation();lci.set_title(conditionalFormattingList);lci.set_templateType(SP.ListTemplateType.genericList);var condition_list = clientContext.get_web().get_lists().add(lci);clientContext.load(condition_list);/* Drop the Title field */ var colTitle = condition_list.get_fields().getByTitle("Title");colTitle.set_required(false);colTitle.set_hidden(true);colTitle.update();condition_list.update();/* Add New Fields */ var colColumn = condition_list.get_fields().addFieldAsXml('<Field Description=\'The column to compare (must be visible on the page)\' DisplayName=\'Column\' Type=\'Text\'/>',true,SP.AddFieldOptions.defaultValue);var colComparison = condition_list.get_fields().addFieldAsXml('<Field Description=\'\' Type=\'Choice\' DisplayName=\'Comparison\' Format=\'Dropdown\' FillInChoice=\'FALSE\'><Default>Equal To</Default><CHOICES><CHOICE>Greater Than</CHOICE><CHOICE>Greater Than or Equal To</CHOICE><CHOICE>Equal To</CHOICE><CHOICE>Less Than or Equal To</CHOICE><CHOICE>Less Than</CHOICE><CHOICE>Not Equal To</CHOICE><CHOICE>Contains</CHOICE><CHOICE>Does Not Contain</CHOICE></CHOICES></Field>',true,SP.AddFieldOptions.defaultValue);var colValue = condition_list.get_fields().addFieldAsXml('<Field Description=\'The value or the name of a column to compare against\' DisplayName=\'Value\' Type=\'Text\'/>',true,SP.AddFieldOptions.defaultValue);var colType= condition_list.get_fields().addFieldAsXml('<Field Description=\'Indicate the type of value you are comparing against. Choose Special if using the [Me] or [Today] placeholders.\' Type=\'Choice\' DisplayName=\'Type\' Format=\'Dropdown\' FillInChoice=\'FALSE\'><Default>Text</Default><CHOICES><CHOICE>Date</CHOICE><CHOICE>Number</CHOICE><CHOICE>Text</CHOICE><CHOICE>Date Field</CHOICE><CHOICE>Number Field</CHOICE><CHOICE>Text Field</CHOICE><CHOICE>Special</CHOICE></CHOICES></Field>');var colOffset = condition_list.get_fields().addFieldAsXml('<Field Description=\'Optionally specify a number to offset the value by when comparing against a number or date.\' DisplayName=\'Offset\' Type=\'Number\' />',true,SP.AddFieldOptions.defaultValue);var colStyle = condition_list.get_fields().addFieldAsXml('<Field NumLines=\'4\' Description=\'The CSS to apply to when the condition is met. Leave blank to remove formatting. Example syntax: background-color:darkred;color:white;font-weight:bold;\' DisplayName=\'Style\' Type=\'Note\' />',true,SP.AddFieldOptions.defaultValue);var colScope = condition_list.get_fields().addFieldAsXml('<Field Description=\'The scope to which the style should be applied. Choose Row, Cell, or specify a column name.\' Type=\'Choice\' DisplayName=\'Scope\' Format=\'Dropdown\' FillInChoice=\'TRUE\'><Default>Cell</Default><CHOICES><CHOICE>Cell</CHOICE><CHOICE>Row</CHOICE></CHOICES></Field>',true,SP.AddFieldOptions.defaultValue);var colPriority = condition_list.get_fields().addFieldAsXml('<Field Description=\'Priority determines which styles are applied in case of overlapping conditions. Higher numbers are applied later.\' DisplayName=\'Priority\' Type=\'Number\' />',true,SP.AddFieldOptions.defaultValue);var colUrl = condition_list.get_fields().addFieldAsXml('<Field Description=\'Page where this rule should be applied\' DisplayName=\'URL\' Type=\'Text\'/>',true,SP.AddFieldOptions.defaultValue);clientContext.executeQueryAsync( Function.createDelegate(this, function(){getConditions()}), Function.createDelegate(this, function(sender, args){document.getElementById("_conditional_formatting").innerHTML = ("An error occcurred while trying to apply conditional formatting to the list for you. Error details: "+args.get_message() + " " + args.get_stackTrace());document.getElementById("_conditional_formatting_link").style.display = "inline-block"}))} ))}/* This method is called when the Add Rule button is clicked. */function Add_Conditional_Formatting(){/* Create a new item with only the URL and Priority fields filled out */ var currUrl = document.location.pathname;var clientContext = new SP.ClientContext();var itemCreateInfo = new SP.ListItemCreationInformation();var newItem = clientContext.get_web().get_lists().getByTitle(conditionalFormattingList).addItem(itemCreateInfo);newItem.set_item('URL',currUrl);/* Give the new item a priority that will put it at the end of the list. This is kind of a hack since the highest priority is not necessarily the rulecount. */ newItem.set_item('Priority',document.getElementById("_conditional_formatting_rules").children.length+1);newItem.update();clientContext.load(newItem);clientContext.executeQueryAsync(Function.createDelegate(this,function(){getConditions();/* Reload to refresh the rules list after adding the item */}),Function.createDelegate(this,function(sender, args){alert(args.get_message())}))}/* This method is called when the Edit Item dialog box is closed. It refreshes the page it the item was saved. */function refreshPageConditions(result){if(result != SP.UI.DialogResult.cancel){window.location.replace(document.location.href)}} ExecuteOrDelayUntilScriptLoaded(function(){getConditions();/* If there are any collapsible sections on the page, keep checking to see whether formatting needs to be reapplied */ this.TableRowCount = 0;if(document.querySelector("img[alt='expand']") != null){setInterval(function(){var tempTableRowCount = document.querySelectorAll("tr").length;if( tempTableRowCount != this.TableRowCount){/* Only reapply formatting if the count of table rows is different than it was previously */ this.TableRowCount = tempTableRowCount;getConditions(false) /* Passing false reapplies loaded rules without re-querying the SharePoint list */}},1000)}},"SP.JS");</script>


    Tuesday, July 29, 2014 7:44 PM

All replies

  • jQuery is your friend. This is article for SharePoint 2013 http://davecoleman146.com/2013/07/08/colour-coding-a-sharepoint-2013-list-with-jquery/ but it will work for SharePoint 2010 too.

    Oleg

    Tuesday, July 29, 2014 6:42 PM
  • I have a solution that should work in your case, using JavaScript CSS selectors to find values and apply styles, and using the JavaScript client object model to save and retrieve conditional formatting rules.

    1. Create a text file, paste in the code below, and save the file to a library on the SharePoint site where visitors will have access to read it (but not edit it).
    2. Edit the page where you want to add the conditional formatting and add a content editor web part.
    3. Set the "Content Link" property of the web part to be the path to the uploaded text file.

    The code will run to create a "Conditional Formatting" list on which you can create formatting rules, and it will then give you an interface for adding, editing, and removing rules. For example, here's the interface after adding a pair of rules for highlighting all overdue items in a list (where the status is not complete and the due date is past):

    The rules will apply to any list view web parts on the same page as the content editor web part. You can re-use that text file elsewhere in the site on any page where you want conditional formatting to be applied; the rules only apply to the page on which they were added.

    The interface is security trimmed so only people who have access to edit the Conditional Formatting list will be able to add/edit rules, so to lock it down, just lock down the Conditional Formatting list so people can only read it.

    Here's the code! (Tip: to copy the code, start highlighting outside the code block.)

    <div id="_conditional_formatting_link" style="display:none;"> <div unselectable="on" style="display:inline-block;user-select:none;cursor:pointer;padding: 3px;background-color:#9b9b9b;color:white;border:1px solid #888;" onclick="javascript:var rules = document.getElementById('_conditional_formatting');if(rules.style.display == 'none'){rules.style.display = 'inherit'}else{rules.style.display = 'none'}"> Conditional Formatting </div></div><div id="_conditional_formatting" style="display:none;background-color:#dfdfdf;border: 1px solid black;width:95%;max-width:1100px;"> <a style="border:0px;padding:5px;float:right;" title="Reapply Formatting" href="javascript:getConditions(false);"> <img style="border:0px;" src="/_layouts/images/staticrefresh.gif"/> </a><ol id="_conditional_formatting_rules"></ol><div style="text-align:right;"> <div id="_add_conditional_formatting_rule" unselectable="on" onclick="javascript: Add_Conditional_Formatting();" style="user-select:none;cursor:pointer;padding: 3px;margin: 3px;display:inline-block;background-color:#9b9b9b;border:1px solid #888;color:white;">Add Rule</div></div></div><script>function target(){var column;var comparison;var value;var style;var scope;var type;var id;var offset} /* structure for storing formatting rules */ var conditionalFormattingList = "Conditional Formatting";function getConditions(reloadRules){/* if reloadRules, query the conditions list and get all the rules. Otherwise just reapply the ones in memory to the current document. */ if(typeof(reloadRules) == "undefined"){reloadRules = true} if(reloadRules){while(document.getElementById("_conditional_formatting_rules").children.length > 0){/* Clear out the currently displayed list of rules. */ document.getElementById("_conditional_formatting_rules").removeChild(document.getElementById("_conditional_formatting_rules").children[0])}this.clientContext = new SP.ClientContext();var list = clientContext.get_web().get_lists().getByTitle(conditionalFormattingList);var camlQuery = new SP.CamlQuery();var folder = list.get_rootFolder();camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'URL\' /><Value Type=\'Text\'>'+document.location.pathname+'</Value></Eq></Where><OrderBy><FieldRef Name=\'Priority\' /><FieldRef Name=\'Name\' /></OrderBy></Query></View>');this.items = list.getItems(camlQuery);clientContext.load(list, 'EffectiveBasePermissions');clientContext.load(items);clientContext.load(folder)} this.clientContext.executeQueryAsync( Function.createDelegate(this, function(){/*Get the current user name from the drop-down box*/ var Me = document.querySelector("#RibbonContainer-TabRowRight span[title='Open Menu'] [accesskey='W'] span").innerHTML;if(reloadRules){var baseFormUrl = folder.get_serverRelativeUrl() + "/EditForm.aspx?ID=";/* Figure out if the current user has access to create or edit items on the Conditional Formatting list */ var perms = list.get_effectiveBasePermissions();this.hasEdit = perms.has(SP.PermissionKind.editListItems);this.hasCreate = perms.has(SP.PermissionKind.addListItems);/* Fill an array with our formatting rules */ this.targets = [];var itemEnumerator = this.items.getEnumerator();while(itemEnumerator.moveNext()){var item = itemEnumerator.get_current();var targ = new target();targ.column = item.get_item("Column");targ.comparison = item.get_item("Comparison");targ.style = item.get_item("Style");targ.scope = item.get_item("Scope");targ.type = item.get_item("Type");targ.value = item.get_item("Value");if(targ.value == null){targ.value = ""} targ.id = item.get_item("ID");targ.offset = item.get_item("Offset");targets.push(targ)}} if(!this.hasCreate){document.getElementById("_add_conditional_formatting_rule").style.display = "none"} for(var targetIterator = 0;targetIterator < targets.length;targetIterator++){if(reloadRules){var rulelist = document.getElementById("_conditional_formatting_rules");var ruletoadd = document.createElement("li");var comparisondisplay = targets[targetIterator].type.indexOf("Field") != -1 ? "value of the <b>" + targets[targetIterator].value + "</b> column" : "<b>'"+targets[targetIterator].value+"'</b>";if(targets[targetIterator].type == "Special" || targets[targetIterator].type == "Number"){if(targets[targetIterator].value.toString().toLowerCase() == "[me]"){comparisondisplay = "<b>[Me]("+Me+")</b>"} else{comparisondisplay = "<b>"+targets[targetIterator].value+"</b>"}} if(targets[targetIterator].value == ""){comparisondisplay = "<b>(blank)</b>"} if(targets[targetIterator].offset != null){comparisondisplay += "<b>"+(targets[targetIterator].offset < 0 ? " " : " +" )+targets[targetIterator].offset+"</b>"} var editLink = this.hasEdit ? "<div style='display:inline-block;cursor:pointer;' onclick='SP.UI.ModalDialog.commonModalDialogOpen("+'"'+ baseFormUrl + targets[targetIterator].id +'&Source='+document.location.pathname+'"' +",{},refreshPageConditions);'>" + "<img src='/_layouts/images/EDITITEM.GIF' style='vertical-align:middle;' title='Customize' alt='Customize'/>"+"&nbsp;</div>" : "";ruletoadd.innerHTML = editLink + "When <b>"+ targets[targetIterator].column + "</b> " + targets[targetIterator].comparison + " " + comparisondisplay + ", apply {" + (targets[targetIterator].style == null ? "remove all formatting" : "<span style='"+targets[targetIterator].style+"'>"+targets[targetIterator].style+"</span>") + "} to the <b>" + targets[targetIterator].scope + "</b>" + ((targets[targetIterator].scope != "Cell" && targets[targetIterator].scope != "Row") ? " column" : "");rulelist.appendChild(ruletoadd)} var tables = document.querySelectorAll("table.ms-listviewtable");/* Should get all the list view web parts on the page. */ var t_i = 0;while(t_i < tables.length){var columnIndex = null;/* Index of the column to compare against */ var valueIndex = null;/* Index of a second column from which to pull the value to compare */ var styleTargetIndex = null;/* Index of a column to apply formatting to */ var thisTable = tables[t_i];var headings = thisTable.rows[0].cells;var h_i = 0;while(h_i < headings.length){/* Check all the column headings... */ var thisHeading = headings[h_i].querySelector("div:first-child");if(thisHeading!=null){/* In Internet Explorer, the headings have a DisplayName attribute you can grab. If that's not there, just grab the innerText or textContent */ var dispname = thisHeading.DisplayName ? thisHeading.DisplayName : (thisHeading.innerText ? thisHeading.innerText : thisHeading.textContent);dispname = dispname.replace(/^\s+|\s+$/g,'');/* removes leading and trailing whitespace */ if(targets[targetIterator].scope != "Cell" && targets[targetIterator].scope != "Row"){/*If the scope isn't Cell or Row, see if this is the cell to which the formatting should applied */ if(dispname == targets[targetIterator].scope){styleTargetIndex = h_i}} if(targets[targetIterator].type.indexOf("Field") != -1){/*If the value type is a Field, check to see if this is the field whose value we care about */ if(dispname == targets[targetIterator].value.toString()){valueIndex = h_i}} if(dispname == targets[targetIterator].column){columnIndex = h_i}} h_i +=1} if(columnIndex != null){/* If we found a matching heading, let's try to apply the rules... */ var rows = thisTable.rows;for(var i = (rows.length > 0 ? 1 : 0);i < rows.length;i++){var cells = rows[i].children;if(cells.length <= columnIndex){continue} var innerLink = cells[columnIndex].querySelector("a");/* I want to specifically target links so that we can change their text color if necessary */ /* Populate valueToEval with the text value of the current cell, or its inner link if it has one */ var valueToEval = cells[columnIndex].innerText ? (innerLink != null ? innerLink.innerText : cells[columnIndex].innerText) : (innerLink != null ? innerLink.textContent : cells[columnIndex].textContent);if(typeof(valueToEval) == "undefined"){valueToEval = ""} /* Treat empties as blanks */ var listValueToCompareAgainst = null;if(valueIndex != null){/* valueIndex only has a value if we need to grab the comparison value from another column on the list */ valueLink = cells[valueIndex].querySelector("a");listValueToCompareAgainst = cells[valueIndex].innerText ? (valueLink != null ? valueLink.innerText : cells[valueIndex].innerText) : (valueLink != null ? valueLink.textContent : cells[valueIndex].textContent) } var needsStyling = false;switch(targets[targetIterator].type){case "Number": if( !isNaN(Number(valueToEval)) ){valueToEval = Number(valueToEval)} if(!isNaN(Number(targets[targetIterator].value))){targets[targetIterator].value = Number(targets[targetIterator].value)} break;case "Date": valueToEval = new Date(valueToEval);targets[targetIterator].value = new Date(targets[targetIterator].value);if(targets[targetIterator].offset != null){targets[targetIterator].value.setDate(targets[targetIterator].value.getDate() + Number(targets[targetIterator].offset))} break;case "Text": /* Already covered, bro */ break;case "Date Field": valueToEval = new Date(valueToEval);targets[targetIterator].value = new Date(listValueToCompareAgainst);if(targets[targetIterator].offset != null){targets[targetIterator].value.setDate(targets[targetIterator].value.getDate() + Number(targets[targetIterator].offset))} break;case "Text Field": targets[targetIterator].value = listValueToCompareAgainst;break;case "Number Field": if(!isNaN(Number(listValueToCompareAgainst))){targets[targetIterator].value = listValueToCompareAgainst;if(targets[targetIterator].offset != null){targets[targetIterator].value += Number(targets[targetIterator].offset)}} if( !isNaN(Number(valueToEval)) ){valueToEval = Number(valueToEval)} break;case "Special": if(targets[targetIterator].value.toLowerCase){if(targets[targetIterator].value.toLowerCase() == "[me]"){targets[targetIterator].value = Me} else if(targets[targetIterator].value.toLowerCase().indexOf("[today]") != -1){var dateDifference = Number(targets[targetIterator].value.toLowerCase().replace("[today]","").replace(" ","").replace("+",""));targets[targetIterator].value = new Date();if(!isNaN(dateDifference)){targets[targetIterator].value.setDate(targets[targetIterator].value.getDate() + dateDifference)} if(targets[targetIterator].offset != null){targets[targetIterator].value.setDate(targets[targetIterator].value.getDate() + Number(targets[targetIterator].offset))} valueToEval = new Date(valueToEval)}}else{valueToEval = new Date(valueToEval)} break} switch(targets[targetIterator].comparison){case "Greater Than or Equal To": needsStyling = (valueToEval >= targets[targetIterator].value);break;case "Greater Than": needsStyling = (valueToEval > targets[targetIterator].value);break;case "Less Than or Equal To": needsStyling = (valueToEval <= targets[targetIterator].value);break;case "Less Than": needsStyling = (valueToEval < targets[targetIterator].value);break;case "Equal To": needsStyling = (valueToEval == targets[targetIterator].value);break;case "Not Equal To": needsStyling = (valueToEval != targets[targetIterator].value);break;case "Contains": needsStyling = ( valueToEval.indexOf(targets[targetIterator].value) != -1 );break;case "Does Not Contain": needsStyling = (valueToEval.indexOf(targets[targetIterator].value) == -1);break} if(needsStyling ){var links;if(targets[targetIterator].scope != "Row"){var targetIndex = (styleTargetIndex != null) ? styleTargetIndex : columnIndex;cells[targetIndex].setAttribute("style",targets[targetIterator].style);links = cells[targetIndex].querySelectorAll("a")}else{rows[i].setAttribute("style",targets[targetIterator].style);for(var j = 0;j < cells.length;j++){cells[j].setAttribute("style",targets[targetIterator].style)} links = rows[i].querySelectorAll("a")} for(var j = 0;j < links.length;j++){if(links[j].title != "Open Menu"){links[j].setAttribute("style",targets[targetIterator].style);links[j].style.backgroundColor = ""} links[j].style.border = "0px"}}}} t_i+=1}} document.getElementById("_conditional_formatting_link").style.display = "inline-block"} ), Function.createDelegate(this, function(sender, args){/* There was an error accessing the list. Time to create it! */ var lci = new SP.ListCreationInformation();lci.set_title(conditionalFormattingList);lci.set_templateType(SP.ListTemplateType.genericList);var condition_list = clientContext.get_web().get_lists().add(lci);clientContext.load(condition_list);/* Drop the Title field */ var colTitle = condition_list.get_fields().getByTitle("Title");colTitle.set_required(false);colTitle.set_hidden(true);colTitle.update();condition_list.update();/* Add New Fields */ var colColumn = condition_list.get_fields().addFieldAsXml('<Field Description=\'The column to compare (must be visible on the page)\' DisplayName=\'Column\' Type=\'Text\'/>',true,SP.AddFieldOptions.defaultValue);var colComparison = condition_list.get_fields().addFieldAsXml('<Field Description=\'\' Type=\'Choice\' DisplayName=\'Comparison\' Format=\'Dropdown\' FillInChoice=\'FALSE\'><Default>Equal To</Default><CHOICES><CHOICE>Greater Than</CHOICE><CHOICE>Greater Than or Equal To</CHOICE><CHOICE>Equal To</CHOICE><CHOICE>Less Than or Equal To</CHOICE><CHOICE>Less Than</CHOICE><CHOICE>Not Equal To</CHOICE><CHOICE>Contains</CHOICE><CHOICE>Does Not Contain</CHOICE></CHOICES></Field>',true,SP.AddFieldOptions.defaultValue);var colValue = condition_list.get_fields().addFieldAsXml('<Field Description=\'The value or the name of a column to compare against\' DisplayName=\'Value\' Type=\'Text\'/>',true,SP.AddFieldOptions.defaultValue);var colType= condition_list.get_fields().addFieldAsXml('<Field Description=\'Indicate the type of value you are comparing against. Choose Special if using the [Me] or [Today] placeholders.\' Type=\'Choice\' DisplayName=\'Type\' Format=\'Dropdown\' FillInChoice=\'FALSE\'><Default>Text</Default><CHOICES><CHOICE>Date</CHOICE><CHOICE>Number</CHOICE><CHOICE>Text</CHOICE><CHOICE>Date Field</CHOICE><CHOICE>Number Field</CHOICE><CHOICE>Text Field</CHOICE><CHOICE>Special</CHOICE></CHOICES></Field>');var colOffset = condition_list.get_fields().addFieldAsXml('<Field Description=\'Optionally specify a number to offset the value by when comparing against a number or date.\' DisplayName=\'Offset\' Type=\'Number\' />',true,SP.AddFieldOptions.defaultValue);var colStyle = condition_list.get_fields().addFieldAsXml('<Field NumLines=\'4\' Description=\'The CSS to apply to when the condition is met. Leave blank to remove formatting. Example syntax: background-color:darkred;color:white;font-weight:bold;\' DisplayName=\'Style\' Type=\'Note\' />',true,SP.AddFieldOptions.defaultValue);var colScope = condition_list.get_fields().addFieldAsXml('<Field Description=\'The scope to which the style should be applied. Choose Row, Cell, or specify a column name.\' Type=\'Choice\' DisplayName=\'Scope\' Format=\'Dropdown\' FillInChoice=\'TRUE\'><Default>Cell</Default><CHOICES><CHOICE>Cell</CHOICE><CHOICE>Row</CHOICE></CHOICES></Field>',true,SP.AddFieldOptions.defaultValue);var colPriority = condition_list.get_fields().addFieldAsXml('<Field Description=\'Priority determines which styles are applied in case of overlapping conditions. Higher numbers are applied later.\' DisplayName=\'Priority\' Type=\'Number\' />',true,SP.AddFieldOptions.defaultValue);var colUrl = condition_list.get_fields().addFieldAsXml('<Field Description=\'Page where this rule should be applied\' DisplayName=\'URL\' Type=\'Text\'/>',true,SP.AddFieldOptions.defaultValue);clientContext.executeQueryAsync( Function.createDelegate(this, function(){getConditions()}), Function.createDelegate(this, function(sender, args){document.getElementById("_conditional_formatting").innerHTML = ("An error occcurred while trying to apply conditional formatting to the list for you. Error details: "+args.get_message() + " " + args.get_stackTrace());document.getElementById("_conditional_formatting_link").style.display = "inline-block"}))} ))}/* This method is called when the Add Rule button is clicked. */function Add_Conditional_Formatting(){/* Create a new item with only the URL and Priority fields filled out */ var currUrl = document.location.pathname;var clientContext = new SP.ClientContext();var itemCreateInfo = new SP.ListItemCreationInformation();var newItem = clientContext.get_web().get_lists().getByTitle(conditionalFormattingList).addItem(itemCreateInfo);newItem.set_item('URL',currUrl);/* Give the new item a priority that will put it at the end of the list. This is kind of a hack since the highest priority is not necessarily the rulecount. */ newItem.set_item('Priority',document.getElementById("_conditional_formatting_rules").children.length+1);newItem.update();clientContext.load(newItem);clientContext.executeQueryAsync(Function.createDelegate(this,function(){getConditions();/* Reload to refresh the rules list after adding the item */}),Function.createDelegate(this,function(sender, args){alert(args.get_message())}))}/* This method is called when the Edit Item dialog box is closed. It refreshes the page it the item was saved. */function refreshPageConditions(result){if(result != SP.UI.DialogResult.cancel){window.location.replace(document.location.href)}} ExecuteOrDelayUntilScriptLoaded(function(){getConditions();/* If there are any collapsible sections on the page, keep checking to see whether formatting needs to be reapplied */ this.TableRowCount = 0;if(document.querySelector("img[alt='expand']") != null){setInterval(function(){var tempTableRowCount = document.querySelectorAll("tr").length;if( tempTableRowCount != this.TableRowCount){/* Only reapply formatting if the count of table rows is different than it was previously */ this.TableRowCount = tempTableRowCount;getConditions(false) /* Passing false reapplies loaded rules without re-querying the SharePoint list */}},1000)}},"SP.JS");</script>


    Tuesday, July 29, 2014 7:44 PM
  • check this

    http://spjsblog.com/2009/12/31/highlight-row-by-value-in-yesno-column/

    Wednesday, July 30, 2014 6:25 AM
  • Thanks for the responses. The JQuery article looks promising (and easiest)... the only hurdle is, as the article says, "identifying the name of the element you're affecting."

    Any suggestions on how to do that? It's a typical SharePoint Custom List.

    Wednesday, July 30, 2014 2:03 PM
  • Okay.... this looks extremely complicated....

    Is there any information somewhere on how to create these 'formatting rules,' maybe with an example or two of what fields to fill out?

    edited:

    WAIT! I found it. And it does seem to work. Thanks.
    • Edited by Calybos11 Wednesday, July 30, 2014 2:18 PM
    Wednesday, July 30, 2014 2:12 PM
  • Another option, if you don't need the entire row highlighted but just a single cell, is to use a calculated column. If you make it a "Number" data type, it will render any HTML produced by the calculation.

    The formula would look something like this, where Env is the name of the column driving the color-coding:

    ="<div style='text-align:left; background-color:"&IF(Env="Production","yellow",IF(Env="QA","orange",IF(Env="Development","pink","cyan")))&"'>"&Env&"</div>"

    Calculated Column Settings Screenshot

    Example Screenshot

    • Proposed as answer by Felaray Thursday, December 4, 2014 4:32 PM
    Wednesday, July 30, 2014 2:12 PM
  • To identify element name you have to:

    • open page with list in IE
    • Ctrl-U open page source
    • Search for known keyword. You can enter to the list any word that would be easy to find.  So, you will found something like:
    <td class="ms-vb2"><nobr>MyKeywordForSearch</nobr></td>


    Oleg

    Wednesday, July 30, 2014 2:35 PM
  • Hi thriggle,

    I had to use this custom code for colour code formatting..

    I end up with this following error.

    An error occcurred while trying to apply conditional formatting to the list for you. Error details: A list, survey, discussion board, or document library with the specified title already exists in this Web site. Please choose another title. undefined

    I had to do only changes which is about configuring the name of list where i need to apply this colour code formatting which is this , 

    var conditionalFormattingList = "Tasks Today";  /* This is my list */

    Could you give me more detail about the configuration in terms of code level if I need to change anything in code?


    Muralidharan...!!

    Tuesday, May 24, 2016 6:03 AM
  • I end up with this following error.

    An error occcurred while trying to apply conditional formatting to the list for you. Error details: A list, survey, discussion board, or document library with the specified title already exists in this Web site. Please choose another title. undefined

    I had to do only changes which is about configuring the name of list where i need to apply this colour code formatting which is this , 

    var conditionalFormattingList = "Tasks Today";  /* This is my list */

    Hi Murali,

    The conditionalFormattingList variable is used to specify a list where the conditional formatting rules will be stored; you can name it whatever you want, but it shouldn't be the same as an existing list.

    • Proposed as answer by Muraliiiii Saturday, March 25, 2017 5:47 PM
    Tuesday, June 14, 2016 5:48 PM
  • Will this work for SharePOint 2013? I know it will create the list, but I do not see the interface you describe!

    Thanks

    Tuesday, February 14, 2017 7:23 PM
  • Is there any mod you could make to this to be able to replace the text in a cell as opposed to applying css styles to said cell?
    Friday, March 24, 2017 6:51 PM
  • Hi Atlaz,

    As i had observed and gone through the code before, that looks like it pretty possible for the way you want, that we could able to replace the text as well as we already had to apply css styles to cell as per the thriggle's Post mentioned above. Please take a look at the code.

    Just we need some extra changes in the code to meet your way.

    Thanks.

    Saturday, March 25, 2017 5:51 PM
  • jQuery is your friend. This is article for SharePoint 2013 http://davecoleman146.com/2013/07/08/colour-coding-a-sharepoint-2013-list-with-jquery/ but it will work for SharePoint 2010 too.

    Oleg

    link no longer works

    -- The opinions expressed here represent my own and not those of anybody else -- http://manojvnair.blogspot.com

    Wednesday, March 29, 2017 1:48 PM
  • Will this work for SharePOint 2013? I know it will create the list, but I do not see the interface you describe!

    Thanks

    It will, but it needs to be modified slightly. In particular, the line that contains "var Me = document.querySelector("#RibbonContainer" has a CSS query selector that is no longer valid with the master pages provided in SharePoint 2013 and 2016.

    Furthermore, the minimal download strategy often prevents the SharePoint JSOM library from being loaded by default, so you may need to load it manually.

    This is done by invoking SP.SOD.executeFunc('sp.js','SP.ClientContext') if ExecuteOrDelayUntilScriptLoaded is not available.

    An updated version of the conditional formatting code is available below; it has been tested with SharePoint 2016 but you may need to work with your SharePoint administrator to get everything configured to ensure JSOM code is allowed to run in CEWPs:

    <div id="_conditional_formatting_link" style="display:none; ">
    	<div unselectable="on"  style="display:inline-block; user-select:none; cursor:pointer; padding: 3px; background-color:#9b9b9b; color:white; border:1px solid #888;" onclick="javascript:var rules = document.getElementById('_conditional_formatting'); if(rules.style.display == 'none'){rules.style.display = 'inline-block'}else{rules.style.display = 'none'}">
    		Conditional Formatting
    	</div>
    </div>
    <div id="_conditional_formatting" style="display:none;background-color:#dfdfdf; border: 1px solid black; width:95%; max-width:1100px;">
    	<a style="border:0px;padding:5px;float:right;" title="Reapply Formatting" href="javascript:getConditions(false);">
    		<img style="border:0px;" src="/_layouts/images/staticrefresh.gif"/>
    	</a>
    <ol id="_conditional_formatting_rules"></ol>
    <div style="text-align:right; ">
    	<div id="_add_conditional_formatting_rule" unselectable="on" onclick="javascript: Add_Conditional_Formatting();" style="user-select:none; cursor:pointer; padding: 3px; margin: 3px; display:inline-block; background-color:#9b9b9b; border:1px solid #888; color:white;">Add Rule</div>
    </div>
    </div>
    <script>
    	/* Version 1.0 */
    	this.cfl = this.cfl ? this.cfl : new Object(null);
    	var conditionalFormattingList = "Conditional Formatting";
    	function getConditions(reloadRules) {
    		/* if reloadRules, query the conditions list and get all the rules. Otherwise just reapply the ones in memory to the current document. */
    		if (typeof reloadRules == "undefined") { reloadRules = true; }
    		if (reloadRules) {
    			var conditionalFormattingRules = document.getElementById("_conditional_formatting_rules");
    			while (conditionalFormattingRules.children.length > 0) { /* Clear out the currently displayed list of rules. */
    				conditionalFormattingRules.removeChild(conditionalFormattingRules.children[0]);
    			}
    			this.cfl.clientContext = new SP.ClientContext();
    			this.cfl.user = cfl.clientContext.get_web().get_currentUser();
    			var list = cfl.clientContext.get_web().get_lists().getByTitle(conditionalFormattingList);
    			var camlQuery = new SP.CamlQuery();
    			var folder = list.get_rootFolder();
    			camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'URL\' /><Value Type=\'Text\'>' + document.location.pathname + '</Value></Eq></Where><OrderBy><FieldRef Name=\'Priority\' /><FieldRef Name=\'Name\' /></OrderBy></Query></View>');
    			this.cfl.items = list.getItems(camlQuery);
    			cfl.clientContext.load(cfl.user);
    			cfl.clientContext.load(list, 'EffectiveBasePermissions');
    			cfl.clientContext.load(cfl.items);
    			cfl.clientContext.load(folder);
    		}
    		this.cfl.clientContext.executeQueryAsync(
    			Function.createDelegate(this,
    				function () {
    					var Me = this.cfl.user.get_title(); 
    					if (reloadRules) {
    						var baseFormUrl = folder.get_serverRelativeUrl() + "/EditForm.aspx?ID=";
    						/* Figure out if the current user has access to create or edit items on the Conditional Formatting list */
    						var perms = list.get_effectiveBasePermissions();
    						this.cfl.hasEdit = perms.has(SP.PermissionKind.editListItems);
    						this.cfl.hasCreate = perms.has(SP.PermissionKind.addListItems);
    						/* Fill an array with our formatting rules */
    						this.cfl.targets = [];
    						var itemEnumerator = this.cfl.items.getEnumerator();
    						while (itemEnumerator.moveNext()) {
    							var item = itemEnumerator.get_current();
    							var targ = new Object(null);
    							targ.column = item.get_item("Column");
    							targ.comparison = item.get_item("Comparison");
    							targ.style = item.get_item("Style");
    							targ.scope = item.get_item("Scope");
    							targ.type = item.get_item("Type");
    							targ.value = item.get_item("Value"); if (targ.value == null) { targ.value = ""; }
    							targ.id = item.get_item("ID");
    							targ.offset = item.get_item("Offset");
    							cfl.targets.push(targ);
    						}
    					}
    					if (!this.cfl.hasCreate) { document.getElementById("_add_conditional_formatting_rule").style.display = "none"; }
    					for (var targetIterator = 0, len = cfl.targets.length; targetIterator < len; targetIterator++) {
    						var currentTarget = cfl.targets[targetIterator];
    						if (reloadRules) {
    							var rulelist = document.getElementById("_conditional_formatting_rules");
    							var ruletoadd = document.createElement("li");							
    							var comparisondisplay = currentTarget.type.indexOf("Field") != -1 ? "value of the <b>" + currentTarget.value + "</b> column" : "<b>'" + currentTarget.value + "'</b>";
    							if (currentTarget.type == "Special" || currentTarget.type == "Number") {
    								if (currentTarget.value.toString().toLowerCase() == "[me]") { comparisondisplay = "<b>[Me](" + Me + ")</b>"; }
    								else { comparisondisplay = "<b>" + currentTarget.value + "</b>"; }
    							}
    							if (currentTarget.value == "") { comparisondisplay = "<b>(blank)</b>"; }
    							if (currentTarget.offset != null) {
    								comparisondisplay += "<b>" + (currentTarget.offset < 0 ? " " : " +") + currentTarget.offset + "</b>"
    							}
    							var editLink = this.cfl.hasEdit ? "<div style='display:inline-block;cursor:pointer;' onclick='SP.UI.ModalDialog.commonModalDialogOpen(" + '"' + baseFormUrl + currentTarget.id + '&Source=' + document.location.pathname + '"' + ",{},refreshPageConditions); '>" + "<img src='/_layouts/images/EDITITEM.GIF' style='vertical-align:middle;' title='Customize' alt='Customize'/>" + "&nbsp;</div>" : "";
    							ruletoadd.innerHTML = editLink + "When <b>" + currentTarget.column + "</b> "
    								+ currentTarget.comparison + " " + comparisondisplay
    								+ ", apply {" + (currentTarget.style == null ? "remove all formatting" : "<span style='" + currentTarget.style + "'>" + currentTarget.style + "</span>") + "} to the <b>" + currentTarget.scope + "</b>" + ((currentTarget.scope != "Cell" && currentTarget.scope != "Row") ? " column" : "");
    							rulelist.appendChild(ruletoadd);
    						}
    						var tables = document.querySelectorAll("table.ms-listviewtable"); /* Should get all the list view web parts on the page. */
    						var t_i = 0;
    						while (t_i < tables.length) {
    							var columnIndex = null; /* Index of the column to compare against */
    							var valueIndex = null; /* Index of a second column from which to pull the value to compare */
    							var styleTargetIndex = null; /* Index of a column to apply formatting to */
    							var thisTable = tables[t_i];
    							var headings = thisTable.rows[0].cells;
    							var h_i = 0;
    							while (h_i < headings.length) { /* Check all the column headings... */
    								var thisHeading = headings[h_i].querySelector("div:first-child");
    								if (thisHeading != null) {
    									/* In Internet Explorer, the headings have a DisplayName attribute you can grab. If that's not there, just grab the innerText or textContent */
    									var dispname = thisHeading.DisplayName ? thisHeading.DisplayName : (thisHeading.innerText ? thisHeading.innerText : thisHeading.textContent);
    									dispname = dispname.replace(/^\s+|\s+$/g, '');/* removes leading and trailing whitespace */
    									if (currentTarget.scope != "Cell" && currentTarget.scope != "Row") {
    										/*If the scope isn't Cell or Row, see if this is the cell to which the formatting should applied */
    										if (dispname == currentTarget.scope) { styleTargetIndex = h_i; }
    									}
    									if (currentTarget.type.indexOf("Field") != -1) {
    										/*If the value type is a Field, check to see if this is the field whose value we care about */
    										if (dispname == currentTarget.value.toString()) { valueIndex = h_i; }
    									}
    									if (dispname == currentTarget.column) { columnIndex = h_i; }
    								}
    								h_i += 1;
    							}
    							if (columnIndex != null) { /* If we found a matching heading, let's try to apply the rules... */
    								var rows = thisTable.rows;
    								for (var i = (rows.length > 0 ? 1 : 0) ; i < rows.length; i++) {
    									var cells = rows[i].children;
    									if (cells.length <= columnIndex) { continue }
    									var innerLink = cells[columnIndex].querySelector("a"); /* I want to specifically target links so that we can change their text color if necessary */
    									/* Populate valueToEval with the text value of the current cell, or its inner link if it has one */
    									var valueToEval = cells[columnIndex].innerText ? (innerLink != null ? innerLink.innerText : cells[columnIndex].innerText) : (innerLink != null ? innerLink.textContent : cells[columnIndex].textContent);
    									if (typeof (valueToEval) == "undefined") { valueToEval = "" } /* Treat empties as blanks */
    									var listValueToCompareAgainst = null;
    									if (valueIndex != null) { /* valueIndex only has a value if we need to grab the comparison value from another column on the list */
    										valueLink = cells[valueIndex].querySelector("a");
    										listValueToCompareAgainst = cells[valueIndex].innerText ? (valueLink != null ? valueLink.innerText : cells[valueIndex].innerText) : (valueLink != null ? valueLink.textContent : cells[valueIndex].textContent);
    									}
    									var needsStyling = false;
    									switch (currentTarget.type) {
    										case "Number":
    											if (!isNaN(Number(valueToEval))) {
    												valueToEval = +(valueToEval);
    											}
    											if (!isNaN(Number(currentTarget.value))) {
    												currentTarget.value = +(currentTarget.value);
    											}
    											break;
    										case "Date":
    											valueToEval = new Date(valueToEval);
    											currentTarget.value = new Date(currentTarget.value);
    											if (currentTarget.offset != null) {
    												currentTarget.value.setDate(currentTarget.value.getDate() + +(currentTarget.offset));
    											}
    											break;
    										case "Text": /* Already covered, bro */ break;
    										case "Date Field":
    											valueToEval = new Date(valueToEval);
    											currentTarget.value = new Date(listValueToCompareAgainst);
    											if (currentTarget.offset != null) {
    												currentTarget.value.setDate(currentTarget.value.getDate() + +(currentTarget.offset));
    											}
    											break;
    										case "Text Field": currentTarget.value = listValueToCompareAgainst; break;
    										case "Number Field":
    											if (!isNaN(Number(listValueToCompareAgainst))) {
    												currentTarget.value = listValueToCompareAgainst;
    												if (currentTarget.offset != null) {
    													currentTarget.value += Number(currentTarget.offset);
    												}
    											}
    											if (!isNaN(Number(valueToEval))) {
    												valueToEval = Number(valueToEval);
    											}
    											break;
    										case "Special":
    											if (currentTarget.value.toLowerCase) {
    												if (currentTarget.value.toLowerCase() == "[me]") { currentTarget.value = Me }
    												else if (currentTarget.value.toLowerCase().indexOf("[today]") != -1) {
    													var dateDifference = Number(currentTarget.value.toLowerCase().replace("[today]", "").replace(" ", "").replace("+", ""));
    													currentTarget.value = new Date();
    													if (!isNaN(dateDifference)) { currentTarget.value.setDate(currentTarget.value.getDate() + dateDifference); }
    													if (currentTarget.offset != null) {
    														currentTarget.value.setDate(currentTarget.value.getDate() + Number(currentTarget.offset));
    													}
    													valueToEval = new Date(valueToEval);
    												}
    											} else { valueToEval = new Date(valueToEval); }
    											break;
    									}
    									switch (currentTarget.comparison) {
    										case "Greater Than or Equal To": needsStyling = (valueToEval >= currentTarget.value); break;
    										case "Greater Than": needsStyling = (valueToEval > currentTarget.value); break;
    										case "Less Than or Equal To": needsStyling = (valueToEval <= currentTarget.value); break;
    										case "Less Than": needsStyling = (valueToEval < currentTarget.value); break;
    										case "Equal To": needsStyling = (valueToEval == currentTarget.value); break;
    										case "Not Equal To": needsStyling = (valueToEval != currentTarget.value); break;
    										case "Contains": needsStyling = (valueToEval.indexOf(currentTarget.value) != -1); break;
    										case "Does Not Contain": needsStyling = (valueToEval.indexOf(currentTarget.value) == -1); break;
    									}
    									if (needsStyling) {
    										var links;
    										if (currentTarget.scope != "Row") {
    											var targetIndex = (styleTargetIndex != null) ? styleTargetIndex : columnIndex;
    											cells[targetIndex].setAttribute("style", currentTarget.style);
    											links = cells[targetIndex].querySelectorAll("a");
    
    										} else {
    											rows[i].setAttribute("style", currentTarget.style);
    											for (var j = 0; j < cells.length; j++) {
    												cells[j].setAttribute("style", currentTarget.style);
    											}
    											links = rows[i].querySelectorAll("a");
    										}
    										for (var j = 0; j < links.length; j++) {
    											if (links[j].title != "Open Menu") {
    												links[j].setAttribute("style", currentTarget.style);
    												links[j].style.backgroundColor = "";
    											}
    											links[j].style.border = "0px";
    										}
    									}
    								}
    							}
    							t_i += 1;
    						}
    					}
    					document.getElementById("_conditional_formatting_link").style.display = "inline-block";
    				}
    			),
    			Function.createDelegate(this,
    				function (sender, args) { /* There was an error accessing the list. Time to create it! */
    					var lci = new SP.ListCreationInformation();
    					lci.set_title(conditionalFormattingList);
    					lci.set_templateType(SP.ListTemplateType.genericList);
    					var condition_list = clientContext.get_web().get_lists().add(lci);
    					clientContext.load(condition_list);
    					var colTitle = condition_list.get_fields().getByTitle("Title");
    					colTitle.set_required(false); colTitle.set_hidden(true); colTitle.update();
    					condition_list.update();
    					var colColumn = condition_list.get_fields().addFieldAsXml('<Field Description=\'The column to compare (must be visible on the page)\' DisplayName=\'Column\' Type=\'Text\'/>', true, SP.AddFieldOptions.defaultValue);
    					var colComparison = condition_list.get_fields().addFieldAsXml('<Field Description=\'\' Type=\'Choice\' DisplayName=\'Comparison\' Format=\'Dropdown\' FillInChoice=\'FALSE\'><Default>Equal To</Default><CHOICES><CHOICE>Greater Than</CHOICE><CHOICE>Greater Than or Equal To</CHOICE><CHOICE>Equal To</CHOICE><CHOICE>Less Than or Equal To</CHOICE><CHOICE>Less Than</CHOICE><CHOICE>Not Equal To</CHOICE><CHOICE>Contains</CHOICE><CHOICE>Does Not Contain</CHOICE></CHOICES></Field>', true, SP.AddFieldOptions.defaultValue);
    					var colValue = condition_list.get_fields().addFieldAsXml('<Field Description=\'The value or the name of a column to compare against\' DisplayName=\'Value\' Type=\'Text\'/>', true, SP.AddFieldOptions.defaultValue);
    					var colType = condition_list.get_fields().addFieldAsXml('<Field Description=\'Indicate the type of value you are comparing against. Choose Special if using the [Me] or [Today] placeholders.\' Type=\'Choice\' DisplayName=\'Type\' Format=\'Dropdown\' FillInChoice=\'FALSE\'><Default>Text</Default><CHOICES><CHOICE>Date</CHOICE><CHOICE>Number</CHOICE><CHOICE>Text</CHOICE><CHOICE>Date Field</CHOICE><CHOICE>Number Field</CHOICE><CHOICE>Text Field</CHOICE><CHOICE>Special</CHOICE></CHOICES></Field>');
    					var colOffset = condition_list.get_fields().addFieldAsXml('<Field Description=\'Optionally specify a number to offset the value by when comparing against a number or date.\' DisplayName=\'Offset\' Type=\'Number\' />', true, SP.AddFieldOptions.defaultValue);
    					var colStyle = condition_list.get_fields().addFieldAsXml('<Field NumLines=\'4\' Description=\'The CSS to apply to when the condition is met. Leave blank to remove formatting. Example syntax: background-color:darkred; color:white; font-weight:bold;\' DisplayName=\'Style\' Type=\'Note\' />', true, SP.AddFieldOptions.defaultValue);
    					var colScope = condition_list.get_fields().addFieldAsXml('<Field Description=\'The scope to which the style should be applied. Choose Row, Cell, or specify a column name.\' Type=\'Choice\' DisplayName=\'Scope\' Format=\'Dropdown\' FillInChoice=\'TRUE\'><Default>Cell</Default><CHOICES><CHOICE>Cell</CHOICE><CHOICE>Row</CHOICE></CHOICES></Field>', true, SP.AddFieldOptions.defaultValue);
    					var colPriority = condition_list.get_fields().addFieldAsXml('<Field Description=\'Priority determines which styles are applied in case of overlapping conditions. Higher numbers are applied later.\' DisplayName=\'Priority\' Type=\'Number\' />', true, SP.AddFieldOptions.defaultValue);
    					var colUrl = condition_list.get_fields().addFieldAsXml('<Field Description=\'Page where this rule should be applied\' DisplayName=\'URL\' Type=\'Text\'/>', true, SP.AddFieldOptions.defaultValue);
    					clientContext.executeQueryAsync(
    						Function.createDelegate(this, function () { getConditions(); }),
    						Function.createDelegate(this, function (sender, args) { document.getElementById("_conditional_formatting").innerHTML = ("An error occcurred while trying to apply conditional formatting to the list for you. Error details: " + args.get_message() + " " + args.get_stackTrace()); document.getElementById("_conditional_formatting_link").style.display = "inline-block"; }));
    				}
    			));
    	}
    	/* This method is called when the Add Rule button is clicked. */
    	function Add_Conditional_Formatting() {
    		/* Create a new item with only the URL and Priority fields filled out */
    		var currUrl = document.location.pathname;
    		var clientContext = new SP.ClientContext();
    		var itemCreateInfo = new SP.ListItemCreationInformation();
    		var newItem = clientContext.get_web().get_lists().getByTitle(conditionalFormattingList).addItem(itemCreateInfo);
    		newItem.set_item('URL', currUrl);
    		/* Give the new item a priority that will put it at the end of the list. This is kind of a hack since the highest priority is not necessarily the rulecount. */
    		newItem.set_item('Priority', document.getElementById("_conditional_formatting_rules").children.length + 1);
    		newItem.update();
    		clientContext.load(newItem);
    		clientContext.executeQueryAsync(Function.createDelegate(this, function () {
    			getConditions(); /* Reload to refresh the rules list after adding the item */
    		}), Function.createDelegate(this, function (sender, args) { alert(args.get_message()); }));
    	}
    
    	/* This method is called when the Edit Item dialog box is closed. It refreshes the page it the item was saved. */
    	function refreshPageConditions(result) { if (result != SP.UI.DialogResult.cancel) { window.location.replace(document.location.href) } }
    
    	if(ExecuteOrDelayUntilScriptLoaded){
    		loaded = ExecuteOrDelayUntilScriptLoaded(startExecution,"SP.JS");
    	}
    	if(!loaded){
    		SP.SOD.executeFunc('sp.js','SP.ClientContext');
    	}
    	function startExecution(){
    		getConditions();
    		/* If there are any collapsible sections on the page, keep checking to see whether formatting needs to be reapplied */
    		this.TableRowCount = 0;
    
    		if (document.querySelector("img[alt='expand']") != null) {
    			setInterval(function () {
    				var tempTableRowCount = document.querySelectorAll("tr").length;
    				if (tempTableRowCount != this.TableRowCount) {
    					/* Only reapply formatting if the count of table rows is different than it was previously */
    					this.TableRowCount = tempTableRowCount;
    					getConditions(false) /* Passing false reapplies loaded rules without re-querying the SharePoint list */
    				}
    			}, 1000)
    		}
    	}
    </script>

    Wednesday, November 1, 2017 8:48 PM