Power Apps Gallery: 7 Conditional Formatting Techniques
Overview:
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:
- Change the background color based on task status.
- Modify the font weight and size for selected gallery items.
- Toggle icon visibility for selected items in the gallery.
- Hide specific rows based on conditions.
- Apply a strikethrough effect to completed tasks.
- Modify text color based on values.
- 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)
Now, connect your app with the data source.
Add a gallery and connect it with database
For the title of gallery use this code on the text property of the title .
(ThisItem.Task)
Similarly for subtitles use this code .
ThisItem.Status.Value
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)
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)
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
3. Show icon of gallery for selected item:
First add a trash icon in gallery
And use code on visible property of trash icon
If(ThisItem.IsSelected,true,false)
Here we get the result.
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
If(ThisItem.Status.Value="Completed",true,false)
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
To make this strikethrough we use code in visible property of label.
If(ThisItem.Status.Value="Completed",true,false)
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
If(ThisItem.IsSelected,3,0.5)
Use this code for BorderColor.
If(ThisItem.IsSelected,Color.DarkGreen,RGBA(0, 0, 0, 1))
We can see the difference between the selected label Bordercolor and borderThickness.
Conclusions:
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.
Reference:
Reference1: If and Switch functions in Power Apps
