Power Apps Gallery Conditional Formatting + Examples

Power Apps Gallery Conditional Formatting allows users to highlight or style the values based on specific criteria so users can easily understand the purpose of the values in the Power Apps gallery.

In this article, I will explain how to apply conditional formatting in Power Apps gallery control with some below stuff:

• Power Apps Gallery Conditional Formatting based on Text Value
• Apply Power Apps Gallery conditional formatting based on the SharePoint Date field
• Power Apps Gallery Conditional Formatting by a Number field
• Power Apps Gallery Conditional Formatting based on SharePoint Choice field
• Power Apps Gallery Change Color Based on Value Conditionally
• Power Apps Gallery Add Emojis Based on the Condition
• Power Apps Gallery Conditional Formatting on SharePoint Person field
• Power Apps Gallery Template Fill Based on Conditional Formatting
• Power Apps Gallery Hover Show Text

Power Apps Gallery Conditional Formatting

In Power Apps, conditional formatting allows us to change the gallery’s appearance based on specific conditions dynamically.

For example, we can change the background colors, font color, and font weight and add related icons and emojis based on some criteria.

The example below shows how the Power Apps gallery looks after applying conditional formatting.

I have a SharePoint list named Tracking Project Tasks with these many fields below:

Now, I would like to format the Power Apps gallery using these SharePoint fields based on some criteria.

Build the Power Apps Gallery:

If you don’t know how to create the PowerApps gallery and connect it with the SharePoint list, follow the below steps.

1. In Power Apps, create one blank app-> click +Insert tab -> select Vertical gallery.

2. In the select a data source pop-up screen -> select the SharePoint list. Or provide the SharePoint list name in the Items property of the gallery.

3. Adjust the gallery in the app, like changing the layout.

4. By default, only a few columns were added to the gallery, so add the remaining columns. For that,

5. Click the Edit gallery symbol of the Power Apps gallery -> From the +Insert tab -> select the Text label control of how many columns you have in the SharePoint list

6. Set the Text property of the text label with “ThisItem.StartDate“. This will display the start date on the text label.

7. Like the above, for the remaining columns, add the formulas below to the Text property of each text label.

ThisItem.EndDate                                     //for end date column
ThisItem.'Assigned To'.DisplayName   // for assigned to
ThisItem.'Assigned To'.Picture               // for getting image
ThisItem.'Complete%'& "%"                      //for completie%
ThisItem.Status.Value                            //for status column
ThisItem.Priority.Value                           // for priority column
ThisItem.'Task Outcome'.Value           //for task outcome column
ThisItem.'Task type'.Value                    // for task type column

Note:

For choice columns, if you taken modern control [Badge] put the formula of this column in the Content property.

After all the adjustments, the Power Apps gallery may look’s like in the below one.

Power Apps Gallery Conditional Formatting based on Text Value

Here, we will see how to implement conditional formatting based on the Power Apps gallery text values.

In the gallery below, there is a text label [Task Name] and a Badge control [Priority]. Whenever the priority value is High, the task name will be underlined. If the Task name is Medium or anything else, nothing will change.

1. Provide the below formula on the Underline property of “Task Name.”

If(ThisItem.Priority.Value="High",true,false)

This formula will make the underline visible only for the task name which has high priority.

2. Now, look at the image below. The underline was displayed only for the task name, which has the priority value “High.”

Apply Power Apps Gallery conditional formatting based on the SharePoint Date field

Now, we will see how to implement the conditional formatting on the Power Apps gallery date field.

In the gallery below, there are two SharePoint date fields [Start Date, End Date] and Badge control [Status]. For those two date fields, we’ll do formatting based on below conditions:

• Add a warning icon if the Start Date value is in the last month and the Status value is In Progress.
• Change the font color of the End Date to alert the user if the end date is within 7 days.

Conditional Formatting on Start date in Power Apps galleries:

Here, we’ll format the start date field. If the Start date value is in the previous month and the Status value is In Progress, display the warning icon.

Look at the formatted start date in the below PowerApps gallery.

Follow the steps below to format the start date field in the PowerApps gallery.

1. Click the edit button of the gallery.

2. Add a “warning” icon from the +Insert button

3. Put the below formula on the Visible property of the icon.

If(Month(ThisItem.StartDate)<Month(Today()) && ThisItem.Status.Value="In Progress",true,false)

