Skip to main content
added 2 characters in body
Source Link
Vadim Gremyachev
  • 42.6k
  • 3
  • 87
  • 169

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 EditorScript 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

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

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

Source Link
Vadim Gremyachev
  • 42.6k
  • 3
  • 87
  • 169

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