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:
- Using JSLink property
- Place JavaScript template on page via Script Editor
Script Editor
/Content Editor
web parts
Here is how to apply the changes using the second option:
- Switch the page into edit mode
- Add
Script Editor
webpart right below the list view web part. - 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>
- Save the page