0

I've created a document library with some folders in it and I have added a new Column "Permission" to this Library. So now I want to color the cell or the entire row when e.g. the value "Owner" appears in this row. For this I found a little JS file:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        colorCellsByStatus();
    });
    var colorCellsByStatus = function() {
        $Text = $("td.ms-cellstyle.ms-vb2:contains('Owner')");
        $Text.parent().css("background-color", "#01DF3A");
    }
</script>

So When I put this in a script editor it colors the whole row when the value is inserted. But when i have more rows and I want to filter the library this coloring does not appear. Is there any possibility to rerender or call the script when a filter is created? Many thanks. BR Michael

3

Since you have already tagged the question with client-side-rendering tag, I would recommend you to consider a slightly different approach.

As you might guess the solution described below allows to highlight the row in List View using Client-Side Rendering (CSR) approach.

Highlighting the row using CSR

Template code:

SPClientTemplates.TemplateManager.RegisterTemplateOverrides({
  OnPostRender: function(ctx) {
    var rows = ctx.ListData.Row;
    for (var i=0;i<rows.length;i++)
    {

      var permissionName = (rows[i]["Permission"].length > 0 ? rows[i]["Permission"][0].title : "");
      if (permissionName == "Approvers")
      {
        var rowId = GenerateIIDForListItem(ctx, rows[i]);
        var row = document.getElementById(rowId);
        row.style.backgroundColor = "#01DF3A";
      }
    }
  }
});

Note: you have to specify the proper group name since in my case I am using group named Approvers

How to apply the changes

There are at least two options how to apply the changes:

  1. Using JSLink property
  2. Place JavaScript template on page via Script Editor/Content Editor web parts

Here is how to apply the changes using the second option:

  1. Switch the page into edit mode
  2. Add Script Editor webpart right below the list view web part.
  3. Put the specified code by wrapping it using script tag code into the Script Editor, for example: <script type="text/javascript">{Template JS code goes here}</script>
  4. Save the page

Results

enter image description here

References

  • Hi Vadim! Thanks for your answer. I've tried to configure the coloring like you wrote (with the code you posted here). So I've added a script editor and added the code. The column and the text were changed so that everything matches the code. but it didn't worked. Is there any hint why this could not work? thanks Mike – Michael Mayr Sep 9 '14 at 5:47
  • Hi Michael, have you noticed in my example I use the group named "Approvers"? I guess you need to change it? – Vadim Gremyachev Sep 9 '14 at 19:33
  • Hi Vadim! I've changed the "permissionName" and tried it several times but it didn't worked. Is there anything else what I should take care of? This is not a unique problem, i had this behavior also with other scripts. – Michael Mayr Sep 10 '14 at 6:53
  • Hmm.. it could be so that in your case "Permission" column is a Single user field, then please try this line instead: var permissionName = rows[i]["<your field name>"].title; – Vadim Gremyachev Sep 10 '14 at 7:03
  • No, "Permission" is a Choice field. – Michael Mayr Sep 10 '14 at 7:32

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.