Power Apps Modern Dropdown Control [Complete Tutorial]

Are you aware of Power Apps Modern Dropdown Control and its uses? No problem!

In this Power Apps tutorial, we will discuss everything about Power Apps Modern Dropdown Control, it’s all properties, and how to use the Power Apps Dropdown control with a real scenario.

Moreover, we will learn how to enable Power Apps Modern Controls in the Canvas app.

Also, Check more details on Power Apps Dropdown Control

Power Apps Modern Dropdown Control

  • Power Apps Modern Dropdown Control is a list or group of items that show when a user selects the Chevron menu.
  • In Power Apps, the difference between a standard Dropdown control and a Modern Dropdown control is:
    • The standard dropdown control shows only the first item unless and until the user selects another one.
    • However, the Modern dropdown control won’t show the first or last item from the dropdown menu even when it has some values. The user can choose any value in the dropdown menu.
  • Additionally, a Power Apps Modern Dropdown Control can only accept one item at a time. Because of this, a user cannot choose more than one item from the Modern Dropdown Control.

Refer to the image below for your reference that how Dropdown Modern Control looks like in Power Apps.

PowerApps Modern Dropdown Control
PowerApps Modern Dropdown Control

This is the overview of Modern Dropdown Control in Power Apps.

have a look: Power Apps Modern Button Control [Complete Guide]

Power Apps Modern Dropdown Control Properties

The Power Apps Modern Dropdown Control’s key properties are shown in the table below:

PropertiesDescription
ItemsIt helps to display the table containing values inside the dropdown list. For example, [“USA”, “Australia”, “Brazil”]
RequiredThis has to be filled out.
Display modeThere are three modes:
Edit – The user can enter the data
View – Allows only to display data
Disabled – The control is greyed out with disabled mode
Accessible labelWhen a user chooses the control, screen readers will read this text out.
ContentLanguageIndicates the audience’s language (for example, “en-US”)
Position– Distance between the control’s left side and the screen’s left edge
Y – Distance between the top of the control and the top edge of the screen
SizeWidth – The gap between the control’s left and right sides.
Height – Distance between the control’s top and bottom.
OnChangeActions that will be carried out when the progress bar’s Value attribute changes.
OnSelectActions that will be carried out after pressing the button.
SelectedRecord of the user-selected drop-down list item.
DefaultSelectedItemsThe control’s initial values are shown before the user interacts with it.
SelectedItemsRecords from the drop-down list that the user has chosen.
TextText that appears on the Modern Dropdown Control.
VisibleSpecifies whether to display or hide the Modern Dropdown control.
Power Apps Modern Dropdown Control Properties

Check out: PowerApps Dropdown Gallery + Examples

See also  Power Apps Modern Table Control [How to Use]

How to Add Power Apps Modern Dropdown Control

Next, we will see how to add a Modern Dropdown Control in Power Apps.

But before that, we must enable one of the features on the Power Apps Canvas app Settings page (Try out the modern controls).

If you don’t enable this option, you won’t be able to see the Modern controls in Power Apps. Follow the steps below to activate Power Apps Modern Controls:

  • Sign in to Power Apps with your valid Microsoft credentials.
  • Create a New Blank Canvas app (Apps -> + New App -> Canvas).
Add a Power Apps Modern Dropdown Control
Add a Power Apps Modern Dropdown Control
  • Provide a unique name to the app (Power Apps Modern Dropdown Control) -> Choose the Format as Tablet -> Click on Create.
Power Apps Modern Dropdown Control
Power Apps Modern Dropdown Control
  • On the Power Apps Screen, Go to Settings (from the top) -> Select Upcoming features -> Click on the Preview tab -> Enable Try out the modern controls as shown below.
  • Save and Publish the canvas app once.
Dropdown Modern Control in Power Apps
Dropdown Modern Control in Power Apps
  • Then, Expand the + Insert tab (from the top) -> scroll down, and expand Modern controls -> Select Dropdown control as below.
How to add Power Apps Modern Dropdown Control
How to add Power Apps Modern Dropdown Control
  • Once the Modern Dropdown control is added to the screen, its default name will be DropdownCanvas1. You can rename it as per your need.
  • Next, we will add some values on the Modern Dropdown control like IT, HR, FINANCE, and SALES.
  • To do so, select the Dropdown control and add the below values on its Items property:
Items = ["IT", "HR", "FINANCE", "SALES"]

Make sure, you need to specify the choice values including the ” “ enclosed with a square bracket [].

See also  How to Sort Dropdown Choices Alphabetically in Power Apps?

Here in the below image, Select Department is a Power Apps Text Label control.

Modern Dropdown Control in Power Apps
Modern Dropdown Control in Power Apps
  • Save, Publish, and Preview the app. When you use the chevron to expand the Modern Dropdown control, all of the departments, including IT, HR, FINANCE, and SALES, will be displayed. You can choose any value you like.
