Conditional formatting in a PowerApps gallery

Just like in a SharePoint list, you can format the display of list of items in a Power Apps gallery.

In this post, we’ll look at a couple of examples that we’ve configure, after reading a post by Laura Rodgers I’ll show you a few examples to give you ideas of how you can set up formatting in your own Power Apps. In my example, my list is a custom SharePoint list, full of tasks. If you’re not familiar with the concept of a gallery, here’s Microsoft’s documentation.

Here are the basic steps first:

1. Decide which control to format.
2. Decide which property of the control to format.
3. Go to that property, and write an IF function, or a SWITCH.

Concept 1: Text Color

In this example, I’ve got a label control that displays the status of each task, and the status in SharePoint is a choice column. The goal is to display different statuses in different colors. Click on the status label in the first row of the gallery, and at the top of the screen, select the Color property, so that you can type in the function box.

There are several different ways to indicate colors in PowerApps, but in this example I’m just typing the color names. If the status (a SharePoint choice column) is completed, show green, otherwise black.

If(ThisItem.Status.Value=”Completed”, Green, Black)

If you have multiple statuses and therefore need to set up multiple colors, the most efficient formula to use, is the SWITCH, which is similar to IF. In this below example, if it’s completed show green, if in progress, purple, and if not started show orange, otherwise if none of those are the case, the color will be black.

Concept 2: Bold Font

In this example, the goal is to display the text in a bold font, based on a condition. I’ll use the condition of the currently logged in user. If the task is assigned to the current user, the user’s name will be displayed in a bold font weight.

Click to select the label in the first row, that shows the “Assigned To” person’s name (a SharePoint person column). Select the FontWeight property.

If(ThisItem.’Assigned To’).Email = User().Email, FontWeight.Bold, FontWeight.Normal)

Concept 3: Switch Icons

In this next example, we’ll work with the priority column. I’d like to display a different icon for each of the 3 different priority levels.

With your cursor in the first row of the gallery, go to the Insert tab, click Icons, and choose an icon. You can switch this icon to something else, and see a list of icons over in the properties panel on the right. Decide which icons you would like to use for each of the three statuses. There is a property called Icon on the icon, which tells you its name.

In this formula, since I have a few different priorities (a SharePoint choice column), I’ll use the switch function.

Concept 4: Fill Color

Most every type of control in a Power App, has a Fill property, for the fill color. In this example, I’ll insert a circle into my gallery, and I want it to show as a different color depending on the priority. I’ll change the color of the icon control to white, and move the circle so that it shows behind the icon. Here you can see the Switch function is useful again. If it’s high priority, show as red, if normal, orange, and otherwise blue.

Concept 5: The row background color

In this example, if the status (a SharePoint choice column) is equal to “In progress” show as yellow, otherwise white. To set the row’s background color, select the whole gallery, and go to the property called TemplateFill.

If(ThisItem.Status.Value=”In Progress”, LightYellow, White)

Concept 5: Disable a button

You can change the DisplayMode of any control, based on a condition. When you disable a button, by default it will show as grey, so that the button is still there, but clearly not clickable. In this example, I’ll use a button control, and I’ll disable it if the task has been completed. Select the button, go to the DisplayMode property, and here’s the formula:

Concept 6: Font Color if Overdue

This one is the same as the first concept with the text color, but I’m just showing a specific example of displaying a date as red if the task is overdue. Two different conditions. The due date has passed, and the task has not been completed. Select the date label in the gallery, and go to the color property:

I recorded an hour long video of all of this, on my live Power Hour a couple of weeks ago, here it is. There are a few extras in here, like when I show how to click a button to open a task form in front of the gallery, and when I show how to set up the gallery to display with that purple line in between rows.