SharePoint: Cascading Dropdowns in 4 Easy Steps!

by PowerApps Staff audrieg a month ago - last edited a month ago

Preparation (data sources):

 

I've decided to use two SharePoint Lists for this example. One as the app data source, and the other for the dropdown list values. Using a SharePoint list for my dropdown values enables end users to modify the form logic on their own. You could use any data source you prefer.

 

The control values list (named: Impacts)

Keeping it simple, I created a list called Impacts with two columns as shown below. Title (main request type), and SCategory (aka sub category - I didn't want to use any spaces or symbols there). The list is sorted by Title, Ascending. (I keep these in a separate list so that I can always show the same set of values in my dropdowns, even if there is nothing in the datasource for my app related to these selections.)

 

Impacts.PNG

 

 

 

The PowerApp List/Data Source (named: CR):

The SharePoint List that will collect the submissions from the PowerApp is very simple so as to facilitate this demo. It has three columns:

  • Change Impact (which is really just the Title column renamed)
  • Sub-Category (single line of text) - optional note: You could make this a choice list if users might be updating directly in SharePoint classic mode as well, only it can not be a multi-select choice list.
  • Answer (multi-line plain text field)

    You'll notice I entered 1 item/record manually using the regular SharePoint "New Item" command, that's just to make it easier to customize my forms. (It can be difficult to customize the forms until you have at least 1 record in the list. You can always delete that configiration record later.)

CR.PNG

 

Adding and Configurating the Dropdown Controls in 4 Easy Steps

 

OK. Now we're ready to have fun.....

 

Step 1: Generate a New Power App from the SharePoint CR List. PowerApps does most of the work for you, leaving you with a fully functional app with Browse Gallery, Display Form, and Edit/New Item Forms.

 

ribbon.png

 

dialog.png

 

Step 2: Add another connection to the app (Content Tab>Data Sources>(far right of screen) + Add data source) that references the "Impacts" list from the site as well. You should now have two data sources in your app, the one PowerApps added for you (destination data source), and the one you just added to the other list.

 

Tip: You can reuse data sources for controls by dedicating a CDS entity, or other data source like SharePoint for that purpose. For instance, I have a SharePoint site collection that is open to "Everyone except external users", where I keep a bunch of controls stuff - but CDS is perfect for this too! Just remember to permission the shared data source so that all users have the rights to read (but not write), and when using SharePoint also disable search results on each list so that the items don't come up in enterprise search results. Aren't you lovin' the fact that you can add additional data sources to your SharePoint PowerApp views so easily!?

 

AddImpacts.PNG

 

Step 3: Make some room above the gallery on the first screen and add a Dropdown Control (Insert>Controls>Dropdown), I named mine "ddSelectType". Set the "Items" property to Distinct(Impacts,Title) to get all the main topics from our Impacts list into that dropdown. Run to test (F5).

 

screen1.PNG

 

newdropdown.PNG

 

Step 4: We're almost done already! Let's make some more room and add another dropdown, which I named ddSubCategory. We will simply filter the ddSubCategory dropdown based on the selection from the first dropdown.

 

The Items property of ddSubCategory:

Filter(Impacts,ddSelectType.Selected.Value in SCategory)

 

Run and test! I just works!

 

 

CostWorking.PNG

 

I plan to share many tips on making your apps interesting, and incorporating data validation. Let me know if you'd like any particular topic and I'll do my best to make that happen for you! Keep visiting the Community because I'll be posting video demos with your popular questions asked as well.

 

Enjoy your PowerApps experience!

 

Audrie

Comments
by UB400
Thursday

Great start @audrieg I'm looking forward to seeing more of your demos. As for ideas for more demos, I would love to see an example of calling screens dynamically i.e. based on User input the User gets directed to a related screen e.g. if it was an Inventory App, if the User selected  "Laptops" they would be directed to Screen2, whereas if they selected "Printers" they would get re-directed to Screen3. This would be particularly useful in scenarios where the presentation or collection of data could be handled differently, if it's type A use a screen with a listbox, if it's type B then use a screen with multiline text as an example.

by PowerApps Staff audrieg
Thursday

@UB400 Thank you for reading the blog, and for planning to come back again. I really like your idea to demo dynamic screens because that is a scenario that comes up fairly often in business forms and apps. Tell you what, I will blog about that on Tuesday next week! Just to give you a hint; the Navigate() function can be used in an If/Then statement....more on that Tuesday. Thank you again for your encouraging comment. --Audrie