Display rules on a list view

API & Customization Show & Tell
1

Hi all, I’ve written a small piece of code for adding display rules to (the first entry in) a list view. The ‘data[0]’ specifies that it’s the first entry. I’m sure with a small amount of tweaking (perhaps a loop) this could be adjusted to make changes to the whole view.

So in my case, I’ve retrieved the value for field_yyy in the first record in the list and appended different classes (gold, silver or bronze) depending on the value of that field.

$(document).on('knack-view-render.view_xxx', function(event, view, data) {
  let savingsRate = parseFloat(data[0].field_yyy)
  const savingsRateHTML = document.querySelector(".field_yyy .kn-detail-body");
  if ( savingsRate > 50) {
    savingsRateHTML.className += " gold";
  } 
  else if (savingsRate > 30) {
    savingsRateHTML.className += " silver";
  }
  else if (savingsRate > 10) {
    savingsRateHTML.className += " bronze";
  }
  else {
    savingsRateHTML.className += " black";
  }
})

I then used CSS to define the colours of these entries in the list view.

.gold {
    color: #ffd700;
}
.silver {
    color: #c0c0c0;
}
.bronze {
    color: #cd7f32;
}

Which colours the value of the field as required :slight_smile:

Screenshot 2022-03-03 at 19.29.51

I’m new to coding so please let me know if there are any obvious improvements to how this can be done.

4 Likes
2

Hi Harry, I have a use-case for that, but instead of checking a number it is a text (steps in a process).

How should I modify the code?

tks