Implementation Guide: Getting Started with Power Apps

Microsoft Power Apps is a high-productivity development tool that allows developers and non-developers alike to build rich business applications. It is a powerful tool in app development and is suitable for creating dynamic cascading dropdowns.

This document will provide a step-by-step guide to setting up Power Apps and creating a simple application to lay the groundwork for complex projects such as creating dynamic cascading dropdowns. Be sure to follow each step carefully to avoid any issues.

Section 1: Setting up Power Apps Account

1. Navigate to https://powerapps.microsoft.com/ in any web browser.

2. Click on 'Sign in' at the top right corner of the page.

3. Sign in with your existing Microsoft Account or create a new one.

Section 2: Accessing Power Apps Studio

1. Once signed in, you can open the Power Apps Studio by clicking on 'Create' on the side panel.

2. Click on 'Canvas app from blank'.

3. Specify a name for your new app, choose the format (Tablet or Phone), and then click 'Create'.

You have now successfully set up Power Apps and accessed the Power Apps Studio.

Section 3: Sample App Creation

You will create a simple app that contains a label and button control.

1. From the Power Apps Studio, click on '+ Insert' on the ribbon, then under 'Text', select 'Label'.

2. Click on the label that was added on the screen. A properties window will appear where you can configure the Label properties. Type 'Hello World' in the 'Text' field.

3. Now, select '+ Insert' on the ribbon, then under 'Button', select 'Button'.

4. Click on the button that was added on the screen and in the 'Text' field, type 'Click Me'.

5. To make the button interactive, select the button, then in the 'Action' tab in the ribbon, select 'OnSelect'. In the formula bar that appears, type Label1.Text="Hello Power Apps".

6. Click on 'File'->'Save' to save your app. Then, click on 'File'->'Publish to Teams' to publish your app to Microsoft Teams.

Section 4: Running the Sample App

1. Open Microsoft Teams.

2. Click on 'Apps' on the left side of Teams.

3. Search for your app by typing its name in the search bar. Click on your app to run it.

When you run the app, it will display 'Hello World'. When you click on the 'Click Me' button, the text will change to 'Hello Power Apps'.

Conclusion

After you have successfully completed these steps, you're now familiar with Power Apps and have created your first simple app. You now have the foundation to build more complex applications and functions, such as the implementation of dynamic cascading dropdowns based on another dropdown value. Stay tuned for further guides detailing these more advanced functions.

Working with Canvas Apps: Dynamic Cascading Dropdowns

In this section, we'll implement the dynamic cascading dropdown feature within our Power Apps Canvas App. This feature allows subsequent dropdown menus to be populated based on selections from preceding dropdown menus.

Setting Up Data Source

Assuming you already have a data source in place, if not, you can generate a simple Excel sheet with the following columns - Country, State, City, and add entries into each column. Save this Excel file in a OneDrive folder.

Now, let's add this data source to Power Apps:

// Go to view -> Data Sources -> Add data source -> Connect to OneDrive -> Select your Excel file.

Create Dropdown Controls

Create three dropdown controls in the app for Country, State, and City respectively. For now, just place them on the canvas, we will populate them with dynamic data in the next step.

// Go to Insert -> Input -> Dropdown, create three of them for country, state, and city.

Populate Dropdown Menu

Now, let's populate the dropdown menus with data from our data source. Furthermore, the options available in the lower level(menu) dropdowns (State, City) will be filtered based on the selection from preceding dropdown(s).

Here is how we can achieve this:

Populate Country Dropdown

//Select the Country dropdown control -> Go to Properties -> Items Property -> Add the following formula.
Distinct([Your_Excel_File_Name], Country)

This Distinct function ensures that duplicate country names are not shown in the dropdown.

Populate State Dropdown

//Select the State dropdown control -> Go to Properties -> Items Property -> Add the following formula.
Filter([Your_Excel_File_Name], Country = DropdownCountry.Selected.Result).State

This formula filters the states corresponding to the selected country in the previous dropdown.

Populate City Dropdown

// Select the City dropdown control -> Go to Properties -> Items Property -> Add the following formula.
Filter([Your_Excel_File_Name], State = DropdownState.Selected.Result).City

This formula filters the cities corresponding to the selected state in the previous dropdown.

Test your App

Now that everything is set up, you should be able to see the cascading dropdowns working. When you select a country, only the corresponding states should appear in the State dropdown. Similarly, when you select a state, only the corresponding cities should appear in the City dropdown.

// Press F5 or the play button at the top right of the screen to preview.

This is a basic implementation of dynamic cascading dropdowns in Power Apps leveraging the capabilities of the tool. You can further customize it according to your requirements adding more features and functionalities.

With the help of the above steps, you should be able to build a dynamic cascading dropdown in PowerApps effectively. You can apply this solution in the actual world scenario where you need to create dependable dropdowns, where the selection in one dropdown determines the options in the next dropdown.

Cascading Dropdown Implementation in Power Apps

