How to Create Power Apps Cascading Dropdown From SharePoint List?

While developing a Power Apps form, I had a requirement to display the product names within a dropdown menu based on the selected vendor. To address this, I implemented a cascading dropdown feature in Power Apps.

This Power Apps tutorial helps you to know how to create Power Apps Cascading Dropdown from SharePoint list.

Also, we will see the topics below:

1. How to work with Power Apps cascading dropdown SharePoint Lookup column
2. Power Apps Cascading dropdown from SharePoint list Person field
3. How to Set Default Value Blank in Power Apps Cascading Dropdown

Apart from that, we will see how to sort Power Apps cascading dropdown with a simple scenario.

Power Apps Cascading Dropdown

The Cascade dropdown in Power Apps indicates that the choices made from the first dropdown menu determine which items are available in the second dropdown menu.

Let’s say there are two Power Apps Dropdowns, i.e., Vendor and Product. When a user selects any vendor, the second dropdown will display all the product names based on the user-selected vendor.

Refer to the image below.

How to Create Power Apps Cascading Dropdown From SharePoint List

We will create a cascading dropdown in Power Apps from the SharePoint list using various examples.

Example 1: Create Power Apps Cascading Dropdown Using SharePoint List

I have a SharePoint Online list Product list that has various columns like:

I created a Power Apps Canvas app and added two Dropdown controls. The first dropdown control contains all the values from the above SharePoint list “Vendor” lookup column. The other dropdown contains all the values from the choice column named “Product.”

The second dropdown will show all the product names based on the vendor selection.

Let me show you how to achieve this:

• On the Power Apps screen, Insert a Dropdown control [for Vendor] and set its Items property to:

Choices('Product List'.Vendor)

Where,

1. Product list = SharePoint list name
2. Vendor = SharePoint list lookup column name

• Add another Dropdown control [for Product] -> Set its Items property to: [The value for this dropdown should be based on the selection from the previous dropdown]

Distinct(
    Filter(
        'Product List',
        'Vendor'.Value = drp_Vendor.Selected.Value
    ).Product,
    Product.Value
)

Where,

1. Product list = SharePoint list name
2. Product = SharePoint list choice column name
3. drp_Vendor = 1st Dropdown control name
4. Vendor = SharePoint list lookup column name

• Once your app is ready, Save, Publish, and Preview the app. Whenever the user selects any vendor, the second dropdown will display with all the vendor related products.

This is how we can create a cascading dropdown in Power Apps.

Example 2: Power Apps Cascading Dropdown SharePoint Lookup Column

This section will explain creating a Power Apps cascading dropdown using the SharePoint list lookup column.

Example:

I have two SharePoint lists, namely:

1. Meetings [SharePoint list 1]
2. Meeting Scheduled [SharePoint list 2]

Meetings [SharePoint list 1]

This SharePoint list has various columns like:

Meeting Scheduled [SharePoint list 2]

This SharePoint list has various columns like:

On my Power Apps screen, I have added two Dropdown controls and a Gallery control. The first dropdown control contains all the values from the above SharePoint list 1 title column [Meeting Type].

The second dropdown contains all the values from the SharePoint list 2 “Meeting Title” column.

The second dropdown will show all the scheduled meetings based on the meeting type selection.

Once the selection is made from both the dropdown values, the gallery filters and displays the respective meeting’s date and time, as shown below:

Let’s see how to achieve it:

• On the Power Apps screen, insert a first Dropdown control -> Set its Items property to:

Distinct (Meetings, Title)

Where,

• Meetings = SharePoint list 1 name
• Title = SharePoint list 1 title column

• Under the first dropdown control, insert another Dropdown control -> Set its Items property as:

Filter(
    'Meeting Scheduled',
    'Meeting Type'.Value = drp1_MeetingType.Selected.Value
).Title

Where,

1. Meeting Scheduled = SharePoint list 2 name
2. Meeting Type = SharePoint list 2 lookup column name
3. drp1_MeetingType = First dropdown control name
4. Title = SharePoint list 2 title column

• Insert a Calendar blank icon, and then insert a Gallery control onto the same icon as shown below:

• Set the gallery control, Items property to:

