Power Apps gallery conditional formatting
In Power Apps, a gallery is my favorite way of displaying a list of things. Whether it’s a list of items from SharePoint, a list of documents, or a list of database records, it’s an extremely flexible control to use for this purpose. Just like in Excel and SharePoint, conditional formatting can be done, on a list of things in a gallery. In this post, 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:
- Decide which control to format.
- Decide which property of the control to format.
- 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.
Do you have an example of how to make text in a column be a link (with parameters that are values in the list item)? We can do that with HTML in a Calculated column in on-prem sites, but not online sites.
Yes, April shows a way here. https://www.sharepointsiren.com/2019/03/open-powerapp-sharepoint-formatting/
Any Ideas on Conditional Formating on Parent Gallery, based on Child nested Gallery?
Hi, Laura … I’ve found that conditional formatting works in Power Apps forms if I access the forms directly (ie, /site/list/Forms/EditForm.aspx?ID=222) … but when I access the same form (is it the same form?) via “Properties” in the list item’s flyout menu so that it pops ups as a blade form … the conditional formatting doesn’t work. Have you ever come across this? (I’ve been trying to use this so that setting a field to a particular value causes several sub-fields to become visible.)
I usually avoid using customized list forms because of stuff like this. Use standalone Power Apps and use a variable for the form’s current record. I teach all of that in extreme detail in my advanced Power Apps course.
Hi Laura, How do I format numbers within a range? i.e. between 24 & 76 Black otherwise red.
I just wanted to say thank you.. this one helped me big time
First how to that clearly explains exactly what to do AND WORKS! Thank you
So so awesome, do you have any course designed which one can take to learn power apps?
Hi Rajnish, yes, I recommend my plan called “Power Apps & Power Automate” https://www.iwmentor.com/pages/plans
is there a way to do conditional formatting to elements on the canvas just based on logical conditions on the data. for example: we have textInput taking input for the ID field and we want to make an icon on the canvas green when (DataSource.ID == textInput.Text, and, DataSource.Column1 == ‘YES’. I hope I was able to convey my question.
Sure, yes, it’s just = and not == for the syntax
Any way to get the formatting to happen prior to saving and reopening the form. it looks like the logic doesn’t kick in until the form is reopened. Is there something I can do to have the fill color change instantly before saving?
In my example, the form is on a different screen, so there isn’t a way that this could happen if it’s a live list of data in your gallery. If your gallery is showing a collection, then I guess that item would have to be re-collected, or if not try adding just a refresh action?
Hi Laura, do you have an example where you can compare a specific time (let’s say 09:00) with a time stamp 09:02 or 08:59? Based on the time stamps (earlier or later than the specific time) to conditionally format the row
No, I’ve never tried that. If you have the data, like the date/time of each item, it does seem feasible to accomplish, though.