Cascading dropdowns (also known as dependent dropdowns) are often used in Power Apps to drill down data selections from high-level to more granular details. Generally, cascading dropdowns rely on one dropdown's selection to populate the options in the next dropdown.

In this section, the demonstration will involve creating two dropdown inputs; the Car Brands and Car Models based on the selected brand.

1. Creation of Collection Holding Dropdown Information

The OnStart event of the application is a suitable location to create these collections. However, we can place this function anywhere on our app where it makes sense like OnVisible of a screen.

This process involves the creation of a dedicated database or alternative data source that holds the potential dropdown values. However, for simplicity, we will input the data manually.

Here's an example of creating this collection in the OnStart event:

ClearCollect( CarCollection, { Brand: "Audi", Model: "A3" }, { Brand: "Audi", Model: "A4" }, { Brand: "Audi", Model: "A6" }, { Brand: "BMW", Model: "X1" }, { Brand: "BMW", Model: "X3" }, { Brand: "BMW", Model: "X5" } );

2. Creation of Car Brands Dropdown

This dropdown will be populated with the available brands in our created collection. Proceed as follows:

1. Add a new dropdown to your screen.
2. Set this dropdown's Items property to:

Distinct(CarCollection, Brand)

This function will pull unique brands from our car collection.

3. Creation of Car Models Dropdown

This dropdown will be populated with car models based on the selected brand in the first dropdown.

1. Add another dropdown to your screen.
2. Set its Items property to:

Filter(CarCollection, Brand = Dropdown1.Selected.Result).Model

The Filter function matches the brand selected in the previous dropdown and returns corresponding models.

Each time you select a different brand, Power Apps will update the car models dropdown to reflect the associated options.

You can extend this approach to more dropdowns necessitating more granular information based on your needs.

NOTE:

Replace Dropdown1.Selected.Result with Dropdown1.Selected.Brand if there's a blank item in your second dropdown because Distinct() returns a single column table with column name 'Result'. In order to reference the column from CarCollection, you need to use Dropdown1.Selected.Brand or rename the result column to 'Brand' by using this formula Distinct(CarCollection, Brand).Result as Brand.

Managing Dynamic Dropdown Data in Power Apps

In Power Apps, managing dynamic dropdown data essentially involves connecting to a data source and using formulas to modify the Items property of the dropdown control based on another control's selected item. This is a crucial operation in creating dynamic cascading dropdowns where the choice in the first dropdown influences the options in the second dropdown.

In our scenario, consider two dropdowns: Dropdown1 and Dropdown2. The options in Dropdown2 should change based on the current selection in Dropdown1.

For this explanation, let's assume that we already have a Connector to a data source (a SharePoint list, an Excel sheet, a SQL Server database, etc.). The data source, named MyDataSource, has two columns: MainCategory and SubCategory.

Filtering Dropdown Options

Power Apps uses formulas, just like Excel does. We will use the Filter() function to manage our dropdown data.

1. Select Dropdown1 and set its Items property to Distinct(MyDataSource, MainCategory). This function will fetch unique values from the MainCategory column in our data source and populate Dropdown1 with these values.

2. Select Dropdown2. We want to populate this dropdown with SubCategory values that correspond to the currently selected MainCategory in Dropdown1.

Set Dropdown2's Items property to the following formula: Distinct(Filter(MyDataSource, MainCategory = Dropdown1.Selected.Result), SubCategory)

This formula reads the current selection from Dropdown1 (The Dropdown1.Selected.Result part) and fetches SubCategory values where MainCategory is equal to this selection.

That's it! You have now created dynamic cascading dropdowns in Power Apps. When users select an item in Dropdown1, Dropdown2's options will update to reflect this selection.

Ensuring Efficient Data Management

The above example assumes a straightforward data setup where MainCategory and SubCategory map one-to-one. As your data grows more complex, you may need to optimize your implementation to ensure quick responses and accurate data representations.

1. Data Source with Multiple Columns: If your data source contains many columns, consider creating a collection during the app's OnStart event that only has the columns you need. This way, you minimize data retrieval and make your app faster. Use the Collect() and ShowColumns() functions to achieve this.

2. Many-to-One Relationships: If multiple MainCategory values can link to the same SubCategory, ensure your Distinct() function applies after filtering to avoid duplicates in your dropdown.

Remember, ensuring efficient data retrieval and management is key to providing smooth user experiences in any application, and Power Apps is no exception.

Building & Testing Dropdown Interactions

Building Dropdown Interactions

Defining Dependencies

Assuming you have created your dropdowns, we shall start by defining their dependencies. Suppose we have two dropdowns: DropdownOne which is the parent and DropdownTwo which is the child i.e., its values depend on the selection made on DropdownOne.

You should define DropdownTwo depending on the selected value of DropdownOne.

In DropdownOne, specify the source of data.

DropdownOne.Items = YourDataSource

In DropdownTwo, specify items based on DropdownOne selected value.

