\n
![\"1-powerapps-cascading-dropdown-location-list\"](\"https:\/\/www.itidea.nl\/wp-content\/uploads\/2017\/09\/1-PowerApps-cascading-dropdown-Location-list.png\")
<\/a>\nFigure 1 – contents of Location list<\/em><\/li>\n
\n
<\/a>\nFigure 2 – Contents of Training list<\/em><\/li>\n
\nNo content yet.<\/li>\n<\/ol>\n
Purpose<\/h4>\n
The purpose is to create a screen in the PowerApps app to select a Location and after the selection the items shown in the Training drop down will be narrowed to the trainings defined at the specified location in the Training list. To fulfill the schedule a date can be filled and the item can be saved to the list in SharePoint.<\/p>\n
Create an app<\/h4>\n
From the Schedule list in SharePoint create a new PowerApp. Give the app a name and select ‘Create’. PowerApps is building the app out of the box with three screens: browse, detail and edit. The app is now fully functional and can be tested by selecting the Preview button (Play) in the top right of the screen. The app shows no data, because there is no data in the Schedule list. The Plus sign can be selected to navigate to the EditScreen in ‘New Item’ mode and a new item can be added to the list. After selecting a Location all items in the Training list are displayed to select from. Select one and fill in a date and the item can be saved to SharePoint. This is what you get in the out of the box PowerApp created from the Schedule list: To create the cascading drop downs functionality the approach is a bit different. The Schedule list has no knowledge of what Training is given in what Location. The Training list is. The Training list doesn’t has to be aware of all Locations. The Locations list is.<\/p>\n The easiest approach is to create a new Form screen from the Insert tab, New Screen button. This screen consists of an EditForm and some controls, like the icons left and right at the top, the title label and the rectangular blue bar at the top. Controls have to be added to the screen (not the edit form! Make this control smaller if there isn’t any room left on the screen) to be able to select a Location and a Training by selecting Controls, Drop down from the Insert tab.<\/p>\n The drop downs have to be connected to two different data sources: To do so select Data source from the View tab, connect to the appropriate SharePoint sites and add the two lists mentioned. The ‘_1’ is added because the name is already been used by the ootb PowerApp created.<\/p>\n To bind the Location drop down to the appropriate data source you have to select the drop down, select the property ‘Items’ and put in the value ‘Location_1’. The drop down is populated right away. To create the cascading functionality the binding of the Training drop down will be dependent of the selection of the Location drop down. Filter(Training_1,LocationLookup.Id = DropdownLocation.Selected.ID)<\/p><\/blockquote>\n Hit the Preview button (Play) in the top right of the screen to see this working in the browser, but it works in design mode already. All right, the cascading drop downs are working!<\/p><\/blockquote>\n Last things to do are: And this is why I choose a new Form screen in the beginning, we’re going to use this now to make the saving back to SharePoint work. Of course a new Form can be added to a screen all the time. Since the Schedule list was already added as a data source, the form can connect to it by setting the ‘DataSource’ property to ‘Schedule’. To save the data back to SharePoint we’re going to set the Location and Training values in the EditForm to the same values as the cascading drop downs at the top of the screen have. {‘@odata.type’ : “#Microsoft.Azure.Connectors.SharePoint.SPListExpandedReference”, For choice and lookup fields this is the way to save the field back to SharePoint. As you may notice you can’t update this property\u2026 Now update the Default property. Then the controls in the EditForm can be hidden to show only the ScheduleDate field and that’s it! In this post I showed you how to create cascading drop downs and how to save this back to SharePoint. It contains a few caveats, but it’s quite doable.<\/p>\n","protected":false},"excerpt":{"rendered":" In SharePoint Online an app can be easily created using PowerApps to manage data. In this post I want to show you how to create cascading drop downs in an app and save the data back to SharePoint. Start with … Read More »<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39],"tags":[37,47],"class_list":["post-2375","post","type-post","status-publish","format-standard","hentry","category-office-365","tag-office365","tag-powerapps"],"_links":{"self":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/2375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/comments?post=2375"}],"version-history":[{"count":12,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/2375\/revisions"}],"predecessor-version":[{"id":2411,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/posts\/2375\/revisions\/2411"}],"wp:attachment":[{"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/media?parent=2375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/categories?post=2375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.itidea.nl\/index.php\/wp-json\/wp\/v2\/tags?post=2375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n
\n<\/a>Figure 3 – create an app<\/em><\/p>\n
\n<\/a>
\nFigure 4 – name the app<\/em><\/p>\n
\n<\/a>
\nFigure 5 – the Preview button<\/em><\/p>\n
\n<\/a>
\nFigure 6 – browse screen<\/em><\/p>\n
\n<\/a>
\nFigure 7 – select a Training<\/em><\/p>\n
\n<\/a>
\nFigure 8 – item saved to SharePoint<\/em><\/p>\n
\na functional app bound to the data source selected from where the app was created in SharePoint.<\/p>\nCascading drop downs<\/h4>\n
\n<\/a>
\nFigure 9 – new form screen<\/em><\/p>\n
\n<\/a>
\nFigure 10 – Contents of a screen<\/em><\/p>\n
\nThe Location drop down has to be bound to the Location list.
\nThe Training drop down has to be bound to the Training list.<\/p>\n
\n<\/a>
\nFigure 11 – add data sources<\/em><\/p>\n
\n<\/a>
\nFigure 12 – bind a drop down to a data source<\/em><\/p>\n
\nThe ‘Items’ property has to Filter the Training_1 data source where the selected Location in the drop down is the same as the Location lookup value in the Training_1 data source (=the Training list in SharePoint). The formula has to be:<\/p>\n<\/a>
\nFigure 13 – cascading drop down<\/em><\/p>\n
\n<\/a>
\nFigure 14 – select a location and see the training items listed<\/em>
\n<\/a>
\nFigure 15 – select another location and see the training items listed for that specific location<\/em><\/p>\n
\nto add the Schedule date field and
\nsave it all back to SharePoint.<\/p>\n
\nAs the form displays it isn’t connected to any data yet.
\n<\/a>
\nFigure 16 – form not connected to any data<\/em><\/p>\n
\nIn the right pane ‘Form customization’ the layout and fields to show in the form can be chosen.
\n<\/a>
\nFigure 17 – Form customization<\/em><\/p>\n
\nTo do so select the Location data card in the Form and update the ‘Default’ property to<\/p>\n
\nId:DropdownLocation.Selected.ID,
\nValue:DropdownLocation.Selected.Title
\n}<\/p><\/blockquote>\n
\n@odata.type : has to have value #Microsoft.Azure.Connectors.SharePoint.SPListExpandedReference<\/strong>
\nId : for lookup it’s the column id in the list
\nValue : the value of the field shown in the lookup<\/p>\n
\nTherefor you have to unlock the data card by selecting the icon or text ‘Unlock to change properties’.
\n<\/a>
\nFigure 18 – unlock the data card<\/em><\/p>\n
\nIf you did it right the value in the drop down in the Form updates immediately.
\nDo the same for the Training field.<\/p>\n
\nHit the Preview button again, select a Location, Training, fill in a ScheduleDate and press the ‘Submit item’ button at the top right of the screen.
\nIf you don’t see the ScheduleDate field set the Form in New mode, it probably is in Edit mode now.
\n<\/a>
\nFigure 19 – Schedule list update from PowerApp<\/em><\/p>\nSummary<\/h4>\n