{"id":523,"date":"2014-02-26T02:29:23","date_gmt":"2014-02-26T08:29:23","guid":{"rendered":"http:\/\/www.idubbs.com\/blog\/?p=523"},"modified":"2014-02-26T02:29:23","modified_gmt":"2014-02-26T08:29:23","slug":"js-link-csr-view-conditional-formatting","status":"publish","type":"post","link":"https:\/\/www.idubbs.com\/blog\/2014\/js-link-csr-view-conditional-formatting\/","title":{"rendered":"JS Link \u2013 CSR View Conditional Formatting"},"content":{"rendered":"

This post builds on the JS Link \u2013 CSR Simple View Field Formatting<\/a> post.<\/p>\n

If you can format a single field as was done in the previous example, it\u2019s not a big step from there to using conditional formatting.<\/p>\n

In SharePoint Designer (pre-2013) one of relatively easy yet powerful features\u00a0 was conditional formatting \u2013 the ability to dynamically change how content was displayed based on rules. In the last post<\/a> we went over how to do simple formatting, in this post we\u2019ll review how to incorporate some simple rules or conditions.<\/p>\n

In the previous example we bolded everything in the Issue Status field.<\/p>\n

\"image\"<\/a><\/p>\n

In this example we\u2019ll \u2018conditionally\u2019 select which items are bolded based on data values for each item.<\/p>\n

\"image\"<\/a><\/p>\n

We\u2019ll start with a couple of individual fields and go from there. For this example and similar to the last post, I created a page in the Site Pages library and added the Office Issues web part to the page. I\u2019ll be setting the JS Link property of the web part here in a few steps.<\/p>\n

In this post we\u2019re adding three concepts:<\/p>\n

    \n
  1. JavaScript – Calling a function.
    \nIf you are a JavaScript developer this concept isn\u2019t really even worth mentioning. If you are not a developer, we\u2019re moving the code around a little bit to keep it organized, easier to read, etc\u2026    \"image\"<\/a>\u2018Status\u2019:{\u2018View\u2019: ConditionalStatus<\/span>},
    \nIn this line rather than setting the value of the field outright like we did with simple field formatting, we\u2019re calling a function \u2018ConditionalStatus\u2019 where addition work is being done.<\/li>\n
  2. Checking for the \u2018condition\u2019 or rule.
    \n    \"image\"<\/a>Without getting into all the JavaScript details, what we\u2019re doing in the function is checking the value of the \u2018Issue Status\u2019 field and either making the contents bold, or leaving them in the default format.if (ctx.CurrentItem.Status == \u201cActive\u201d ) {<\/li>\n
  3. Building the HTML for what is displayed or rendered in the web part on the page.In this example we\u2019re just using a the HTML tags necessary to bold the content being displayed. You could use virtually any HTML or CSS you wanted when it comes to formatting the data:ret = \u201c<b>\u201d + ctx.CurrentItem.Status + \u201c<\/b>\u201d;\n

    You should also note the way we set up the data. The HTML and field data need to be built into a string – which is different than the way we did it in the previous post.<\/li>\n<\/ol>\n

    The full sample code can be found HERE<\/a>.<\/p>\n

    The completed file is then uploaded to your chosen location: Master Page Gallery in this case. The web part JS Link property is configured to point to your JavaScript file:<\/p>\n

    ~site\/_catalogs\/masterpage\/[yourFileName].js<\/p>\n

    Notes:<\/p>\n