7 Power Apps Gallery Conditional Formatting Examples

7 Power Apps Gallery Conditional Formatting Examples

With conditional formatting, we can use colors and symbols to explain the meaning of values in a Power Apps gallery. For example, we can make positive values the color green to show success. And make negative values the color red to signal a failure. Any type of formatting is possible once you learn to use IF statements. In this article I will show you how to perform conditional formatting in a Power Apps gallery.



Table Of Contents:

Introduction: The Employee Training App
Setup The SharePoint List
Create A New App With A Gallery

Conditional Formatting With Text Criteria ExamplesFormatting A Single Text ValueFormatting Multiple Text Values
 
Conditional Filtering With Number Criteria ExamplesFormatting With A Single Number CriteriaFormatting With Two Number CriteriaFormatting With Many Number Criteria

Conditional Filtering With Gallery Row Colors

Conditional Filtering With EmojisFormatting With Checks And Xs EmojisFormatting With Happy And Sad Face Emojis




Introduction: The Employee Training App

Workers at a construction company use the Employee Training App to take online courses and view their progress. The app uses conditional formatting to make it easy to identify a passing score vs. a failing score.




Setup The SharePoint List

Create a SharePoint list named Employee Training with the following columns:

  • Title – default column
  • Employee – person type
  • Score – number type
  • Status – choices type (Not-Started, In-Progress, Passed, Failed)



Add these items to the SharePoint list:

TitleEmployeeScoreStatus
Safety TrainingMatthew Devaney70Passed
I/T Security ExamMatthew Devaney95Passed
Ethics & Fraud TrainingMatthew Devaney35Failed
Job Skills AssessmentMatthew Devaney80Passed
Diversity TrainingMatthew DevaneyIn-Progress
Forklift CertificationMatthew DevaneyNot Started

Open Power Apps Studio and create a new phone app from blank. Insert a blue rectangle shape at the top of the screen and place a label with the words “Employee Training” over top of it.



Add a connection to the Employee Training SharePoint list. Then insert a gallery and select the Employee Training SharePoint list as the datasource.



Place two new labels and a button into the gallery to show the Title, Score and the Status of each Employee Training record.



Use this code in the Text property of the controls

ThisItem.Title  //lbl_Title
ThisItem.Score  // lbl_Score
ThisItem.Status.Value  //lbl_Status




Conditional Formatting With Text Criteria Examples

The following examples show how to perform conditional formatting using text values in the criteria.

Formatting A Single Text Value

Give the status button a green fill when Status equals “Passed”



Use this code in the Fill property of the btn_Status.

If(ThisItem.Status.Value="Passed", Green, RGBA(56, 96, 178, 1))


Formatting Multiple Text Values

Make the status button green when Status equals Passed, red when Status equals Failed, yellow when Status equals In-Progress and gray when Status equals Not Started.



Use this code in the Fill property of the btn_Status.

If(
    ThisItem.Status.Value="Passed",
    Green,
    ThisItem.Status.Value="Failed",
    DarkRed,
    ThisItem.Status.Value="In-Progress",
    GoldenRod,
    ThisItem.Status.Value="Not Started",
    Gray
)




Conditional Filtering With Number Criteria Examples

The following examples show how to perform conditional formatting using number values as the criteria.



Formatting With A Single Number Criteria

Color any training scores less than 50 red.



Use this code in the Color property of lbl_Scores.

If(ThisItem.Score < 50, Red, Black)


Formatting With Two Number Criteria

Show any training scores greater than or equal to 50 as green and any numbers less than 50 red.



Use this code in the Color property of lbl_Score.

If(ThisItem.Score >= 50, Green, Red)


Formatting With Many Number Criteria

Make the score text green when Status is greater than or equal to 80, yellow when the Score is equal or greater than 50 or red when the Score is less than 50.



Use this code in the Color property of lbl_Score.

If(
    ThisItem.Score >= 80,
    Green, ThisItem.Score >= 50,
    GoldenRod, Red
)

Highlight a gallery row with the color yellow when a Score is less than 50.



Use this code in the TemplateFill property of the Gallery.

If(ThisItem.Status.Value="Failed", PaleGoldenRod, Transparent)




Conditional Filtering With Emojis

The following examples show how to do conditional formatting using Emojis.



Formatting With Checks And Xs Emojis

When a Score is greater than or equal to 50 show a ✅ emoji and display a ❌ when a Score is less than 50.



Use this code in the Text property of lbl_Score. To access the emoji menu in Windows press the hotkey combination [Windows Key] [Period].

If(
    ThisItem.Status.Value = "Passed",
    "✅",
    ThisItem.Status.Value = "Failed",
    "❌"
)


Formatting With Happy And Sad Face Emojis

Display a 😊 emoji when a Score is greater than or equal to 50 and show a 😢 when a Score is less than 50.



Use this code in the Text property of lbl_Score. To access the emoji menu in Windows press the hotkey combination [Windows Key] [Period].

If(
    ThisItem.Status.Value = "Passed",
    "😊",
    ThisItem.Status.Value = "Failed",
    "😢"
)





Questions?

If you have any questions about 7 Power Apps Gallery Conditional Formatting Examples please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.

Matthew Devaney

Subscribe
Notify of
guest
4 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Jonathan
Jonathan
1 month ago

Hi Matthew – just wanted to say that I really enjoy your posts, please keep them coming! Also, I’m curious why you didn’t use the Switch function for Formatting Multiple Text Values section instead of your nested if/then statement, ie:

Switch(
ThisItem.Status.Value,
“Passed”, Green,
“Failed”, DarkRed,
“In-Progress”, GoldenRod,
“Not Started”, Gray
)

I know that the switch function is limited, but in this case, it seems perfect. Am I missing something?

Cam
Cam
27 days ago

Still waiting for the day powerapps adds a “template hover fill” value. There is only so much you can to with a button element for an overlay.

Last edited 27 days ago by Cam