Power Apps Modern Gallery Design | Filters + Sort + Search UI Tutorial

Introduction

In this tutorial, we will explore how to create a modern gallery design in Power Apps that includes interactive features such as filters, sorting, and search functionality. This design will enhance the user experience for applications like product listings, sales dashboards, or approval apps. Whether you're a beginner or an advanced user, you’ll gain valuable skills to improve your Power Apps projects.

Step 1: Set Up the Gallery

• Start by creating a new Canvas app in Power Apps.
• Insert a gallery control by selecting the "Gallery" option from the insert menu.
• Choose a vertical or horizontal gallery based on your design preference.
• Connect the gallery to your data source (e.g., SharePoint, SQL, etc.) by setting the Items property to your data set.

Step 2: Add Sorting Options

• Select the gallery header to add sorting functionality.
• Insert dropdown controls for sorting options.
• For example, to sort by name or date:
  • Set the Items property of the dropdown to a list of sorting options.
  • Use the following formula in the gallery’s Items property:

    Sort(yourDataSource, dropdown.Selected.Value, Ascending)
    

• This will allow users to select how they want to sort the data displayed in the gallery.

Step 3: Implement Filters

• Add a section for filters above the gallery.
• Use toggle buttons or checkboxes to create expandable and collapsible filter options.
• To implement the filters:
  • Create a variable to track the state of the filters (e.g., varShowFilters).
  • Set the Visible property of the filter controls based on this variable.
• Use the following formula in the gallery’s Items property to apply the filters dynamically:

  Filter(yourDataSource, filterCondition)
  

Step 4: Show Active Filters

• To improve usability, display the currently active filters.
• Create a label or a text box to show the user's selected filters.
• Update this label's text property with a formula that reflects the active filters:

  "Active Filters: " & Concatenate(FilterArray, ", ")
  

Step 5: Integrate Search Functionality

• Add a search box to allow users to quickly find items in the gallery.
• For the search functionality, set the Items property of the gallery to:

  Search(yourDataSource, searchBox.Text, "fieldToSearch")
  

• Replace fieldToSearch with the specific field in your data source you want to search through.

Conclusion

By following these steps, you can create a modern gallery design in Power Apps that features sorting, filtering, and search capabilities. This not only enhances the user experience but also makes your applications more functional and professional. As you continue to develop your Power Apps skills, consider experimenting with additional features like custom styling and advanced data connections to further enrich your applications. Happy app building!