Power Apps Gallery 7 Conditional Formatting Techniques

Power Apps Gallery: 7 Conditional Formatting Techniques

Power Apps Gallery: 7 Conditional Formatting Techniques


In this blog post, we delved into the intricate process of creating a dynamic database in Power Apps. We learned how to effectively represent multiple lines of text for task titles, make task status choices, assign tasks to persons/groups, and connect the app to a data source. By incorporating galleries, we enabled a visual representation of the data, and through conditional formatting, we’ve added an enhanced user experience. We applied techniques to:

  1. Change the background color based on task status.
  2. Modify the font weight and size for selected gallery items.
  3. Toggle icon visibility for selected items in the gallery.
  4. Hide specific rows based on conditions.
  5. Apply a strikethrough effect to completed tasks.
  6. Modify text color based on values.
  7. Alter border thickness and color for selected labels.

Create a database:

  • Task title(multiple lines of text) 
  • Task status(Choice) 
  • Task assigned date (Date & Time) 
  • Task assigned to(Person & group) 
Database creation illustration in Power Apps.

Now, connect your app with the data source.


Add a gallery and connect it with database   

Gallery connected to a database in Power Apps.

For the title of gallery use this code on the text property of the title .

In-Gallery task display example.

Similarly for subtitles use this code .

Gallery status visualization.

1.change background color based on status task:

For this purpose we use this code on fill property  

					Switch(Self.Text,”Completed”,Gareen,”Not Started",DarkRed,”started”,Blue 
,“In Progress”,DarkGoldenRod) 
Visualizing task statuses with dynamic colors.

2. Bold text for selected item of gallery :

For this purpose use code on both, the title and subtitle  Fontwieght property.

					If(ThisItem.IsSelected, FontWeight.Bold, FontWeight.Normal)

And font-size property. 

					If(ThisItem.IsSelected, 12, 15) 
Gallery items formatting example.

Here we see a clear difference in font size and weight of selected items in the gallery  

And color of status on the basis of task status

Task statuses with color-coding in Power Apps.

3. Show icon of gallery for selected item:

First add a trash icon in gallery  

 And use code on visible property of trash icon  

Icon visibility changes based on selection.

Here we get the result. 

Styled gallery item with visible icons and label color adjustments.

The trash icon is only visible with the selected item in the gallery 

Font weight is high and the size of the font is greater for selected items of the gallery  

And color of the label for status is based on the task status .

4. Hide rows based on condition:

Here we can only those task that has status completed  

For this, we use this code on the visible property of label 

Highlighting completed tasks in Power Apps.

Here we can see only those task shown in the gallery which has status completed .

5: Strikethrough Text for Completed Tasks:

Add a label In the Gallery 

Label Height=1

Label Width= parent.templatewidth 

Label Border=2 

Strikethrough effect on completed tasks.

To make this strikethrough we use code in visible property of label.

Strikethrough indicators for completed tasks.

Here we can see there is a strikethrough on the task that has status completed.

6:Change Text Color Based on Value:

We did this in the first part of this article  
We changed the background color based on the status task.
For this please check point 1 I have performed this in point 1

7. Alter Border Thickness or Color:

Highlight items that need attention with a thicker or differently colored border

for this, we use this code on labels  BorderThickness and BordeColor


Use this code for BorderColor.

					 If(ThisItem.IsSelected,Color.DarkGreen,RGBA(0, 0, 0, 1)) 
Altering border thickness and color for selected labels.

We can see the difference between the selected label Bordercolor and borderThickness.


Power Apps provides a robust platform for creating visually appealing and dynamic apps. Through the utilization of galleries and conditional formatting techniques, developers can significantly enhance the visual appeal and functionality of their apps. The seven techniques highlighted in this article offer insights into how developers can make their apps more engaging and user-friendly.

As technology continually evolves, it’s essential for developers to stay updated with the latest techniques and practices. The conditional formatting techniques discussed in this guide serve as an excellent foundation for any aspiring Power Apps developer. Embracing these techniques can make a significant difference in the overall user experience, driving user engagement and satisfaction. As always, continuous learning and experimentation are key to achieving mastery in any field.


Power Apps: Conditional Formatting - Have Questions?

Explore More on Power Apps: Conditional Formatting in Our Blogs!

About The Author