Power Apps: Highlight Selected Gallery Items for Better UX

Enhance User Experience in Power Apps with Gallery Item Highlighting

Power Apps galleries are essential for displaying lists of data, such as customers, projects, or tasks. To improve navigation and user experience, it's crucial to visually indicate which item is currently selected within these galleries. This article will guide you through highlighting selected gallery items in Power Apps using the TemplateFill property and Power Fx formulas.

Why Highlight Selected Gallery Items?

Imagine a gallery displaying customer records. Without any visual cue, users might struggle to identify the currently selected record. Highlighting the selected item makes it immediately obvious, leading to:

• Better User Experience: Users can easily pinpoint the selected record.
• Improved Navigation: Makes navigating through large galleries much simpler.
• Modern Interface: Contributes to a professional and polished look.
• Reduced Confusion: Prevents accidental selection errors.
• Mobile Friendly: Enhances usability on smaller screens.

Example Scenario: Employee Directory

Consider a gallery displaying employee records with columns for Employee Name, Department, and Email. The requirement is to highlight the selected record, show details, and potentially enable editing.

Power Apps Gallery Structure

A typical gallery, let's call it GalleryEmployees, might contain fields like Employee Name, Department, and Designation. When a user clicks a row, the background should change to indicate the selected record.

Step 1: Insert a Gallery

1. Navigate to Insert > Gallery > Vertical Gallery.
2. Connect the gallery to your data source (e.g., an 'Employees' table).
3. Populate with example records like John Smith, David Johnson, Emma Brown, and Michael Wilson.

Step 2: Select the Gallery

Click on the gallery control in your Power App. Locate the TemplateFill property in the properties pane.

Step 3: Configure the TemplateFill Property

Set the TemplateFill property to the following Power Fx formula:

If(
    ThisItem.IsSelected,
    RGBA(0, 120, 212, 0.2),
    Color.White
)

How it Works:

• ThisItem.IsSelected: This expression checks if the current row (item) being rendered in the gallery is the one the user has selected.
• RGBA(0, 120, 212, 0.2): If ThisItem.IsSelected is true, this function applies a semi-transparent blue background color.
• Color.White: If ThisItem.IsSelected is false (meaning it's not the selected item), the background defaults to white.

Example Output

Before Selection:

John Smith
David Johnson
Emma Brown
Michael Wilson

After Selecting Emma Brown:

John Smith
David Johnson
Emma Brown ← Highlighted
Michael Wilson

Users can now instantly identify the active record.

Using Different Colors and Styles

Different Highlight Colors

You can easily customize the highlight color to match your application's theme or branding:

• Light Blue: If(ThisItem.IsSelected, LightBlue, White)
• Light Green: If(ThisItem.IsSelected, LightGreen, White)
• Light Orange: If(ThisItem.IsSelected, RGBA(255, 165, 0, 0.3), White)

Add a Border Highlight

To add a border around the selected item, configure the following properties:

• BorderThickness: If(ThisItem.IsSelected, 2, 0)
• BorderColor: If(ThisItem.IsSelected, Color.Blue, Color.Transparent)

This will result in a blue border around the selected item, with no border on others.

Add an Icon Indicator

Another approach is to add an icon that only appears for the selected item. Insert an icon (like a checkmark) into your gallery template and set its Visible property to:

ThisItem.IsSelected

This ensures the icon is only displayed next to the selected record.

Real-World Examples

Employee Directory

In an employee directory, selecting an employee record highlights them, displays their details in a separate section, and potentially updates an edit form.

Customer Management

In a customer management app, highlighting a selected customer record allows users to easily see which account they are currently viewing, editing, or performing actions on.

Highlighting Using Variables (Advanced)

For more complex scenarios, you can use variables to manage the selected item:

• OnSelect Property of the Gallery: Set a variable to store the selected item. For example, Set(SelectedEmployee, ThisItem).
• TemplateFill Property: Use the variable in your formula. For example, If(ThisItem.ID = SelectedEmployee.ID, RGBA(0, 120, 212, 0.2), White).

This method is particularly useful for multi-screen navigation, ensuring the selected state is maintained even when navigating to a details screen.

Best Practices

• Use Soft Colors: Opt for subtle highlight colors that don't distract.
• Maintain Consistent Design: Apply the same highlighting style throughout your application.
• Combine with Icons: Use icons for additional visual cues where appropriate.
• Support Accessibility: Ensure sufficient color contrast for readability.
• Test on Mobile Devices: Verify the appearance and usability on various screen sizes.
• Avoid Excessive Animations: Keep the user experience clean and responsive.

Common Use Cases

• Employee Directories
• Customer Management Systems
• Project Tracking Applications
• Task Management Tools
• Inventory Applications

Conclusion

Highlighting selected gallery items is a simple yet effective enhancement in Power Apps. By leveraging the TemplateFill property and the ThisItem.IsSelected function (or variables for advanced use cases), you can create a more intuitive, professional, and user-friendly application. This technique significantly improves data navigation and overall application usability across various business scenarios.