2

I wanted to highlight list items which is checked-out and draft. I found a solution for checked-out items but I couldn't find how can I check the list item is draft (minor version). I am sure that there must be a solution with SharePoint Web API's. But I am looking something like I mentioned below.

var rows = ctx.ListData.Row;

for (var i = 0; i < rows.length; i++) {
    if (rows[i]["CheckedOutUserId"] != "") {
        var rowId = GenerateIIDForListItem(ctx, rows[i]);
        var row = $(document.getElementById(rowId));
        row.css("backgroundColor", "#f8d7da");
    }
}
1

Check _UIVersionString for each item.

Demo:

var versionNumb = Number(rows[i]["_UIVersionString"]);
if(versionNumb !== parseInt(versionNumb)){
    var rowId = GenerateIIDForListItem(ctx, rows[i]);
    var row = document.getElementById(rowId);
    row.style.backgroundColor = "#f8d7da";
}

Summary:

<script>
SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
  OnPostRender: function(ctx) {
    var rows = ctx.ListData.Row;
    for (var i=0;i<rows.length;i++)
    {
        var versionNumb = Number(rows[i]["_UIVersionString"]);
        if (rows[i]["CheckedOutUserId"] != "" || versionNumb !== parseInt(versionNumb)) {
            var rowId = GenerateIIDForListItem(ctx, rows[i]);
            var row = document.getElementById(rowId);
            row.style.backgroundColor = "#f8d7da";
        }

    }
  }
});
</script>

Result:

enter image description here

| improve this answer | |
0

https://www.codeproject.com/Articles/620110/%2FArticles%2F620110%2FSharePoint-Client-Side-Rendering-List-Views

Example: Color coding

Let's consider a more real-world example - color coding. So for example, I want to paint green all rows from a document library that have status "Approved".

Since there's not much of a customization here - I need just to change a css property of an existing element, - best way to accomplish this would be to use OnPostRender event and manipulate DOM elements that were rendered by CSR.

From OnPostRender, the ctx is accessible, thus it is not a problem to determine which documents were approved (given the Approved column is included into the view). The only tricky thing is to get the ID of the element that represents the row. Here I cheated a bit, by peeking into the CSR guts and finding a function, that generates row ids (but obviously, you can also figure out these IDs from the page source and generate them manually).

Now everything is simple: we have the element IDs, and we can acquire field values from ctx (after a short investigation I found them in the ctx.ListData.Row array).

So here's the final code:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
  OnPostRender: function(ctx) {
    var rows = ctx.ListData.Row;
    for (var i=0;i<rows.length;i++)
    {
      var isApproved = rows[i]["_ModerationStatus"] == "Approved";
      if (isApproved)
      {
        var rowElementId = GenerateIIDForListItem(ctx, rows[i]);
        var tr = document.getElementById(rowElementId);
        tr.style.backgroundColor = "#ada";
      }
    }
  }
});

This will work for English portal, but better make it international. For that, you need to replace "_ModerationStatus" with "_ModerationStatus." (dot at the end!), and compare with 0.

0 is for Approved

3 is for Draft

In short

var isDraft =rows[i]["_ModerationStatus."] == "3"; //_ModerationStatus. Draft is 3 Approved is 0
      if (isDraft)
      {
       //backgroundColor...
      }
| improve this answer | |
  • Marko, For this approach we need to set Content Approval as "Yes" and we need to add this "Approval Status" column into the view. Actually I just want to check to check is it minor version or major version. – Onur CAN Dec 20 '18 at 14:52

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.