3

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.

1
  • Has anyone an idea? I need this because of my job. I have no knowledge in using java scripts. Best regards
    – Ivica1987
    Mar 31, 2014 at 15:07

2 Answers 2

2

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

1
  • Thank you for your answer, but I didn't have much luck since I lack the understanding for Java Scripts. I'll post a picture as an example. ![SharePoint Color][1] [1]: i.stack.imgur.com/MF1Fw.png What I need is to color the second row in red. This column is a control or check box dropdown column and these kind of columns are not possible to use with calculated columns. Is there a java script that colores the row in a different color, depending if the column has multiple months selected (no matter which month). Also is it possible to create a button that colores rows or list items. I appr
    – user24701
    Mar 27, 2014 at 14:51
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:

enter image description here

Complete tutorial of JSLink below. This might help you.

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.