Client-side rendering (JS Link) status changes in sharepoint list

Question

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).

My Screen

Answer 1

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
registerStatusHighlighter();

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
        }
    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(statusHighlighterCtx);
}

function statusHighlighterTemplate(ctx) {
    // you access the current list item properties with ctx.CurrentItem
    var currItmStatus = ctx.CurrentItem.Status,
        returnNode = document.createElement('span');
    returnNode.appendChild(document.createTextNode(currItmStatus));
    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.appendChild(document.createTextNode(currItmOrdered));
    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:

~site/SiteAssets/statusHighlighterCsr.js

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

Answer 2

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

Steps:

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

Result

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.