How to use Power Apps drop-down control?

Do you know how to use the drop-down controls in Power Apps? If not, this Power Apps Tutorial will show you how to use the drop-down control in a variety of scenarios.

We will also cover all the below topics. Such as:

• Power Apps dropdown vs combo box
• Power Apps dropdown properties
• Power Apps dropdown limit
• power apps dropdown custom values or add item(s)
• powerapps dropdown numbers
• powerapps dropdown color
• powerapps dropdown arrow color
• powerapps dropdown chevron size
• powerapps dropdown background color
• powerapps dropdown tooltip
• powerapps dropdown allows multiple values
• powerapps dropdown with all
• powerapps dropdown border
• powerapps dropdown border-radius or rounded corner
• powerapps dropdown with other option
• powerapps dropdown order
• powerapps dropdown patch
• powerapps dropdown multiple data sources

Power Apps drop-down control

A Power Apps drop-down control saves screen space, especially when the list has a number of choices. Unless the user selects the chevron to reveal more options, the control takes up only one line. The control can display up to 500 items.

Now we will see how to use this on Power Apps. To use this on the Power Apps screen, first, we need to prepare the Power Apps screen and the following steps are:

• Sign in to the Power Apps with your Office365 ID or Microsoft365 User ID.
• In the Power Apps environment, click on the +Create > Blank app > Blank Canvas app > Create.
• Give a name to the app and then choose a format (example: tablet).
• Again, press Create.

It will create an app with a blank screen. On that default screen, we will add a dropdown control. To add this, go to the Insert tab > Input > Drop down > Select. It will appear on the screen with dropdown sample values i.e., 1,2.

This is how to use the drop-down control on the Power Apps screen.

Also read: Power Apps Gallery Group By [With Real Examples]

Power Apps dropdown vs Combobox

We were occasionally puzzled as to whether a Dropdown or a Combo box Power Apps control should be used. To clear up any confusion, we’ll look at the differences between the Power Apps dropdown and combo box controls.

Both the Power Apps Dropdowns and Combo boxes are two very common Power Apps control for presenting a list of options to users.

Power Apps Drop-down control

• It is a list in which the selected item is always visible and the others are only visible when a Power Apps drop-down button is clicked.
• It is a list that only displays the first item unless the user opens it.
• The Power Apps drop-down control is a high-quality content control that allows users to choose one of several preset values from a pull-down menu.

Power Apps Combo box control

• Power Apps Combo box control combines a standard list box or a drop-down list with an editable text box, allowing the users to enter a value that is not in the list.
• It is a control that allows users to choose from a list of options. Search and multiple selections are supported.
• A Power Apps combo box combines a text box and a list box. This type of control allows users to select a predefined value from a list or type their own value into the control’s text box.

Also check: Power Apps Dropdown Control with SharePoint

Power Apps dropdown properties

Let us discuss the properties that are available in the Power Apps drop-down control.

• AccessibleLabel: It describes the screen reader label.
• AllowEmptySelection: It describes if no item is selected and the control displays an empty selection. Users of the app can also clear their selections by selecting the blank item.
• BorderColor: It defines the border color of a control.
• BorderStyle: It describes whether the border of a control is solid, dashed, dotted, or none.
• BorderThickness: It describes the width of a control’s border.
• ChevronBackground: It represents the color that appears behind the down arrow in a dropdown list.
• ChevronFill: It represents the color of a dropdown list’s down arrow.
• Default: It symbolizes the value of control before the user specifies another value.
• DisabledBorderColor: If the control’s DisplayMode property is set to Disabled, it displays the color of its border.
• DisabledColor: It shows the color of its text if a control’s DisplayMode property is set to Disabled.
• DisabledFill: It represents the background color as black. If a control’s DisplayMode property is set to Disabled.
• Fill: It shows the control’s background color.
• FocusedBorderColor: It shows the color of a control’s border when it is focused.
• FocusedBorderThickness: When control is focused, it shows the thickness of its border.
• Font: It shows the name of the font family in which the text would appear.
• HoverColor: When the user keeps the mouse pointer on a control, the color of the text changes.
• HoverFill: When the user keeps the mouse pointer on a control, the background color changes.
• Italic: It shows whether or not the text in control is italicized.
• Items: It shows the data source that contains the items in the control. If the source has multiple columns, set the Value property of the control to the column of data that you want to display.
• OnChange: When a user changes the value of a control, actions must be taken (for example, by adjusting a slider).
• OnSelect: When a user taps or clicks a control, actions are taken.
• PaddingBottom: The distance between the text in a control and its bottom edge.
• PaddingLeft: The distance between text in a control and the control’s left edge.
• PaddingRight: The distance between text in a control and the control’s right edge.
• PaddingTop: The distance between the text in a control and its top edge.
• Reset: The Whether or not a control is reset to its default value.
• Selected: It shows the data record referring to the selected item.
• Tooltip: The informative text appears when a user hovers over a control.
• Underline: Whether or not a line appears beneath the text on a control.
• Visible: Whether the control is visible or hidden.
• Value: The data column that you want to display in the control (for example, if a data source has multiple columns).

