Create Cascading (Dependent) Dropdowns In Power Apps

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/create-cascading-dependent-dropdowns-in-power-apps/. Author: Matthew Devaney.

Create Cascading (Dependent) Dropdowns In Power Apps Posted by - Matthew Devaney on - August 1, 2021 21 Comments

Cascading dropdowns are a set of dropdowns that show values based on the previous selection in a hierarchy. When built well, they help app users quickly navigate an otherwise overwhelming set of options. For example, selecting a car could be done by choosing the manufacturer, model and year in that order. Once the user selects a manufacturer, the next dropdown only shows models for that manufacturer. Similarly, after the model is selected only the years where the model was made would be displayed.

In this article I will show you how to build a set of cascading dropdowns in Power Apps. Table of Contents Introduction: Order A Mobile Phone App Setup The SharePoint List Create The Cascading Dropdowns

Populate Cascading Dropdowns With Values From The SharePoint List

Add A Blank Option To Each Cascading Dropdown

Prevent Cascading Dropdown Selections In The Wrong Order

Save Cascading Dropdown Selections To A SharePoint List Introduction: Order A Mobile Phone App

Employees at a construction company use the Order A Mobile Phone app to choose the phone they want to buy. The app ensures only valid combinations of manufacturer, model and color are selected. Setup The SharePoint List

Create a new SharePoint list called Devices Catalog to hold all of the possible phone options with the following columns: Manufacturer (single-line text) Model (single-line text) Color(single-line text) Include this data in the list: Manufacturer Model Color Apple iPhone 12 Silver Apple iPhone 12 Black Apple iPhone 11 Silver Apple iPhone 11 Pink Samsung Galaxy S21 Red Samsung Galaxy S21 Blue Samsung Galaxy S22 Red Samsung Galaxy S22 Black

Another SharePoint list called Devices Orders will be created later in this example to store which devices were selected and who selected them. Create The Cascading Dropdowns

Open Power Apps Studio and start a new app from blank. Insert three pairs of labels and dropdowns for Manufacturer, Model and Color as shown below.

Add the Devices Catalog SharePoint list to the app. We will use it to populate the dropdowns with values.

Populate Cascading Dropdowns With Values From The SharePoint List

When an employee picks a value from a dropdown it restricts values in the next dropdown to only valid selections found in the Devices Catalog SharePoint list.

Use this code in the Items property of the Manufacturer dropdown to show a unique list of values. We must use the Distinct function because otherwise each Manufacturer would be repeated several times.

Distinct( 'Devices Catalog' , Manufacturer) Code language: JavaScript ( javascript ) Next, select the Model dropdown…

…and use this code in the Items property to show only valid Models for the chosen Manufacturer. Distinct( Filter(

'Devices Catalog' , Manufacturer=drp_Manufacturer.Selected.Value ), Model ) Code language: JavaScript ( javascript ) Then, select the Color dropdown…

…and write this code in the Items property to display only valid Colors for the chosen Model. Now we have a working set of cascading dropdowns.

Filter( 'Devices Catalog' , Model = drp_Model.Selected.Value) Code language: JavaScript ( javascript )

Add A Blank Option To Each Cascading Dropdown

If we change the Manufacturer dropdown to a different value we immediately notice a problem. The Model and Color dropdowns will show a new value without us making any selection. This is a confusing user experience that we should eliminate.

All dropdowns should show no selected value when the employee opens form and revert to no selection when a parent option changes.. To accomplish this we will add a blank option to the top of each dropdown as shown below.

Update the Items property of the Manufacturer dropdown to this code to add a blank option. Ungroup (

Table ( { Value : Blank ()}, { Value : Distinct ( 'Devices Catalog' , Manufacturer)} ), " Value " ) Code language: CSS ( css )

Then change the Items property of the Model dropdown to this code… Ungroup (

Table ( { Value : Blank ()}, { Value : Distinct ( Filter(

'Devices Catalog' , Manufacturer = drp_Manufacturer.Selected.Value ), Model )} ), " Value " ) Code language: CSS ( css )

…and finally replace the Items property of the Color dropdown with this code. Ungroup (

Table ( { Value : Blank ()}, { Value : Filter (

'Devices Catalog' , Model = drp_Model.Selected.Value )} ), " Value " ) Code language: CSS ( css )

Now all of the dropdowns have a blank value at the top of the selection list.

Reset Cascading Dropdowns When A New Selection Is Made

When we select a Manufacturer the Model and Color dropdowns below it should be reset to their default value of blank. Use this code in the OnChange property of the Manufacturer dropdown Reset(drp_Model); Reset(drp_Color);

Likewise, when we select a Model the Color dropdown should reset to blank. Write this code in the OnChange property of the Model dropdown Reset(drp_Color);

Ensure all dropdowns have a Default value of blank. Blank()

Prevent Cascading Dropdown Selections In The Wrong Order

We don’t want employees to select the Model until the Manufacturer is selected. Nor do we want employees to choose a color until the model is decided. Guiding employees to make choices in the correct order is fundamental to our cascading dropdown design.

We can prevent employees from inputting values by setting a dropdown to disabled mode. Use this code in the DisplayMode property of the Model dropdown to prevent selections before the Manufacturer is chosen. If ( IsBlank ( drp_Manufacturer .Selected .Value ), DisplayMode .Disabled , DisplayMode .Edit ) Code language: CSS ( css )

Similiarly, use this code in the DisplayMode property of the Color dropdown to prevent selections before the model is decided. If ( IsBlank ( drp_Model .Selected .Value ), DisplayMode .Disabled , DisplayMode .Edit ) Code language: CSS ( css )

Save Cascading Dropdown Selections To A SharePoint List

Employee mobile phone orders are saved to another SharePoint list called Device Orders so the I/T department knows what phones to order. Create the Device Orders SharePoint list with single-line text columns for Manufacturer , Model and Color . Unhide the Created By and Created columns so we can see who ordered the phone and when. Created By Created Manufacturer Model Color

Add the Device Orders SharePoint list to the app.

Then insert a new button with the text “Submit” at the bottom of the form…

…and use this code in the OnSelect property to save the mobile phone order to the Device Orders SharePoint list and reset the dropdowns. // save new record to SharePoint Patch(

'Device Orders' , Defaults( 'Device Orders' ), {

Manufacturer : drp_Manufacturer.Selected.Value, Model : drp_Model.Selected.Value, Color : drp_Color.Selected.Color } ); // reset dropdowns

Reset(drp_Manufacturer); Reset(drp_Model); Reset(drp_Color); Code language: JavaScript ( javascript )

We are now finished making the Order A Mobile Phone app using cascading dropdowns to restrict employee selections to only valid devices. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions or feedback about Create Cascading (Dependent) Dropdowns In Power Apps please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. DISTINCT function Dropdown control Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps