cancel
Showing results for 
Search instead for 
Did you mean: 

How to build cascading selections in PowerApps

Cascading dropdowns are widely used user interface pattern. 

 

cascading example.png

 

The screenshot above is from the mobile.de website. The user first selects the vehicle maker and after that, he is able to select the correct model.

 

How do we easily build this kind of hierarchical selections in PowerApps? Let's find out!

 

The contents of the hierarchy

 

Hierarchy of selections has to be stored somewhere. Each level of the hierarchy can have their own table. Alternatively, all levels can be stored on the single table. Like we do in this example. In practice, we use a single SharePoint list.

 

cascading data.png

 

Used columns are

  • ID - Choice id
  • Title - The title of choice (shown to end-user)
  • ParentId - Id for previous level choice this item belongs

 

Version 1 - Basic solution with drop down lists

 

Let's start with empty PowerApps and add created SharePoint list as a data source.

 

cascading-add-datasource.png

 

After that, we add three drop down lists.

 

cascading add dropdpowns.png

 

Pick the first drop down list and set it items to get values from the SharePoint list. Not all list items. Just items ParentId having value 0 (root level).

 

We want to show SharePoint list Title column value in our drop down list. So we pick Title into the drop down's Value property.

 

cascading dropdpown 1.png

 

Time to test. Seems to be working!

 

cascading dropdpown 1 works.png

 

The second and third drop down list values are dependent on the preceding selections. This can be easily done by filtering Items. Item's parentId has to be same than previous selection's id.

 

Items = Filter(CascadingDropDownList, ParentId = ComboBox1.Selected.ID)

Don't forget to set Title as Value.

 

cascading dropdpown 2.png

 

Let's do the same trick for the third drop down list and test how solution looks like.

 

cascading dropdpown 3 works.png

 

It works nicely!

 

However, this solution has two major flaws.

  1. In every list, the first item is selected by default
  2. The user can't search values from the list (important if there is plenty of items to select from)

The first one can be corrected by adding "Make selection" item as the first item in every category. 

There has to be a more elegant way to do this.

 

Version 2 - Selection lists with search

 

Next, we replace all drop down controls with more versatile combo box controls.

 

cascading-combobox.png

 

Drop down and combo box control has identical items feature. We can use the exact same values in them than with drop down lists above. But for combo box, we can define separately

  • Fields that are displayed in the list (Display Fields)
  • Fields that are used as a search field when user filters value (Search Fields)

We use in both cases Title field and set the values as ["Title"].

 

cascading ComboBox 1.png

 

And everything works just fine.

 

cascading ComboBox works.png

 

Version 3 - Disable / enable selections

 

By using combo box a user can search the desired value from the list. However, using combo boxes nicely in our solution needs a little bit of extra work.

 

The initial situation looks cluttered. Is it self-explanatory that there will be items to choose in the second pulldown menu after you have selected values from the first one?

 

cascading ComboBox disable png.png

 

This is easy to fix. Just define second and third combo box display mode to disabled in the case when there is no item selected on combo box before that.

 

cascading ComboBox disable 1.png

 

Now the options are active only after the user has selected values from the previous selection. Considerably better.

 

cascading ComboBox disabled better.png

 

Version 4 - Cancel selections from lower levels when user cancels selection from upper level

 

A user can remove the selection from combo box. In a hierarchical choice, this causes a problem. The figure below shows what happens when the user removes the first choice after making selections on every level. 

 

cascading ComboBox disable problem.png

 

Lower choices should be removed also in case the user removes the upper choice.

For this, we need to create to variable: varResetLevel2 and varResetLevel3. Value of the variable is used in the drop down reset feature.

 

cascading update combobox context2.png

 

Whenever the value of the upper selection list is changed, we change (by using the variable) the reset value of the next combo box to true and immediately back to false. This removes selected item from drop down control.

 

cascading update combobox context.png

 

Version 5 - Optimizing performance by using the collection

 

All three combo boxes use the same SharePoint list as a data source. 

 

Our PowerApps will be clearly smoother if we load on the application startup (OnStart) the content of SharePoint list into the collection. This is done by ClearCollect command.

 

ClearCollect(dropdowndata, CascadingDropDownList)

 

cascading ComboBox ucollection.png

 

Now, the content of the selection lists can be constructed by using a collection that is already in memory.  Let's change each selection list to use that collection as a data source instead of the SharePoint list.  

 

ComboBox cascading use collection.png

 

Now SharePoint list values are retrieved only once. A user can select and unselect values as much as she/she likes and our PowerApps runs smoothly without connecting SharePoint.

Meet Our Blog Authors
Labels