Filter(
    'Meeting Scheduled',
    'Meeting Type'.Value = drp1_MeetingType.Selected.Value && Title = drp2_SheduledMeeting.Selected.Title
)

Where,

1. Meeting Scheduled = SharePoint list 2 name
2. Meeting Type = SharePoint list 2 lookup column name
3. drp1_MeetingType = First dropdown control name
4. Title = SharePoint list 2 title column
5. drp2_SheduledMeeting = Second dropdown control name

• On the gallery property pane, change the layout style to Title -> Click on Edit fields -> Then choose the Meeting Scheduled date column as shown below:

• Save, Publish, and Preview the app. Select a specific item from the first dropdown [One-on-one meeting], and select “Meeting with Daniel” from another dropdown.
• At the same time, the gallery will filter and display the date and time of a one-on-one meeting scheduled with Daniel.

This is how I created a Power Apps cascading dropdown using the SharePoint list lookup column.

Example 3: Cascading Dropdown from SharePoint List Person field in Power Apps

Here, we can see how to create a cascading dropdown from the SharePoint list person filed in Power Apps.

Example: I have a SharePoint list [Product Issue Tracker] that has various columns like:

The Power Apps screen has two Dropdown controls and a Gallery control. The first dropdown control contains all the SharePoint list choice column values. Another dropdown contains all the values from a SharePoint list person column.

The second dropdown will show all the users who handled the issue based on the issue type selection.

Automatically, the gallery will filter and display all the relevant records based on both dropdown-selected values, as shown below:

Let’s see how to achieve this:

• Insert a Dropdown control on the Power Apps screen -> Set its Items property to:

Distinct('Product Issue Tracker','Issue Type'.Value)

Where,

1. Product Issue Tracker = SharePoint List Name
2. Issue Type = SharePoint List Choice Column

• Under the first dropdown control, insert another dropdown control -> Set its Items property to:

Distinct(
    Filter(
        'Product Issue Tracker',
        'Issue Type'.Value = drp_IssueType.Selected.Value
    ).'Issue Assigned To',
    'Issue Assigned To'.DisplayName
)

Where,

1. Product Issue Tracker = SharePoint List Name
2. Issue Type = SharePoint List Choice Column Name
3. drp_IssueType = First Dropdown Control Name
4. Issue Assigned To = SharePoint List Person Column

• Once we Save and Preview the app, we can see that the second dropdown control value depends upon the first dropdown control value.

• Insert a Vertical gallery control -> Set its Items property to:

Filter(
    'Product Issue Tracker',
    'Issue Type'.Value = drp_IssueType.Selected.Value && 'Issue Assigned To'.DisplayName = drp_IssueAssignedTo.Selected.Value
)

Where,

1. Product Issue Tracker = SharePoint List Name
2. Issue Type = SharePoint List Choice Column Name
3. drp_IssueType = First Dropdown Control Name
4. Issue Assigned To = SharePoint List Person Column
5. drp_IssueAssignedTo = Another Dropdown Control Name

• Save, Publish, and Preview the app. Select a specific item from the dropdown [Laptop], and select “Lidia Hollaway” from another dropdown. Now, the gallery will filter and display all the laptop issues handed by Lidia Hollaway.

This is how we can create a cascading dropdown from the SharePoint list person field in Power Apps.

How to Sort Power Apps Cascading Dropdown

This section will show you how to sort Power Apps cascading dropdowns.

Note:

“Sorting the cascading dropdown control will make it easier for the users to find the values they need”

Example:

I have a SharePoint list [Netflix User Information] that has various columns like:

I created a Power Apps Canvas app and added two Dropdown controls. The first dropdown control contains values from the SharePoint list choice column [Subscription Type].

As shown below, when a user selects a value from the first dropdown, the values in the second dropdown should dynamically update, either in ascending or descending order, dependent on the user’s selection from the first dropdown:

Let’s see how to achieve it:

• On the Power Apps screen, insert a Dropdown control -> Set its Items property to:

Distinct(
    'Netflix User Information',
    'Subscription Type'.Value
)

Where,

1. Netflix User Information = SharePoint list name
2. Subscription Type = SharePoint list choice column name

• Besides the first dropdown control, insert another Dropdown control -> Set its Items property to:

Sort(
    Distinct(
        Filter(
            'Netflix User Information',
            'Subscription Type'.Value = 'drp_Subscription Type'.Selected.Value
        ),
        Country
    ),
    SortOrder.Ascending
)

Where,

1. Netflix User Information = SharePoint list name
2. Subscription Type = SharePoint list choice column name
3. drp_Subscription Type = First dropdown control name
4. Country = SharePoint list another column name

• Save, Publish, and Preview the app. When a user selects a value from the first dropdown, the values in the second dropdown will dynamically adjust in ascending order based on the selection made.

This is how we can sort a Power Apps cascading dropdown.

Set Default Value Blank in Power Apps Cascading Dropdown

Here, we will see how to set the cascading dropdown default value to blank in Power Apps.

Example,

I have a SharePoint list [Netflix User Information] that has various columns like:

Refer to the image below:

I created a Power Apps Canvas app and added two Dropdown controls and a Gallery control. The first dropdown control contains values from the SharePoint list choice column [Subscription Type]. The other dropdown contains all the values from another column named “Country. “

When a user selects a blank value from the first dropdown, the second dropdown’s value will also be blank. At the same time, the gallery will filter and display all the records.

To achieve it, follow the below-mentioned steps:

• Create a Power Apps collection on the Apps’ OnStart property:

ClearCollect(
    colBlank,'Netflix User Information',
    {Value: " "}
);

Where,

1. colBlank = Collection name
2. Netflix User Information = SharePoint list name

• On the Power Apps screen, insert a first Dropdown control -> Set the below dropdown properties as:

Items = Distinct(colBlank,'Subscription Type'.Value)

AllowEmptySelection = true

Where,

1. colBlank = Collection name
2. Subscription Type = SharePoint list choice column name

• Below the first dropdown control, insert another dropdown control -> Set the below dropdown properties as:

Items = Distinct(
    Filter(
        colBlank,
        'Subscription Type'.Value = drp_SubscriptionType.Selected.Value
    ),
    Country
)

AllowEmptySelection = true

Where,

1. colBlank = Collection name
2. Subscription Type = SharePoint list choice column name
3. drp_SubscriptionType = First dropdown control name
4. Country = SharePoint list another column name

• Insert a gallery control -> Set the Items property to:

Items = If(
    drp_SubscriptionType.Selected.Value = " ",
    'Netflix User Information',
    If(
        drp_Country.Selected.Value = " ",
        'Netflix User Information',
        Filter(
            'Netflix User Information',
            drp_SubscriptionType.Selected.Value = Blank() Or 'Subscription Type'.Value = drp_SubscriptionType.Selected.Value,
            drp_Country.Selected.Value = Blank() Or Country = drp_Country.Selected.Value
        )
    )
)

Where,

1. drp_SubscriptionType = First dropdown control name
2. Netflix User Information = SharePoint list name
3. drp_Country = Second dropdown control name
4. Subscription Type = SharePoint list choice column name
5. Country = SharePoint list another column name

• Save, Publish, and Preview the app. By default, both dropdowns will be selected as an empty value, and the gallery control will be filtered and display all the records.

This way, we can set Power Apps cascading dropdown default value to blank

Conclusion

I hope this tutorial has helped you understand the Power Apps cascading dropdown and how to create a cascading dropdown in Power Apps from the SharePoint list using different scenarios:

• How to create cascading dropdown using SharePoint list in Power Apps
• Cascading dropdown SharePoint lookup column in Power Apps
• Create a cascading dropdown using the SharePoint list person column
• How to Set Default Value Blank in Power Apps Cascading Dropdown

Moreover, we saw how to sort Power Apps cascading dropdown with a simple scenario.

Additionally, you may like some more Power Apps articles:

• How to Validate Power Apps Dropdown Control
• Bind Power Apps Dropdown Values Based On Button Click
• Set Power Apps Dropdown Values Based on Variable

Preeti Sahu

Preeti Sahu is an expert in Power Apps and has over six years of experience working with SharePoint Online and the Power Platform. She is the co-author of Microsoft Power Platform: A Deep Dive book. As a Power Platform developer, she has worked on developing various tools using Power Apps and Power Automate. She also makes Microsoft 365 videos and shares them on YouTube.