In this article, we’ll see how to create the parent-child relationships in two drop-down lists, to achieve we need to create a list in the SharePoint site collection. Then we’ll create an App to connect the data source.
Step 1 - Create a blank List and add travel countries & destination

The data stored in SharePoint list as below.

Step 2- Create a Canvas App from the maker portal select the data source like SharePoint


Step 3 - Design the home screen that typically contains
App name
Logo of the company
User’s information
Set a variable to store logged-in user details on App “OnStart” event. This is standard practice to load relevant detail on the app start.

Step 4- Add user details name & email


Step 5- Add a drop-down list from the Input section and configure the data source & value


Step 6 - Show the distinct values in the country dropdown by editing the formula section using a distinct function. You will see the formula result in the preview.

Step 7 - Add another dependent drop-down that will show the related tourist destination based on the selected country and configure as below.

Step 8 - Save & press the play button
Source Code - Please download the app from this link Github.
Happy learning!!
Comments