1

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 '14 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. – user3760253 Oct 28 '14 at 7:06
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
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.

  • 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. – user3760253 Oct 28 '14 at 18:58
  • I've added the screen upside as here not able to attach it.Thanks. – user3760253 Oct 28 '14 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 '14 at 19:36
  • Thanks John for your help and support.Its work perfectly. Now I'll check the second part and let you know.:) – user3760253 Oct 28 '14 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. – user3760253 Oct 29 '14 at 10:35
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

enter image description here

Result

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. – user3760253 Oct 29 '14 at 6:23
  • The answer has been updated, see Sorting and filtering section. – Vadim Gremyachev Oct 29 '14 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. – user3760253 Oct 29 '14 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 – Vadim Gremyachev Oct 29 '14 at 7:55
  • 1
    @mparvind, have you followed the instructions i have provided? Looks like you forgot to specify the proper field type – Vadim Gremyachev Oct 29 '14 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.