In this blog post, I will walk through the steps you can follow to add more details to data in an Entity List by adding color codes to the rows based on values of a column.
Problem Statement
How to highlight rows based on data in Entity List in Power Apps Portals? How to color code the rows inside a grid in Power Apps Portals? How to update styling of rows based on certain values inside columns.
Solution
To add colors to rows based on data inside the column, you can add a script on the web page to update the styling of the grid rows.
Scenario: Let's take an example of Candidate Recruitment System and we want to highlight the rows based on the status of Candidate's application.
Column to Check:
Physical Name: Status Reason
Logical Name: statuscode
Script:
$(document).ready(function () {
$(".entitylist.entity-grid").on("loaded", function () {
$(this).children(".view-grid").find("td[data-attribute='statuscode']").each(function (i, e){
var value = $(this).data(value);
if(value.value.Value == 1)
{
$(this).closest('tr').css("background-color", "#85C1E9");
}
else if(value.value.Value == 360680000)
{
$(this).closest('tr').css("background-color", "#F7DC6F");
}
else if(value.value.Value == 360680001)
{
$(this).closest('tr').css("background-color", "#F1948A");
}
else if(value.value.Value == 360680002)
{
$(this).closest('tr').css("background-color", "#D4EFDF");
}
else{
$(this).closest('tr').css("background-color", "#ffffff");
}
});
});
});
Explanation:
#1: $(".entitylist.entity-grid").on("loaded", function () { : This function triggers when the entity list is loaded.
#2: $(this).children(".view-grid").find("td[data-attribute='statuscode']").each(function (i, e){ : statuscode is the name of column that will be used to filter the value. It will iterate over all the rows inside the grid.
#3: var value = $(this).data(value); : value is a variable that stores value returned for the statuscode column specified in #2.
#4: if(value.value.Value == 1) : value.value.Value extracts the value (Unique value for the option) of option set and here, we can add multiple conditions based on requirement using if, else if and else conditions.
Note: If value.value.Value is not fetching the right value, you can print the value variable in console and pick the value from there.
#5: $(this).closest('tr').css("background-color", "#85C1E9"); : It identifies the nearest 'tr' element (which specifies the row element inside a table) and updates it background color to specified color value.
DEMO
In this post we saw how to update the background color of rows inside an Entity List in Power Apps Portals. This helps in scenarios where we want to highlight some rows based on the data (Important Data highlighted).
I hope this was useful for you. In case of any questions or suggestions, feel free to reach me out on twitter at @agarwal_ritika.