Also check: How to Work With Power Apps Dropdown Blank Values

Power Apps dropdown limit

There is a certain limitation to using drop-down controls on the Power Apps. That is: Dropdown controls are hard-coded to have a maximum of 500 items. That means when a list contains a large number of choice values or selection values, the PowerApps Dropdown control will display a maximum of 500 items (selection values) at a time.

Power Apps dropdown custom values or add item(s)

We’ve already seen where to find a drop-down control and how to use it in Power Apps. We’ve also seen that it comes with default values, such as DropDownSample. The order is as follows: 1,2,3.

However, it allows us to customize these sample values, which means we can add values or items as needed. Assume we want to make a dropdown list of countries. For this, the following steps are:

On the Power Apps screen, select the dropdown control and insert the list values within the Items property of the dropdown.

Note- Make sure to insert each value (string only) within the double quotes ( Ex- “<Item>”, separated them with a comma ‘,‘, and enclosed with square braces [ “<Item1>”, “<Item2>”,… ].

Items = ["New York","Los Angeles","Chicago","Houston","Phoenix"]

This is how to add items on the Power Apps drop-down control.

Check out: Power Apps Gallery SharePoint [With 15+ Examples]

Power Apps dropdown numbers

In this section, we will see how to use number values within the Power Apps. Unlike text value, we can insert the number value within the Power Apps dropdown control.

Suppose, we want to insert the number values like 5, 10, 15, 20 on the Power Apps dropdown control. To do this, we need to insert the number value directly within the square braces on the dropdown’s Items property like below:

Items = [5,10,15,20]

This is how to display numbers within the Power Apps numbers.

Power Apps dropdown color

In Power Apps dropdown control, there are some color properties available that are used to customize the dropdown items’ color, selection color, chevron color, and many more.

We can find all these color properties on the dropdown’s Properties panel. Select the dropdown and go to the right-side properties panel.

When we click the color icon, it allows selecting a color from the color chart or color picker. Based on standards and customs, we can select the appropriate color.

In standard, it displays the limited color as per the theme; but in custom, we can customize the color.

This is how to customize the Power Apps drop-down color.

Read: Power Apps Gallery Filter [With Real Examples]

Power Apps dropdown arrow color

Above, we will see we can customize the dropdown color on the Power Apps. Here, we will see whether the Power Apps dropdown arrow or chevron color will change or not.

Yes, we can modify the arrow or chevron color on the Power Apps. There is a property named ‘Chevron Color‘ that allows selecting a color for the dropdown arrow. Suppose, we want to set the arrow color as ‘Maroon’.

For this, select the drop-down control and click on the Color option on the Chevron Color. Then select the color and we can see the arrow color is modified on the drop-down control.

This is how to customize the arrow or chevron color on the Power Apps dropdown control.

Power Apps dropdown chevron size

Do you want to change the size of the Power Apps drop-down chevron? Here, we will discuss it. Unfortunately, Microsoft Power Apps does not allow to change of chevron size.

That means the size of the drop-down chevron cannot be changed as a property, but it is typically a small fraction of the control size. But it allows only to customize the chevron color and chevron background color.

We recommend that you click on the link to get more information about changing the Power Apps dropdown design.

powerapps dropdown background color

Here, we will see how to change the background color on Power Apps drop-down control. There is a Fill option under the Color property that is used to visualize the background color.

To find this, select the drop-down control, go to color on the properties panel, and click on Fill.

It allows choosing the standard or custom color for the Power Apps drop-down control. Suppose, we want to set a custom color as the background color. To do this, click on Fill > Custom > select any color.

Also, we can insert a color code in RGBA format on the Power Apps drop-down’s Fill property.

This is how to give a custom background color to the Power Apps drop-down control.

Also check: Power Apps Gallery Patch [With Various Examples]

Power Apps dropdown tooltip

A tooltip is a short, informative message that appears when a user interacts with a component in a graphical user interface element (GUI). In the Power Apps, it allows giving a tooltip on the drop-down control.

There is a Tooltip option under the Properties panel where we can insert a short message on the message box. Suppose, we will give a tooltip as ‘Select your city from the list.’

Also, we can give a short message on the Tooltip properties with double quotes.

Let’s play the app in Preview mode or click on F5 to see how the tooltip works on the Power Apps dropdown control. Now, the mouse hovers on the drop-down and we can see the tooltip below:

This is how to use a tooltip on the Power Apps dropdown control.

Power Apps dropdown allows multiple values

• What if, in some cases, we need to select more than one item from the Power Apps Dropdown control at the same time? At the same time, we may dread to think, Is it possible to select multiple items from the dropdown control?
• To respond to the above question, no, we cannot select more than one item from the Power Apps Dropdown control. We can only select one item from the control at a time.
• If you want to select multiple values at once, we can use a Combo box or list box control instead of a Power Apps dropdown control.

Read: Power Apps Gallery Control [Complete Tutorial]

Power Apps dropdown with all

In this section, we’ll look at how to use the ‘All‘ option in the Power Apps dropdown control. We want to add an ‘All‘ option inside the Power Apps dropdown control so that the user can select all of the dropdown control’s choice values rather than each item.

We will use the previous SharePoint list i.e., Orders List, which has a choice field called ‘Department‘ (choices- IT, Finance, HR). Let’s create a dropdown control on the Power Apps screen using the choice column shown below:

Now, we will add an All option to this above Power Apps dropdown control. To do this, insert the below expression on the dropdown’s Items property.

Items = Ungroup(
   Table({DepartmentItems:["All"]},
         {DepartmentItems:Choices('Orders List'.Department)}
   ),
   "DepartmentItems"
)

Where the DepartmentItems is the name of the new row or record of the table.

Once the formula is applied, the All option is added to the dropdown control.

This is how to create a dropdown with an ‘All’ option in Power Apps.

Power Apps dropdown border

In the Power Apps dropdown control, there is a property named Border that allows customizing the border style (Solid, dotted, dashed, and none), border thickness (give thickness to teh visual border), and border color(select it from the provided color chart).

We can find this ‘Border‘ property under the dropdown’s properties panel.

Let’s add some customization to the border property. That means, changing the border style to Dotted, border thickness to 4, and border color to Navy Blue. We can see the dropdown control will appear like below:

Similarly, if we set the border style to dashed, then the dropdown control will appear like below:

This is how to customize a Power Apps dropdown’s border.

Check: Power Apps Data Table [Complete Guide]

Power Apps dropdown rounded corner Or Power Apps dropdown border-radius

Do you want to change the border radius or create a rounded corner for the Power Apps dropdown control? To answer your question, Microsoft does not include this feature in the Power Apps dropdown control. We recommend that you click on the link below to learn more about working with the Power Apps dropdown border-radius.

But there is another way to create a rounded corner on the Power Apps dropdown control. Follow the below steps to work with this requirement.

• On the Power Apps screen, add a text input. Remove the default text.
• Set the border style as solid, and increase the border thickness to 6 (as per our screen).
• Also, set the border radius (ex- 8).

• Next, add a dropdown control (we are going to use the previous one) and set the Reorder as bring to front. So that it will appear in front of the text input control.

• On the dropdown control, set the border style as None, and border thickness as 0.
• Adjust the position and size of the dropdown control as per the text input.
• Now we can see the Power Apps dropdown control has a rounded corner like below:

This is how to work with border radius or create the rounded corner on the Power Apps dropdown control.

Power Apps dropdown with ‘other’ option

In this section, we’ll look at how to use the ‘Other’ option with a Power Apps dropdown control.

• That means we’ll make a dropdown control with some options, including one option ‘Other.’
• Users can select any value from the dropdown list, and if they do not find the appropriate choice, they can click on the ‘Other’ option, which will instantly display a text input where they can manually enter their value.
• We will also use a cancel icon to return to the dropdown control from the text input. To work with these scenarios, take the following steps:
• Here, we are going to use the previous dropdown list that contains the choices (Company) from the SharePoint list i.e. Orders lists.

• To add the Other option, we will insert the below expression on the Items property of the dropdown control.

Items = Ungroup(
     Table(
         {DropDownChoices: Choices('Orders List'.Company)},
         {DropDownChoices: ["Other"]}
     ),
     "DropDownChoices"
 )

Where the DropDownChoices is the name of the new row or record of the table.

• Now, we will insert a text input and place it on top of the dropdown control. Resize the height and width as per the dropdown control.
• When the user selects the Other option, the text input will appear instead of the dropdown control.
• For this, insert the below code within the text input’s visible property.

Visible = !CompanyDropdown.Visible

Where CompanyDropdown is the name of the dropdown control.

• Similarly, the dropdown should be visible only when the selected value does not equal ‘Other.’ Insert the below expression in the Visible property of the dropdown control.

Visible = If(CompanyDropdown.Selected.Value <> "Other",true,false)

• Now, save and publish the app. Play the app in preview mode. We can see when we will select any options from the list except “Other”, it will display the dropdown list.

• But when we click on the Other option, it will display only the text input like below:

• Now, we will insert a Cancel icon to the text input. So that when the user clicks on the icon it will reset the fields (both the text input and dropdown control) and return to the dropdown control.
• Go to insert > Icons > Cancel. Place the cancel icon on the top of the text input. Insert the below expression on the OnSelect property

OnSelect = Reset(OtherTextInput);
Reset(CompanyDropdown)

Where OtherTextInput is teh name of the text input control.

• Also, add the following expression to the icon’s visible property, which will make the icon visible only when the Other option is selected. The expression is the same as the visible property of the text input.

Visible = !CompanyDropdown.Visible

• Again, save, and publish the app. Play the app preview mode. We can see when we select the Other option, it will show a text input with a cancel icon.

• Once we click on the cancel icon it will reset the field and return to the dropdown selection.

This is how to add and work with the Other option on the Power Apps dropdown control.

Read: Power Apps Radio Button

Power Apps dropdown order

Here, we will see how to work with order (i.e., ascending or descending) within the Power Apps dropdown control.

Suppose, there is a SharePoint list named ‘Vehicles‘ having a single line column i.e. State.

We have created a dropdown using the above list’s column like below:

On the above dropdown, we have removed the duplicate values using the distinct(). Now, we want to arrange the list in ascending order.

To do this, we need to insert the below expression on the dropdown’s items property.

Items = Distinct(
    Sort(
        Vehicles,
        Trim(State),
        Ascending
    ),
    State
)

Where State is the name of SharePoint’s single-line text column. Once the formula is applied, we can see the values are arranged in ascending order (alphabetical).

This is how to do sorting by ascending or descending in the Power Apps Dropdown control.

Check out: PowerApps stuck on getting your data

Power Apps dropdown multiple data sources

In this section, we will see how to work with multiple data sources within a single dropdown control. Suppose, we have a SharePoint list named Vehicles having 2 single line-text columns such as Owner and last name.

• There is a requirement to create a dropdown control that will display the values from the Last Name if the value is not blank; otherwise, it will display the Owner column value.
• We will add a dropdown control to the Power Apps screen to work with this. To store both column values, we’ll create a new column, and add the following expression to the dropdown’s items property.

Items = AddColumns(Vehicles, "Owner Name",If(IsBlank('Last Name') || IsEmpty('Last Name'), Owner, 'Last Name'))

Where,

• Vehicles: The name of the SharePoint list
• OwnerName: The new column name
• Last Name, Owner: The list’s columns name.

Also, set the dropdown’s value property as the new column name i.e., OwnerName. Now we can see the dropdown will come with multiple data source values shown below:

This is how to work with PowerApps Drop Down display values from multiple Data Sources.

Also, you may like some more Power Apps Tutorials:

• How to Remove Duplicates in Power Apps Dropdown
• PowerApps nested gallery control example
• How to Set Default Value in Power Apps Dropdown
• Power Apps in SharePoint
• Power Apps SharePoint Button

Conclusion

From this Power Apps Tutorial, we learned all about Power Apps dropdown control and also, and we discussed how to use this control based on different scenarios such as:

• What is the Power Apps gallery dropdown?
• Briefly discussion on Power Apps dropdown vs Combobox control?
• What are the properties of the Power Apps dropdown control?
• What is the limitation of the Power Apps dropdown?
• How to add the custom item(s) on the power apps dropdown?
• How to add a number value on the powerapps dropdown?
• How to modify the powerapps dropdown color?
• How to modify the powerapps dropdown arrow color?
• Is it possible to change the powerapps dropdown chevron size?
• How to change the powerapps dropdown background color?
• How to add a tooltip to the powerapps dropdown control?
• Is it possible to work with multiple values within the Power Apps dropdown?
• How to add an All option in the Power Apps dropdown control?
• How to customize the Power Apps dropdown border property?
• How to create a rounded corner powerapps dropdown?
• How to build a powerapps dropdown control with the ‘other‘ option?
• How to order a powerapps dropdown control?
• How to work with the powerapps dropdown using a patch?
• How to create a powerapps dropdown using multiple data sources?