Introduction

While building Power Apps and using a gallery to display data, one of the common requirements is to have filters that will give you the flexibility to apply filters on the gallery source to show a subset of the data.

To give a better user experience, when there are multiple filters, having a cascaded filter option is an added advantage. With a cascaded drop-down, based on the selection of the first drop-down, related options are populated in the second drop-down. This eliminates unrelated data from the second drop-down which helps the user make a better-calculated filtering decision.

Scenario

In this article, we will see how to set up a cascaded drop-down filter that filters a gallery within the power app that shows the Product catalog information. We will have 2 dropdowns, Brand and Model so that based on Brand selection Model dropdown will show the related models of the respective brand.

Implementation

Let’s get started with the creation of the back end which is a SharePoint List named Products which contains the below Columns and information

Here we are not using any look-up columns, Brand and Model are populated as Single Line Text Boxes in the list. We will see how we can pick Distinct data from Brand and Model and create a cascading drop-down effect to filter the dataset.

Create the Power App

Let’s head over make.powerapps.com and create a canvas app. We will create a data connection to SharePoint so as to fetch the List data.

We will then specify the Products list and connect to it.

Now let’s add the Brand and Model Dropdowns which will be populated with the SharePoint List column values using Filtered Expression which we will see in a while. We will also add a Gallery and assign the list as its Data Source.

To make the app look a bit more beautiful, we will add an image to the left side and apply a bit of formatting on the Gallery and add the remaining fields from the List to the gallery.

Cascaded Drop Down

To implement cascaded dropdown using 2 columns from the same List, we will apply the filtered expressions on Brand and Model Drop Down. In the Brand drop downs Item property, we will add the below expression that gets the distinct values from the brand Columns in the Products Source.

Followed by that we will add the below expression on the Model Drop down’s Item Property so that it will filter the Products Source list and pick rows where Brand SharePoint List Column Value is equal to the value selected in the Brand Drop Down. We will also wrap with a Distinct function and pick the unique Model Values from the filtered rows to populate the drop-down

Filter the Gallery

Thus, we have applied a cascaded filter in the drop-downs, now using the selected values lets filter the gallery as well using the below expression

We have used the filter function to filter the Products source and pick the records where the Brand and Model SharePoint List column contains the respective values selected in the Cascaded dropdown

Test the Cascading Functionality

Now let’s test the working of cascading by previewing the app and we can see that the second drop-down values will be listed in relation to the first drop-down selection and in real-time both the filters will be applied to the gallery which shows the filters subset of data.

Summary

Thus, we saw how to set up a Cascaded drop-down based on 2 columns present in the same SharePoint list and use it to filter the gallery in the Power App.