Display an Image in a PowerApps Gallery, Conditionally

PowerApps

As I develop apps, I am constantly looking for ways to enhance the data that’s there. I enjoy using images as a way to draw attention to specific records and provide more detail, at-a-glance,

In this sample app, I use a simple image (the red exclamation mark) to signify a high priority incident record.

Gallery with circled image signifying a priority record

Gather and Upload the Image

I created the image with a transparent background in Adobe Photoshop. I could have used Illustrator, PowerPoint, Paint or some other tool to create the simple image.

To upload an image in PowerApps:

  1. Click File.
  2. Click Media.
  3. Click Browse. Locate and select the saved image.

Use a Media Image in a Gallery

To display a media image in a gallery, be sure the gallery layout you have selected includes an image control. If it doesn’t, switch to gallery that does have an image control. To add the media image:

  1. Select the gallery.
  2. In the properties panel, click the Edit option, adjacent to Fields.
  3. Click the image control’s drop-down box and select the media image.

These steps add the image to the image control for every record.

In my sample app, all records are not high priority, only some are high priority. I can direct my app to only display the image for certain records using a simple formula.

Use a Media Image in a Gallery, Conditionally

To display a media image in a gallery, conditionally:

  1. Review your datasource and find a field or column that contains the conditional information you need. In my sample app, there is a column named Importance in the datasource.
  2. Expand the gallery in the app navigator panel on the left side of the screen.
  3. Click the image control.
  4. Select the image control’s image property and enter the following code:

    If(“high” in Importance, ‘exclamation’)

Swap the word high with the text your app should find. Swap the column name Importance with your field or column name and swap the word exclamation with the name of your media file. Do not include the extension (.png, .svg, etc.) of the media file in this formula.

That’s it! With a little planning and a short formula, you can conditionally display media images in your PowerApps galleries.