In SharePoint List I need help on below point. Can any one help how to archive this using Client-side rendering (JS Link) in SharePoint :-

If Balance Qty is not 0 then it should be in RED colour (OPEN) and if Qty is 0 then colour should change from Red to Green (CLOSE). enter image description here

enter image description here

My Screen enter image description here

  • I am not able to get the question..i assume balance qty is a column in a list and what exactly you mean by open and close ? When it should happen ?
    – Arvi
    Oct 28, 2014 at 6:56
  • Thanks Arvind to looking into this issue. If Balance Qty is equal to Open Qty then it will be close and if Balance Qty is less than open Qty then it will be open. Hope this will be clear. So here Status (Close or Open) should be change automatic when user enter the data in Balance Qty. Oct 28, 2014 at 7:06

2 Answers 2


I would probably do this in two steps...

EDIT: Update based on further conversation with OP in chat -- modified answer to affect two fields and handle MDS

  1. Create a calculated column that follows your rules to calculate if a PO should be 'OPEN' or 'CLOSED' The formula for the calculated Status column could be something like: =IF(NOT([Balance Qty]=0), "OPEN", "CLOSED") Using a calculated column, you can do other things later like sort/filter by open or closed POs in list views.

  2. Next I would use JSLink Client-Side Rendering to color-highlight your status field when it appears in a list view... I'm assuming you have named the calculated column "Status"

Save this code as a JS file and put it somewhere you can get to it (I saved it as a file called statusHighlighterCsr.js and put it in my site's Asset Library):

// SharePoint Online Automatically uses MDS, so we'll setup our custom rendering
// to play nicely
RegisterModuleInit('/Testing/SiteAssets/statusHighlighterCsr.js', registerStatusHighlighter);
// this will call the rendering function though in case MDS doesn't apply

function registerStatusHighlighter() {
    var statusHighlighterCtx = {};
    statusHighlighterCtx.Templates = {};
    statusHighlighterCtx.Templates.Fields = {
    // Each key value in this object should be the field name
    // so spelling and case matter and should match your list
        "Status": {
            // Each key here should be the view/form you want to use
            // this custom rendering, choices include: 'View', 'DisplayForm',
            // 'EditForm', 'NewForm'. The value should point to the function \
            // that will actually perform the rendering, which we will define 
            // below -- outside of this function.
            "View": statusHighlighterTemplate
        "Order_x0020_Status": {
            "View": openHighlighterTemplate

function statusHighlighterTemplate(ctx) {
    // you access the current list item properties with ctx.CurrentItem
    var currItmStatus = ctx.CurrentItem.Status,
        returnNode = document.createElement('span');
    returnNode.style["font-weight"] = "bold"
    if (currItmStatus == "OPEN") {
        returnNode.style.color = "red";
    } else {
        returnNode.style.color = "green";
    return returnNode.outerHTML;

function openHighlighterTemplate(ctx) {
    // for the Open Status Field rendering
    var currItmOrdered = ctx.CurrentItem['Open_x0020_Status'],
        returnNode = document.createElement('span');
    returnNode.style["font-weight"] = "bold"
    if (currItmOrdered == "ORDERED") {
        returnNode.style.color = "green";
    } else {
        returnNode.style.color = "red";
    return returnNode.outerHTML;

Note: this is all just standard JS, so no jQuery references required on the page with your list view.

Watch out for a common issue when adding the file to your list view's JSLink property, it expects a URL token like the ones listed here instead of a normal URL... I used a file called statusHighlighterCsr.js that I put in my asset library... so my URL token looks like:


That should get you going, I have another answer about JSLink that you can find here with some more information.

  • Thanks John,For first option I tried but its not showing the proper result. I created below column in SharePoint Online List, create one more column Calculated (With Calculated Type) and given your provided formula then I enter all data manually Open Qty, Close Qty, Balance Qty (All Manually), Status. Here after entering Balance Qty status is not changing in both column Status or Calculated. Please advice. Oct 28, 2014 at 18:58
  • I've added the screen upside as here not able to attach it.Thanks. Oct 28, 2014 at 19:03
  • 1
    Ok I re-read your conditional... what I think you need is =IF(NOT([Balance Qty]=0), "OPEN", "CLOSED") and I've also modified the JS to reflect the correct color for each choice
    – John-M
    Oct 28, 2014 at 19:36
  • Thanks John for your help and support.Its work perfectly. Now I'll check the second part and let you know.:) Oct 28, 2014 at 20:01
  • Hi John, I tried your above js script. But not sure If I'm missing some steps to upload the js file in proper manner. Please find my stpes :- 1)Save the file with same name in Asset Library. 2) In SharePoint Edit the WebPart Properties,In Miscellaneous - JS Link - added by link (~Testing/SiteAssets/statusHighlighterCsr.js), 3) Apply and Ok. But color changes are not reflecting. Not sure If I'm missing some steps. Oct 29, 2014 at 10:35

There is a simple but a little bit tricky solution for this task.


1) Create a calculated column named Status

2) Specify the following formula:

="<span style='color:" & IF(NOT([Balance Qty]=0),"red'>OPEN","green'>CLOSED") & "</span>"

It is assumed that Balance Qty column exist

and set (important) Data Type to Number or Currency or Date and Time as shown on figure below

enter image description here


enter image description here

Filtering and sorting

Since Status column represents a html value, i would recommend to create an additional calculated column, let's say StatusText to perform filtering/sorting operations

StatusText calculated column formula:

=IF(NOT([Balance Qty]=0), "OPEN", "CLOSED")

Another option would be to utilize source column, in your case Balance Qty to perform filtering/sorting operations by status.

  • Hi Vadim, Here after saving the data its showing perfect but when I'm trying to filter the status with OPEN or CLOSED its showing the formula instead of OPEN/CLOSED option. Oct 29, 2014 at 6:23
  • The answer has been updated, see Sorting and filtering section. Oct 29, 2014 at 7:30
  • Thanks Vadim, I created new column Status Text and its working. But in this List two column for the same value Status (one for filtering one for color status) is looking odd. It will be good if I can use same column for sorting/filtering. Any Idea If I can hide html value and able to filter base of OPEN/CLOSE in status column itself. Thanks. Oct 29, 2014 at 7:50
  • Sure, just go to Modify View settings and select/un-select the fields you would like to be visible in List View Oct 29, 2014 at 7:55
  • 1
    @mparvind, have you followed the instructions i have provided? Looks like you forgot to specify the proper field type Oct 29, 2014 at 9:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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