Here, Month() will check the start date and the current month. If the start date is less than the current month and the “Status” value is “In Progress,” a warning icon will be visible.

4. While previewing the app. you’ll see the icon is visible only if the start date is in the previous month and the status is “In Progress.”

Conditional Formatting on End Date in Power Apps gallery:

Here, we’ll see conditional formatting for the end date. If the end date is within 7 days, we’ll change the font color to red.

1. Put the formula below on the Color property of the End Date.

If(DateDiff(Today(), ThisItem.EndDate) <= 7, Color.Red)

Here, the DateDiff() will check the date difference between the current date and the end date. If it is less than or equal to 7, set the color property to “Red.”

2. In the image below, look at the marked end dates. The color changes only for the dates that satisfy the condition.

OR

if you want to show the icon next to the end date, instead of the changing format. You can use the formula below on the Visible property of the icon.

If(DateDiff(Today(), ThisItem.EndDate) <= 7, true, false)

Power Apps Gallery Conditional Formatting by a Number field

In this section, I will explain conditional formatting on the number field in the PowerApps gallery.

In the galley below, I have a number field[Complete %]. I’m adding a progress bar control to visualize the task’s completion percentage.

Based on the percentage value, I’m changing the progress bar color. Look at the condition table below.

To add the progress bar into the gallery. Click the Power Apps gallery Edit symbol. Then follow the below steps.

1. Select the Progress bar control from the +Insert tab.

2. Set the Value property of the progress bar to the formula below.

ThisItem.'Complete%'

Here, change the “Complete%” to your column name. This formula will fetch the complete percentage values into the progress bar.

3. Provide the below formula on the BasePaletteColor property of the progress bar.

If(
    ThisItem.'Complete%' < 50,
    Color.Red,
    If(
        ThisItem.'Complete%'>= 50 && ThisItem.'Complete%'< 75,
        Color.BlueViolet,
        Color.Green
    )
)

This formula changes the color of the progress bar based on the value of the completion percentage.

Save and preview the app. Now, the progress bar color is changed according to the percentage value.

Power Apps Gallery Conditional Formatting on SharePoint Choice field [With Icons]

Here, I’m explaining how to do conditional formatting on choice values with icons. In my PowerApps gallery below, I have Badge control[Task Type].

For the “Task type” values, we’ll display related icons next to them. So users can easily understand the purpose of task-type field values.

Follow the below steps, to add icons based on SharePoint choice field values.

1. Click the Edit button of the Power Apps gallery -> Add icon from the +Insert tab.

Here, for the “Testing” value, I’m adding this Bug icon.

2. Add the below formula in the Visible property of the icon.

If(ThisItem.'Task Type'.Value="Testing",true,false)

It will make the icon visible next to the value. Change the ‘Task Type’ to the respective column name in your SharePoint list.

Look at the example below; the icon is visible only for the value “Testing” of the task type.

Like this, add an icon according to the task type value. Use the formulas below in the Visible property icons.

If(ThisItem.'Task Type'.Value="Technical",true,false)

If(ThisItem.'Task Type'.Value="DataEntry",true,false)

If(ThisItem.'Task Type'.Value="Review",true,false)

If(ThisItem.'Task Type'.Value="Report",true,false)

Then save the changes and preview it once; you’ll see the different icons next to the task type values, as in the starting example.

PowerApps Gallery Change Color Based on Value Conditionally

In this section, we’ll see changing the background color based on a condition. In the below PowerApps gallery, there is a Badge control[Status].

Based on the Status values, I’m changing the background color; if the status value is,

• Completed -Green color
• In Progress – Red color
• Started-Orange color

Like, as shown in the example below.

This visual can help users quickly understand the status of each item without reading detailed information.

NOTE:

I had taken modern control[Badge] for the choice column of the SharePoint list in the Power Apps gallery. Keep Color property as “Brand”.

1. Put the below formula in the BasePaletteColor property of the Status.

Switch(
    ThisItem.Status.Value,
    "Completed",RGBA(0, 128, 0, 1),
    "Started", RGBA(255, 165, 0, 1),
    "In Progress",RGBA(255, 0, 0, 1)
)

Here, the Switch() checks the single expression against multiple cases and changes the color based on matching values. You can also use the Color property instead of RGB values.

