silver imac with keyboard and mouse

Mastering PowerApps Galleries: Easy Filtering & Sorting with Modern Buttons – Part 3

Last Updated: September 9, 2024By

If you’re building or refining PowerApps, you already know that keeping your users happy usually revolves around making your app intuitive and easy to navigate. That’s where the beauty of filtering and sorting comes into play. It’s not something to think about later—it’s crucial for creating a seamless user experience.

In this post, we’ll dive into how you can set up gallery filtering and sorting in PowerApps using modern controls like dynamic buttons and combo boxes. Trust me, mastering these elements will take your apps to the next level. Let’s get into it.

Why Filtering and Sorting Matter in PowerApps

Anyone who’s been in the middle of a cluttered app knows the frustration of not finding what they need. Filtering and sorting turn your app from chaotic to clear. By setting up dynamic filters, you ensure that your users can find exactly what they’re looking for—whether it’s by a specific date, category, or priority. Sorting, especially with a visual cue of up and down arrows, makes understanding that data even easier.

But enough talk. Let’s show you how to get this going in PowerApps.

Setting Up Dynamic Filters with Modern Controls

To get filtering working right, we need to use combo boxes and populate them with dynamic data from our SharePoint list. You’ll also want to make it easy for users to reset the filters back to their default state after they’ve filtered down their results.

Modern vs. Classic Combo Boxes

First off, if you’re still using classic combo boxes, it’s time to switch. Modern combo boxes offer more flexibility and give your users a cleaner experience. You can customize placeholder text, adjust padding and spacing, and even control how the items populate based on your data.

Here’s a quick difference:

  • Modern Combo Box: Offers better placement, more customization options, and a cleaner interface.
  • Classic Combo Box: Still works, but looks more outdated and lacks certain customization options.

To make everything look and feel just right, customize the layout as you prefer—adjusting padding, width, and gaps helps improve the design and usability.

Populating Combo Boxes with Data

Use your SharePoint list to populate the combo boxes. For example, if you’re filtering by “Category” or “Priority,” you can connect the combo boxes directly to those fields. Here’s a pro tip: when dealing with statuses in PowerApps, it’s often easier to use a single line of text rather than field choices. This way, you can sidestep problems that arise when workflows get complex (like multi-stage approvals).

For example, you could create a custom collection inside your app to handle status options dynamically. This flexibility means you can change the status options without touching your SharePoint setup.

Resetting Filters for a Clean Slate

Every good filter system needs a reset button. No one should have to manually uncheck filters—they’ll hate you for it. Add an icon, such as a reload button, to clear all selections and set the app back to its default state.

Make sure the reset function hits all the inputs: Combo Boxes for Category, Priority, and Status, along with Date Pickers. Always consider what your users might do, and give them a simple way to undo it.

Adding Sorting with Modern Buttons

Sorting used to be a hassle, but modern buttons make this process intuitive and more efficient. By incorporating sortable buttons with visual cues (like up and down arrows), your users can easily see how data is organized.

Using Dynamic Icons for Sorting

Here’s where it gets cool. Instead of using plain buttons, modern buttons now support dynamic icons. Depending on the sorting order, the icon will change from an up arrow to a down arrow—or display both when there’s no sorting applied. This helps users easily understand how the data is being sorted without any trial and error.

Start by associating variables with the sort buttons. For example:

  • Title button sorts by title.
  • Due Date button sorts by due date.

Using a switch statement, you can make these buttons smart enough to sort by different columns based on which one the user selects. If you’re sorting by Title, the app shows an appropriately placed arrow. Same goes for Due Date ­– users will see clearly whether the data is outlined in ascending or descending order.

Building the App Layout

To make the UI straightforward, you can structure your app with a mix of vertical and horizontal containers. This method helps ensure your buttons, filters, and gallery items align perfectly, regardless of screen size. Here’s the general architecture:

  • Horizontal containers for your buttons and table headers.
  • Vertical containers for your galleries.
  • Ensure flexibility with automatic resizing by setting containers to fixed width or height, depending on your needs.

After setting up the structure, you can focus on styling. Define padding, add gaps between elements, and make everything as visually appealing as possible without sacrificing screen space.

Creating the Filterable and Sortable Gallery

Once you have the table headers and sorting buttons in place, it’s time to set up the actual gallery. Start by connecting it to your SharePoint list and removing unnecessary fields (like auto-generated images).

Once the gallery is in place, you’ll need to write logic that applies both filtering and sorting.

Filter Logic

You’ll use the filter() function combined with AND statements to refine the data based on combo box selections. For example, filter by category, status, or priority, which we set in the earlier sections. Also, make sure to include logic for blank selections so your filters don’t break when certain fields aren’t in use.

Sort Logic

To handle sorting, implement a switch statement that toggles between columns like “Title” and “Due Date.” Combine this with dynamic icon changes for a seamless experience.

By using these dynamic elements, clicking a button will sort the items in ascending or descending order, providing the user with instant feedback via the arrows.

Testing and Fine-Tuning

Once you have your gallery, filter, and sort logic working, always test the app thoroughly. Go category by category, date by date, testing filters and sort buttons. Ensure everything resets properly when you click the reload icon. If something feels off, now’s the time to fix it.

What’s Next: Power Automate for Multi-Stage Approvals

Now that the gallery is fully functional, backed by dynamic filtering and sorting, what’s next? We’ll be diving into multi-stage approvals using Power Automate.

In the next part of this series, we’ll teach you how to:

  • Automate approval notifications using dynamic workflows.
  • Send emails directly from Power Automate when approvals are initiated, completed, or need revisions.
  • Use deep linking to guide users right back to the app for further action after approval.

You won’t want to miss it, so be sure to subscribe and hit that notification bell!

Final Thoughts

If you’re serious about making your PowerApps more functional and user-friendly, mastering galleries with filters and sorting is key. Dynamic controls like modern combo boxes and buttons make it all more intuitive—and once you get the hang of building with these tools, making changes becomes fast and frustration-free.

Was this tutorial helpful? Let us know in the comments, and feel free to share any challenges or questions you encounter while building your galleries.

Be sure to like and subscribe for more PowerApps tips. And don’t forget to share this post with anyone else working with PowerApps!

Until next time, keep building and keep learning!

Leave A Comment