0

I have a list on SharePoint with classic view mode. I create color indicator in Content Media Web Part with uploaded file Java Script in Site Assets.

But when I make the item limit per page to 10 items, on the next page the indicator color doesn't appear.

This is for item 1-10 (Page of 1) enter image description here

This is for item 11-20 (Page of 2) enter image description here

How do I make the color indicator on the next page remain the same as on the first page display ???

Thanks..

0

If you use js code to change the background color of item,it wil only be executed once without additional triggers.The next page should be an asynchronous request,it will not refresh the page,so the color will not change.
I recommand you to use CSR code. Test demo:

<script>
(function () {
    var overrideCurrentContext = {};
    overrideCurrentContext.Templates = {};
    overrideCurrentContext.OnPostRender = renderItem;        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCurrentContext);
})();    
function renderItem() {
    
    
        var rows = ctx.ListData.Row;
        for (var i = 0; i < rows.length; i++) {
            var status = rows[i]["status"];            

            var rowId = GenerateIIDForListItem(ctx, rows[i]);
            var row = document.getElementById(rowId);
            if (row != null && status=="Pending" ) {
                row.style.backgroundColor = '#ffcccc';
            }    
        ctx.skipNextAnimation = true;
    }
   
}    
</script>

Test result: enter image description here enter image description here CSR list view reference:https://www.codeproject.com/Articles/620110/SharePoint-Client-Side-Rendering-List-Views

5
  • Hi @Amos_MSFT, thanks for ur response. Your code I was recently on site assets or what? because I have never used CSR before on sharepoint. Please help
    – Kfajar
    Oct 17 '20 at 10:21
  • I create a script editor web part and add the code into it.
    – Amos
    Oct 19 '20 at 1:41
  • Hi @Amos_MSFT: I have entered the code in the script editor web part. but there was no result. Please review my code below this:
    – Kfajar
    Oct 19 '20 at 11:44
  • function renderItem() { var rows = ctx.ListData.Row; for (var i = 0; i < rows.length; i++) { var Alert Zone = rows[i]["Alert_x0020_Zone"]; var rowId = GenerateIIDForListItem(ctx, rows[i]); var row = document.getElementById(rowId); if (row != null && Alert Zone=="Zone 1" ) { row.style.backgroundColor = '#e74c3c'; } if (row != null && Alert Zone=="Zone 2" ) { row.style.backgroundColor = '#f4d03f'; } if (row != null && Alert Zone=="Zone 3" ) { row.style.backgroundColor = '#7dcea0'; } ctx.skipNextAnimation = true;}}
    – Kfajar
    Oct 19 '20 at 14:53
  • There is a space in the variable name ‘Alert Zone’ you use.You could try to debug the code,The code does not seem to have any other problem.
    – Amos
    Oct 22 '20 at 6:33

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.