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.

conditional formatting powerapps gallery

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

ColumnData type
Task NameTitle(Default)
Assigned ToPerson or Group
StartDateDate and Time
EndDateDate and Time
PriorityChoice(High,Low)
StatusChoice(Started, Completed, In progress)
Complete%Number
Task TypeChoice(Technical,Data Entry,Reporting,Testing,Review)
Task DescriptionMultiline Text
Task OutcomeChoice(Success, Failure)
powerapps gallery conditional formatting

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.

power apps gallery conditional format

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

powerapps gallery conditional formatting

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.

conditional formatting in power apps gallery

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.

See also  Power Apps Timer Control Examples

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.

formatting the power apps gallery

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.

conditional formatting in power apps

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.

power apps gallery conditionally formatting on date

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

1. Click the edit button of the gallery.

conditional formatting on power apps gallery

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

power apps gallery items based on condition

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.

powerapps gallery conditionally format the date

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.

powerapps change color based on the conditional formatting

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.”

Power apps gallery formatting date field

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

powerapps change color based on the conditional formatting

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.

See also  How to get email address from name in Power Automate

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

ConditionColor
if (completion % < 50)Red
if(completion%<=50 && < 75)Blueviolet
if(completion% > 75)Green
Look at the formatted gallery below.
powerapps gallery conditonal formatting progress bar based on value

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.

power apps gallery change color conditionally based on value

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.

powerapps change label fill color based on value

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.

powerapps gallery format color on progress bar based on value

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.

powerapps browse gallery conditionally formatting

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.

power apps gallery conditional formatting with icons

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.

power apps gallery condidtional formatting on choice field

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

powerapps gallery conditional format with icons

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.

powerapps change fill color based on value conditionally

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.

powerapps change color of gallery item based on value

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.

See also  How to Add Multiple Lines in Power BI Line Chart?

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

powerapps gallery conditional formatting with emojis based on value

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","😒")
powerapps gallery add emojies conditionally

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,

conditional formatting in the powerapps gallery

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.

powerapps change font color based on value

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))
powerapps change color based on value conditionally

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
powerapps change the color of gallery item conditionally

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.

powerapps gallery row background color

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.

PowerApps Gallery Hover Show Text

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.

power apps gallery formatting

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:

>