• Ritika Agarwal

Color Code Data in Entity List - Power Apps Portals

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.

Recent Posts

See All

Multi-Select Checkbox in Canvas Apps

In this blog post, I will walk through the steps that can be followed to create multi-select checkboxes in Canvas Apps. This will enable using the same control for Vertical and Horizontal orientation.

Get All the New Posts to Your Inbox
© 2020. Ritika Agarwal
  • LinkedIn
  • Twitter