Creating Cascading Dropdowns in Canvas Apps Using SharePoint Data

Cascading dropdowns — where one dropdown filters another — are a common requirement in Canvas Apps, especially when building forms that depend on related data. In this post, I’ll walk you through how to build a cascading dropdown setup using SharePoint as your data source. Our scenario is a travel request app, where users choose a State and then a City within that state.

We’ll use three SharePoint lists:

• Travel Request – where form submissions are stored.

• States – a list of all available states.

• Cities – a list of cities, each with a lookup column referencing a state.

If you’ve tried to use a standard Canvas App form, you’ll have noticed that even if you relate cities to states in SharePoint, the form doesn’t automatically filter the City dropdown based on the selected State.

Filtered Boxes Not working

Step 1: Add All Relevant Data Sources

Before anything else, make sure that your Canvas App includes all three SharePoint lists. Add Travel Request, States, and Cities to your data sources.

Step 2: Filter the City Dropdown

Next, we need to tell the City dropdown to only show cities that match the selected state.

• Unlock the City datacard to make edits.

• Rename your State dropdown combo box to something recognizable (e.g., dcv_State).

• Select the City combo box inside the City datacard and set the Items property to:

  Filter(Cities, State.Id = dcv_State.Selected.Id)

  This filters the list of cities based on the state selected in the State dropdown. However, this introduces a new problem — the form no longer automatically knows how to save this value back to the Travel Request list. Let’s fix that.

Step 3: Customize the Update Property

Because the City column in your Travel Request list is a SharePoint lookup, Power Apps expects the selected value to be in the correct format (an object with Id and Value).

Update the Update property of the City datacard to the following:

{

Value: dcv_City.Selected.Title,

Id: dcv_City.Selected.ID

}

This tells Power Apps exactly what to send when saving the form — both the display value (Title) and the internal ID for the lookup.

Step 4: Set the Correct Default Value

To display the saved city when editing a form submission, we need to translate the stored lookup into an item in the Cities list. Set the DefaultSelectedItems of the City combo box to:

LookUp(Cities, ID = ThisItem.City.Id)

This ensures the combo box shows the correct city when the form loads, even in edit mode.

Final Notes

Cascading dropdowns aren’t hard — but they do require a little manual setup to get things working just right with SharePoint. The key is understanding how lookup fields work under the hood and ensuring your filtered combo boxes are configured to both display correctly and submit properly.

Drop Down Filters working