Conditional Formatting on SharePoint 2013 Designer

Question

I am working as an IT support in a small company. I need to create a formatting function for a dropdown control box column with months (multiple months can be selected). If there are multiple months selected, then the list element changes its background (or the words itself change the color) to red (as an example). The problem is that I am working on Sharepoint 2013 Foundation and conditional formatting is not available. The background color needs to change the color only when there are multiple months selected. I also tried using the conditional formatting function from Sharepoint Designer 2010, but when I copy the code from the 2010 Designer to the 2013 Designer, nothing happens and sometimes an error shows up. I tried even to put a comma as condition to change the color (example: April,May), but it didn't work. Is there a possibility to use conditional formatting on Sharepoint 2013 or using an another method (java scripts?).

Sorry for my grammar, English is not my main language.

Thank you and best regards.

Answer 1

There is a new feature in SharePoint 2013 called Client Side Rendering or JSLink, which can be helpful in your scenario, actually I see it as a replacement of Conditional Formatting..

In simple words, now the List View Web Part has a property called JSLink, where you can provide your JavaScript file reference, which is used while rendering the List View..

Please have a look at following:

JS Link – Highlighting a Row with CSR

Client Side Rendering - Conditional formatting on-fly

Client-side rendering (JS Link) code samples

Answer 2

Try using this approach.

(function () {
var overrideContext = {};
overrideContext.BaseViewID = 2;
overrideContext.ListTemplateType = 10001;
overrideContext.Templates = {};
overrideContext.Templates.Header = "<h2>My Custom Rendering Movies View</h2>";
overrideContext.Templates.Fields = { 'PopularityPercent': { 'View': PopularityViewTemplate } };
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideContext);})();



function PopularityViewTemplate(ctx) { 
var popularity = ctx.CurrentItem[ctx.CurrentFieldSchema.Name];
var color = getColor(popularity);
return "&nbsp;&nbsp;&nbsp;&nbsp;<span style='background-color : " + color + "' >&nbsp;&nbsp;&nbsp;&nbsp;</span>&nbsp;" + popularity + "%";}


function getColor(pop) {
if (parseInt(pop) > 70)
    return "Green";
else if (parseInt(pop) > 40)
    return "Yellow";
else if (parseInt(pop) > 20)
    return "Orange";
else
    return "Red";}

Result:

Complete tutorial of JSLink below. This might help you.

http://www.codeproject.com/Articles/524962/JSLink-Custom-JS-Rendering-in-SharePoint