Add icons to all records of a view based on a condition in Power Apps

Photo by Harpal Singh on Unsplash

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 are of types single line of text and option set 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 Web resource
• Result

Setting up Entity and Fields:

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

Fields

Set up Icons:

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

Web resource and icon

Set up a Web resource:

Create a web resource of name custom icon in view and gave type as JScript. And 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 option set field. We have put a condition using the option set value. I have created a switch case with the option set values. Inserting an icon needs two values, image tooltip and web resource name. Have to use logical name for web resource name. Both tool tip and web resource name returned as an array.

Views List

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

Editing view

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

Add web resource to the view

Result:

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

View Column with custom icons

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

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