Add Modern Dropdown Control in Power Apps
Add Modern Dropdown Control in Power Apps

This is how to add a Modern Dropdown Control in Power Apps.

Read: Show hide fields based on dropdown selection PowerApps (2 Examples)

How to use Power Apps Modern Dropdown Control

Now let’s take a simple scenario that how to work with Modern Dropdown control in Power Apps.

Scenario:

  • The below GIF file represents a Power Apps Event Details screen. This screen contains a Power Apps Modern Dropdown control and a Gallery control.
  • The gallery will filter all the records according to the selected modern dropdown value. For example, if I will select a location as “Pentagon“, then the gallery displays only the filtered record details that belong to the Pentagon location.
Power Apps Modern Dropdown Control
Power Apps Modern Dropdown Control
  • The below screenshot represents the SharePoint list (Scheduled Events) that I have used for this scenario. This list has various columns with different data types. Such as:
  1. Title = Single line of text column
  2. Department = Choice Column
  3. Location = Choice Column
  4. Event Manager = Person or Group Column
  5. Start Date, End Date = Date and time Column
Power Apps Modern Dropdown
Power Apps Modern Dropdown

Follow the steps below to achieve the above requirement in Power Apps.

Step – 1:

  • Create a New Blank Canvas app in Tablet format (As we already discussed the steps above that how to create a Power Apps Canvas app and add a Modern Dropdown control into it).
See also  How to create and use dataflow in Dataverse

Step – 2:

  • Next, we need to connect the SharePoint list data source connector to the app. To do so, go to the Data tab (from the left nav) -> Click + Add data -> Search SharePoint in the search bar -> Select SharePoint data source connector.
Power Apps Modern Dropdown Control
Power Apps Modern Dropdown Control examples
  • If it’s your first time using it, you’ll need to make a new connection; otherwise, click the SharePoint connection listed below.
Modern Dropdown control Power Apps
Modern Dropdown control Power Apps

Step – 3:

  • You can either tap the current SharePoint site under the Recent Sites category or enter the SharePoint site URL to connect to it.
  • Choose your SharePoint list (Scheduled Events) -> Click on Connect.
PowerApps Modern Dropdown Control examples
PowerApps Modern Dropdown Control examples

Step – 4:

  • Now the SharePoint list connection (Scheduled Events) is ready to use.
  • Insert a Modern Dropdown control (rename it to ddSelectLoc) and set its Items property to the code below:
Items = Choices('Scheduled Events'.Location)

Where,

  1. Scheduled Events‘ = SharePoint List Name
  2. Location = SharePoint Choice Column

NOTE:

Make sure, the Modern Dropdown control fields should be blank values. Otherwise, you can not able to view any of the choice values in the dropdown control.
You can remove all the fields from the Modern Dropdown control by using the Fields section (Properties -> Fields -> Edit -> Remove SharePoint fields) as shown below.
Modern Dropdown in Power Apps
Modern Dropdown in Power Apps

Step – 5:

  • Next, Add a Power Apps Gallery control (+ Insert -> Vertical Gallery) and change its Layout to Title, subtitle, and body.
  • Select the gallery and apply the code below on its Items property as:
Items = Filter(
    'Scheduled Events',
    Location.Value = ddSelectLoc.Selected.Value
)

Where,

  1. Filter = Power Apps filter function finds table records that match a formula.
  2. Location = SharePoint Choice Field
  3. ddSelectLoc = Modern Dropdown control name

Refer to the screenshot below.

Power Apps Modern Dropdown
Power Apps Modern Dropdown

Step – 6:

  • Then, to display all the text in the gallery control, apply the code below on the Label’s Text property as:
Title: Text = "Event: " & ThisItem.Title
Subtitle: Text = "Department: "&ThisItem.Department.Value
Body: Text = "Event Manager: " & ThisItem.'Event Manager'.DisplayName
Modern Dropdown Control PowerApps
Modern Dropdown Control PowerApps

Step – 7:

  • Finally, we must publish and save the canvas app. The Save button can be found in the top right corner.
  • Along with the save button, publish the app.
  • Click on the Publish this version button.
PowerApps Modern Dropdown examples
PowerApps Modern Dropdown examples

Step – 8:

  • To test the app, close it and reopen it again. Preview the app and select any location from the Modern Dropdown control.
  • The selected dropdown menu below lets you view all the filtered records in the gallery control.
Modern Dropdown Control in PowerApps
Modern Dropdown Control in PowerApps

This is how to use Modern Dropdown Control in Power Apps.

Additionally, you may like some more Power Apps Tutorials:

In this Power Apps tutorial, we discussed everything about Power Apps Modern Dropdown Control, it’s all properties, and how to use the Power Apps Dropdown control with an example.

Moreover, we learned how to enable Power Apps Modern Controls in the Canvas app.

>