2. Now, save and preview the app once; you’ll see the different background colors for different values.

Like this, you can change the background color of gallery items based on conditions.

PowerApps Gallery Add Emojis Based on the Condition

Here, we’ll see how to add based on the condition for the PowerApps gallery items. Emojis can convey information quickly and effectively, and it improves the user experience.

In the PowerApps gallery, there is a Badge control[Status]. Based on status values, we’ll add related emojis.

Let’s get started!

1. In the gallery, click Edit gallery symbol-> click +Insert tab -> Select Text label. Keep this text label next to the status value.

2. Set the Text property of the text label to the below formula.

Note: To add Emojis between the formulas, on the keyboard, click “Window” + “.“

Switch(ThisItem.Status.Value,"Completed","😊","Started","😐","In Progress","😒")

Save the changes and preview the app. The emojis were added next to the status value.

Power Apps Gallery Conditional Formatting on SharePoint Person field

Here, we’ll see how to use conditional formatting on a SharePoint Person column in a PowerApps gallery.

There is a SharePoint person field [Assigned to]in the below PowerApps gallery. If the person is the current user, we’ll change the font color of the person’s name. As in below,

Let’s get started to implement conditional formatting on the person field.

1. Put the below formula in the FontWeight property of the person field in the gallery.

If(ThisItem.'Assigned To'.DisplayName=User().FullName, FontWeight.Bold,FontWeight.Normal)

This formula will change the font weight for only the current user name.

2. Then, to change the font color, put the formula below in the Color property of the person field in the PowerApps gallery.

If(ThisItem.'Assigned To'.DisplayName=User().FullName,RGBA(255, 165, 0, 1)
, RGBA(0, 0, 0, 1))

After saving the changes, you’ll see the font color changed for the current user.

PowerApps Gallery Template Fill Based on Conditional Formatting

In PowerApps, we can use conditional formatting to dynamically change the color of items in a gallery based on values. This can be useful to differentiate the items visually.

In the PowerApps gallery below, there is a Badge control [Task Outcome]. Based on the below conditions, we’ll change the background color of the galley rows.

• If the task outcome is “Completed,” a green color
• If the task outcome is “Failed,” the red color

This will help the users to quickly identify the task outcome of each item in the gallery. Let’s get started!

1. Provide the below formula in the TemplateFill property of the PowerApps gallery.

Switch(ThisItem.'Task Outcome'.Value,"Success",Color.LightGreen,"Failure",Color.Red)

The Switch() will check the Task outcome with multiple values and set the background colors for the matched values.

2. Save the changes and preview the app. The gallery rows’ background colors will change according to the task outcome value.

PowerApps Gallery Hover Show Text

In Power Apps, we can improve the user experience by adding a hover effect on the text within a gallery. This feature allows you to provide additional information about each item.

In the PowerApps gallery below, for the “Task Name” text label, I’m displaying the “Task Description” while hovering over it.

Let’s start the implementation of displaying the “Task Description” while hovering on the “Task Name.”

1. Put the below formula in the Tooltip property of the “Task Name.”

ThisItem.'Task Description'

This formula makes the task description visible while hovering over the task name.

2. Set the HoverFill property to some color name or RGB value.

RGB(255, 165, 0)   or   Color.Orange

3. After saving the app, preview it once. Now, move the cursor to the task name, then its respective task description will display.

I hope you understand all the examples of conditional formatting on PowerApps galleries that I have shown above.

In this article, I have explained various ways to do conditional formatting, such as changing the font color and adding different icons, emojis, and background colors.

Moreover, you may like some more Power Apps articles:

• Power Apps WeekNum and ISOWeekNum Function
• PowerApps Play Video From SharePoint
• Power Apps Barcode Reader Control
• Power Apps Camera Control
• Power Apps CRUD Operations
• PDF Viewer Control in Power Apps

Bijay Kumar

After working for more than 18 years in Microsoft technologies like SharePoint, Microsoft 365, and Power Platform (Power Apps, Power Automate, and Power BI), I thought will share my SharePoint expertise knowledge with the world. Our audiences are from the United States, Canada, the United Kingdom, Australia, New Zealand, etc. For my expertise knowledge and SharePoint tutorials, Microsoft has been awarded a Microsoft SharePoint MVP (12 times). I have also worked in companies like HP, TCS, KPIT, etc.