How to Create Multiple Filters in Gallery using Collection

Introduction

Filtering a gallery on multiple selections is the most demanding user-friendly functionality that could be expected by any business. In this post, we'll look at how to design and implement multiple filters on a gallery using the collection.

I have implemented this feature on complex problems, however implementing this on a simple form for demo and learning purposes.

Scenario

In this article, we shall see how to make a PowerApps gallery with multiple filters using the collection.

Objective

Design your form as per your needs. I have my gallery along with 3 dropdowns.

Step 1. List

My list looks like below. Here, status and city value will be the same as the choice value, which I will be hard-coding in the PowerApps app.

PowerApps

The list with data looks like below.

Data

Step 2. Form

My form will be designed as per need which will show data in the gallery.

Step 3. Filters Down collection

Dropdowns that are used as filters in a bind in the collection in the OnVisible property. We have bound the status value Parcel Number and Title in the dropdown just for learning or demo purposes through the collection. Here three types of fields from the same list have been bound in the dropdown of the gallery. The trainer is the people picker, the Parcel number is the text field, and the status is a choice column.

Drop Down

Note. If we just click on the preview button, this collection will not be formed. If we go to some other screen and then come back to this screen, then the OnVisible property will be executed, and collection will be formed.

Step 4. Gallery Items property of Dropdown

Items property of each dropdown will have collection passed, which is formed on OnVisible property. We can bind the collection on OnStart or any other property too.

Items Property

Demolist

Copilet

Step 5. Gallery

My gallery will be designed with existing controls but with modifications to how the values are shown. My Gallery will be designed as shown below with 3 dropdown controls, its labels, and data to be shown in the gallery. One data I am showing below, similar to all other values could be designed.

Create Item

Step 6. Shows values bind in the drop-down control

Trainer values in the dropdown are shown below, here the trainer name is bind from existing data in the main list. We can also bind from whichever list we want to.

Trainer values

Parcel Number values in the dropdown are shown below.

Parcel Number

Status values in the dropdown are shown below.

Status values

Step 7. Build formula for Items property of Gallery

Items property of the gallery defines in which situation what kind of data should be shown. So, through the collection, we have bound All values to the drop-down and a particular value which is bound in drop-down.

Items property

Conclusion

In the above article we saw how to filter a gallery depending upon multiple dropdowns and those dropdown values how could we bind through collection?

Input and Output

Output


Similar Articles