Using Drop Down Control in Microsoft PowerApps

Introduction

 

Before reading this article, please go through some important links given below.

• Quick Start on Microsoft PowerApps
• To Use Template
• To Use Blank App
• To Add Excel File
• To Use Sort And SortByColumn Functions
• To Use Filter, Search, And LookUp Functions
• To Add Contacts
• To Get User Details
• Developing Camera App
• Using Radio Button
• Developing Drawing App
• Using ListBox Control
• Adding Audio And Video Control
• Using Slider Control
• Import And Export Data In Microsoft PowerApps
• Using CheckBox Control

In PowerApps, we can add the DropDown Control.

 

Drop Down Control

 

A DropDown Control conserves screen real estate, especially when the list contains a large number of choices. The control takes up only one line unless the user selects the chevron, to reveal more choices.

 

Follow the below steps to work with DropDown in PowerApps.

 

Step 1- Log in to PowerApps

 

After downloading the PowerApps from Windows Store, here, we need a Microsoft related organization’s Office 365 ID or (MSDN, Microsoft, Skype, Office 365, etc.,), to login with it.

 

 

Step 2- Create a new app in PowerApps

 

After Login, we will see the Dashboard. There, click on the New button.

 

 

Step 3- Choose the Blank App.

 

 

Step 4 Design the app

 

Now, let's start designing the app. On the left side, we can see the individual screens for adding our data. On the right side, we see the list of Layouts. At the top, we see the formula bar. There, you see the Properties of the screen that you select. On the right side, we see the Add Data Source add the External Data Source.

 

 

Step 5- Drag and drop the Button Control

1. Go to the Insert menu, then Controls, and drag the Button tool.
    
    
2. Drop the Button tool on the screen.
    
    
3. Change the Text Property to Product Sales.
    
    
4. Add the Options
    
   Select the Button and add the following code to the OnSelect Property.
    
   Coding

ClearCollect(CityProduct, {City:"London", Country:"United Kingdom", Productsales:861500}, {City:"Berlin", Country:"Germany", Productsales:356200}, {City:"Madrid", Country:"Spain", Productsales:316500}, {City:"Rome", Country:"Italy", Productsales:287400}, {City:"Paris", Country:"France", Product:227300}, {City:"Hamburg", Country:"Germany", Productsales:176000}, {City:"Barcelona", Country:"Spain", Productsales:160200}, {City:"Munich", Country:"Germany", Productsales:149400}, {City:"Milan", Country:"Italy", Productsales:134400})

 

Step 6- Drag and drop the DropDown Control

1. Go to the Insert menu, then Controls, and drag the DropDown Control.
 
 
2. Drop the DropDown Control on the screen.
    
    
3. Rename the DropDown Control.
    
    
4. Add the Options
    
   Select the DropDown and set the items with distinct names (CityProduct, Country).
    
    

Step 7 Drag and drop the Text Gallery Tool

 

If you click on the DropDown button, the changes appear on the Text Gallery Control.

1. Go to the Insert Menu, then choose Gallery, and drag the Text gallery -> Vertical.
    
    
2. Draw the Text Vertical Control to the screen.
    
    
3. Add Coding

Select the Text Control and add the coding to the Items.

 

Coding

 

Filter (CityProduct, Countries.Selected.Value in Country)

 

 

Now, select the first item in the Text gallery and add the ThisItem.City to Text Property.

 

 

Next, delete the bottom Text box control.

 

 

Step 8 Run the app

 

 

Output 1

 

Main Screen

 

 

Output 2

 

Click on the Product Sales button.

 

 

Output 3

 

Click on the DropDown Button.

 

 

Output 4

 

Choose the items in the DropDown and the text gallery gets changed.

 

 

Conclusion

 

I hope, you understood how to add the DropDown Control in Microsoft PowerApps and how to run it.