DropdownTwo.Items = Filter(YourOtherDataSource, ForeignKeyColumnInOtherDataSource = DropdownOne.Selected.PrimaryKeyColumnInDataSource)

Propagating Changes

Next, we need to handle dependencies when a parent dropdown's value changes. Power Apps does this via the OnChange event. Whenever there is a change in the DropdownOne selected value, it will re-evaluate the Items formula on DropdownTwo.

DropdownOne.OnChange = UpdateContext({varSelectedItem: DropdownOne.Selected})

Then, set the Items property of DropdownTwo:

DropdownTwo.Items = Filter(
    YourOtherDataSource,
    ForeignKeyColumnInOtherDataSource = varSelectedItem.PrimaryKeyColumnInDataSource
)

Testing Dropdown Interactions

When testing the dropdown interactions, follow these steps:

1. Select an option in DropdownOne and see how it affects DropdownTwo

Choose an option and check if DropdownTwo's values change accordingly. It should display only related values to the selected value in DropdownOne.

// Set DropdownOne selected value
Set(dropdown1_value, DropdownOne.Selected.PrimaryKeyColumnInDataSource);
Refresh(YourOtherDataSource);

2. Check for Null or Absent Values in DropdownTwo

After the first step, you should also test what happens if there is no related value in DropdownTwo. DropdownTwo should not break and should probably display an empty list.

// Set a non-related value in DropdownOne
Set(dropdown1_value, "Non-Existent Value");
Refresh(YourOtherDataSource);

3. Change the value multiple times to check for propagation conditions

Power Apps propagation should work even if the previous selection had no related values in the child dropdown, or one of the dropdowns had null values. Continuously change DropdownOne's selected item and check DropdownTwo's behavior.

// Test propagation by changing values
Set(dropdown1_value, DropdownOne.Selected.PrimaryKeyColumnInDataSource);
Refresh(YourOtherDataSource);
Set(dropdown1_value, DropdownOne.Selected.AnotherKeyColumnInDataSource);
Refresh(YourOtherDataSource);

4. Compare final selected value for consistency with the data source

Finally, ensure the selected value in both dropdown lists are consistent with what you have in your data source.

By meticulously following these steps, you'll ensure that your dropdown lists interact as desired, data integrity is maintained and usability is optimized.

Final App Demonstration and Review

After successfully designing cascading dropdowns, managing dynamic dropdown data, and building & testing dropdown interactions in Power Apps, we finalize the implementation by demonstrating how the application works and reviewing the whole process.

App Demonstration

Let's initialize the application which showcases all the cascading dropdowns that were implemented.

    //Start the app on Power Apps Studio
    App.OnStart();

Show Main Menu

We initiate by bringing up the main menu.

    //Navigate to the main screen
    Navigate(MainMenu, ScreenTransition.Cover);

Next, an overall view of all the cascading dropdowns implemented is shown. By following these steps, you will witness the dynamic behavior designed throughout the project.

1. Navigate through different screens showcasing different dropdowns in the app.
2. Select a value from the first dropdown.
3. Notice that the options in the subsequent dropdown dynamically change based on the initial selection.
4. Repeat the procedure for all dropdowns set up in the app.

    //Select a value from the first dropdown
    Dropdown1.Selected.Value;

    //Options in the next dropdown change based on the above selection
    Dropdown2.Items;

    //Select a value from the second dropdown
    Dropdown2.Selected.Value;

    //Options in the next dropdown change based on the above selection
    Dropdown3.Items;

    //Same process will be followed for any subsequent dropdowns

App Review

After the demonstration of the dynamic cascading dropdowns, it’s time to review.

Display All Selections

All selections made in the dropdowns can be presented on a final screen or can be stored in a Collection. Here, we will just display them on a Label (for simplicity).

    //Store all selections in a Collection
    ClearCollect(CollectedItems, {First: Dropdown1.Selected.Value, Second: Dropdown2.Selected.Value, Third: Dropdown3.Selected.Value});

    //Display the Collection Items on a Label
    Label1.Text = "First Dropdown Selection: " & CollectedItems.First & " Second Dropdown Selection: " & CollectedItems.Second & " Third Dropdown Selection: " & CollectedItems.Third;

Analyze Errors

To evaluate the dropdown interactions, the following code can be used.

    //Show errors if any in a Label
    If (IsBlank(Dropdown1.Selected.Value), LabelError.Text = "Error: No selection made in First Dropdown";, LabelError.Text = "");
    If (IsBlank(Dropdown2.Selected.Value), LabelError.Text = "Error: No selection made in Second Dropdown";, LabelError.Text = "");
    If (IsBlank(Dropdown3.Selected.Value), LabelError.Text = "Error: No selection made in Third Dropdown";, LabelError.Text = "");

The implementation of a dynamic cascading dropdown is now complete. With the review process, we successfully integrated a clean, concise and efficient approach used in dialog fields where the value in the next field changes depending upon the value set in the previous fields.