Add Icons To All Records Of A View Based On A Condition In Power Apps

Adding custom icons to the list view using Javascript.

Have you ever thought of inserting an icon to all records in a view based on a condition. Here I have a table with some fields like name and gender of types single line of text and optionset respectively. The icons will be displayed based on the gender option.

To achieve this we have to accomplish the following steps.

• Setting up Entity and Fields
• Set up Icons
• Set up a Webresource
• Result

Setting up Entity and Fields

I have an entity named Personal Details. I have used the default name field and created a new optionset field gender with two options male and female. Save and publish.

 

Set up Icons

For setting up icons I have created two web resources named male and female and the type is png. And uploaded the icon I wish to use for the view. I have used an icon from the internet which is of size 16x16(recommended).

Set up a Webresource

Create another web resource of name custom icon in view and gave type as JScript. Add a function with two parameters rowData and userLCID. rowData retrieves the metadata for each row. userLCID gets the Language Code for current user. First parse the data which we got from the rowData and assign it to a variable. The field values are inside the data object. we can get the field value by data.c99_gender_Value(data.fieldname_Value).

function addIconToView(rowData, userLCID) {
  var data = JSON.parse(rowData);  
  var gender = data.c99_gender_Value;  
  var imgWebResource = "";  
  var imgTooltip = "";  
  switch (gender) {  
    case 10:  
      imgWebResource = "c99_male_icon";  
      imgTooltip = "Male";  
      break;  
    case 11:  
      imgWebResource = "c99_female_icon";  
      imgTooltip = "Female";  
      break;  
  }  
  return [imgWebResource, imgTooltip];
}  

As the value is from the optionset field we have put a condition using the optionset value. I have created a switch case with the optionset values. Inserting an icon needs two values image tooltip and web resource name. Have to use logical name for web resource name. Both tooltip and web resource name are returned as an array. You must use the value for the optionset instead of the text values

To add Webresource to the view, select a view from the list and click on more options. The view manager page opens up. Select the column you want to add icons → click Change Properties 

Change Properties opens up → select the Webresource and enter the Function name → Click Ok. Then publish all the customizations.

Result

Navigate to the view and hit refresh button, the icon appears in the gender column in the view.

As of now adding the Webresource to the view option is in classic mode only. This feature may be updated in the upcoming Power Apps releases

Hope this helps you. I have attached the Microsoft documentation for your reference here