• 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

Change Favicon in Power Apps Portals

In this blog post, I will walk through the steps to set your desired icon on a Power Apps Portal App. Problem Statement How to add an icon to the Power Apps Portal App? How to add an icon for all page

Main Form for Power Apps Portals

In this blog post, I will walk through the steps required to manage main forms for Entity Forms in Power Apps Portals without having to show them in Model Driven Apps. Problem Statement How to restric

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