How to use Power Apps Combo Box Control?

Do you need help figuring out how to use the Power Apps combo box control? If so, this Power Apps tutorial will guide you through how to use this control in a variety of ways to meet your needs in different scenarios. We will also discuss the topics below. such as:

1. What is Power Apps Combobox control
2. Power Apps combo box properties
3. Power Apps combo box example/add custom values
4. Power Apps combo box limit or item limit
5. Power Apps combo box color
6. Power Apps combo box background color
7. Power apps combo box rounded corner radius
8. Power Apps combo box border thickness
9. Power Apps combo box allows type
10. Power Apps combo box tooltips
11. Power Apps combo box removes the selected value background color

What is the Power Apps Combo box control

• In Power Apps, there is a control named “Combo box” that allows users to choose from a list of options as well as allows for search and multiple selections.
• This Power Apps Combo Box control pretty much looks like a dropdown control that allows users to choose from a list of options.
• It allows both single and multiple selections while using the PowerApps Combo Box control, which can be configured via the SelectMultiple property.
• Also, it allows the user to display a single data value, a picture, and a person value for each item by modifying the Layout settings in the Data pane.
• While working with the Power Apps Combo Box control, the large data sources have no effect on performance because the search is performed server-side on the SearchField property.
• When viewed on a small screen, the items list flyout becomes a full-screen control for improved usability.
• If we want to search for items with any number from the Power Apps Combo box, we must first convert the numbers to text using the Text() function. Example: Text(1234).

Now we’ll look at how to apply this to Power Apps. To use this on the Power Apps screen, we must first prepare the Power Apps screen, which includes the following steps:

• 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.

We can see, it will create a blank canvas app in the Power Apps with a default screen where we can add Power Apps controls, gallery, form, etc.

To find and add the Combo box control to the Power Apps screen, the following steps are:

• On the Power Apps default screen, click on the +Insert > Input (expand it) > Combo box.
• Select the control to add it to the screen.

This is how to add a Combo box control to the Power Apps screen. In our next section, we will see how to work with this control.

Also Read: Power Apps Cascading Dropdown Control

Power Apps Combo box properties

Before working with Power Apps Combo box control, we must be aware of the properties that come under this control. These are:

1. AccessibleLabel: It defines the screen label for
2. BorderColor: The border color of a control.
3. BorderStyle: Whether the border of a control is Solid, Dashed, Dotted, or None.
4. BorderThickness: The width of a control’s border.
5. Items: The data source from which decisions can be made.
6. DefaultSelectedItems: The first item(s) selected before the user interacts with the control.
7. DisplayFields: A list of fields for each item returned by the search is displayed. The Data pane in the Properties option tab is the simplest to configure.
8. DisplayMode: Whether the control accepts user input (Edit), displays data only (View), or is disabled (Disabled).
9. FocusedBorderColor: The color of a control’s border when it is focused.
10. FocusedBorderThickness: The thickness of a control’s border when it is focused.
11. InputTextPlaceholder: End users are shown instructional text when no items are selected.
12. OnChange: Actions to take when a user switches a choice.
13. OnNavigate: When a user selects an item, the respective actions are taken.
14. OnSelect: When a user taps or selects a control, the mentioned actions are taken.
15. TabIndex: Order of keyboard navigation in relation to other controls.
16. Visible: Whether the control is visible or hidden.
17. SelectedItems: List of items chosen as a result of user interaction.
18. SelectMultiple: The user can choose between a single item and multiple items.
19. IsSearchable: Whether or not the user can search for items before making a selection.

Check out: How to Filter Power Apps Dropdown Control

Power Apps Combo box example

Here’s an example of how to create a Power Apps Combo box control. Let’s manually add some items to make a combo box control. We will use the above combo box control to add some items without using a data source.

Select the combo box control and insert the below items into the combo box’s Items property.

Items = ["Texas", "Mexico", "Berlin", "Nice", "Toronto"]

When we add the items listed above to the Power Apps Combo box, the control will look like this, allowing us to select more than one item.

This is how to add custom values to the Power Apps Combo box control.

Power Apps Combo box limit or item limit

The use of Combo box controls in Power Apps has some limitations. That is, Combo box controls are hard-coded to hold no more than 500 items. That is, if a list contains a large number of choice values or selection values, the PowerApps Combo box control will only display 500 items (selection values) at a time.

But if the list is within the Delegable limits (500 by default, but you can increase to 2000), turn on the “Allow Searching” property. This will accomplish your goal by allowing the user to type in characters, and any names containing these characters will be displayed for selection.

We refer you to learn more about the limitation of the Power Apps Combo box control. Or you can click here to get ideas about the Power Apps Combo box limit.

Power Apps Combo box color

There are some color properties available in Power Apps Combo box control that can be used to customize the color of Combo box items, selection, chevron, background, border, hover, and many more.

All of these color properties can be found on the Combo box’s Properties panel. Go to the right-side properties panel after selecting the dropdown.

When we click on any color icon, it allows us to choose a color from the color chart or picker. We can choose the appropriate color based on standards and customs.

The above screen is displaying the list of standard colors. Once we click on any color, it will be applied to that property. Similarly, when we navigate to the Custom section, it allows us to choose the color and its transparency as per the requirement.

This is how to do Power Apps combo box color customizing.

Read: How to Work With Power Apps Dropdown Blank Values

Power Apps Combo box background color

In this section, we’ll look at how to change the background color of a Power Apps Combo box control.

Select the Combo box control on the Power Apps screen and navigate to the right-side Properties panel. Under the Color property, there is a Fill option that is used to visualize the background color. Click on the option and select any color as per your business need.

Suppose, we will select the light purple color. Once we select the color, we can see it will be applied to the background of the Combo box control shown below:

We can also add a color code in RGBA format to the Fill property of the Power Apps Combo box control.

This is how to set a background color to the Power Apps combo box control.

Also check: How to Remove Duplicates in Power Apps Dropdown

Power Apps Combo box rounded corner radius

Do you want to work with Power apps combo box rounded corner radius? To answer your question, Microsoft does not provide this functionality in the Power Apps Combo box control. But there is another manual way by which we can build a rounded corner radius in a Power Apps combo box control.

Recently, we published an article where we described how to build a Power Apps dropdown control with a rounded corner radius. We recommend you follow the mentioned link to get the answer. Make sure to use a combo box control instead of a Power Apps dropdown control.

Power Apps Combo box border thickness

Here, we will see how to work with Power Apps Combo box border thickness. Also, we will see how to set different kinds of borders, and colors to the Combo box control.

In Power Apps Combo box control, there is a property named BorderThickness. Also, we can find that property under the border in the right side properties panel that allows us to increase the border’s thickness of the control.

By default, the border’s thickness will show as 2; but we can customize the border thickness by increasing the number (Ex- 5). The difference is shown below:

Apart from this, it allows the user to customize the control’s border style to Dashed, Dotted, None, and Solid. Suppose, we want to set a border style as Dashed in the Power Apps combo box control.

Similarly, we can set a color for the Combo box control. For this, click on the color picker and select any color as per the business requirement.

This is how to set a Power Apps combo box border thickness and border style.

Read: How to Set Default Value in Power Apps Dropdown

Power Apps Combo box allows type

In this section, we’ll look at how to use the Power Apps Combo box with type. That is, the user can choose items by typing their names. When there are several items listed in a Power Apps Combo box control, it can be awkward to scroll through them to find a specific item. The following steps are taken to remedy the situation.

• On the Power Apps screen, we have created a Combo box control by adding the below items in the Items property, such as:

Items = ["Texas", "Mexico", "Berlin", "Nice", "Toronto","Lincoln","New York","LA"]

• Next, set the toggle to ‘On‘ on the ‘Allow searching‘ (on the right side properties panel) or set the IsSearchable property as true.

IsSearchable = true

Now, play with the Combo box control in preview mode. Let’s select any item(s) by typing their names. Suppose we insert an alphabet ‘L’ on the control, it will show the item’s names that contain ‘L’ like below:

This is how to work with Power Apps Combox box that allows searching.

Check: How to use Power Apps Gallery Dropdown

Power Apps Combo box tooltips

A tooltip is a brief, informative message that appears when a user interacts with a graphical user interface element’s component (GUI). It is possible to display a tooltip on the Combo box control in Power Apps.

Under the Properties panel, there is a Tooltip option where we can insert a short message on the message box. Assume we give a tooltip, ‘Select the preferred job locations.’

With double quotes, we can also add a short message to the Tooltip properties.

Tooltips = "Select the preferred job locations"

To see the tooltips on the Combo box control, play the app in preview mode. We can see the tooltips while hovering over the Power Apps Combo box control.

This is how to set the tooltips on the Power Apps Combo box control.

Power Apps Combo box removes selected value background color

This section will show how to work with the Power Apps combo box to remove the selected value background color. That means while working with Power Apps combo box control, the selected items come with a background color like the below:

At a certain time, this looks odd. As per our requirement, we want to remove the background color from the selected items.

To do this, select the Combo box control and then the SelectionTagFill property. Next, remove the default expression, and insert the expression as below:

SelectionTagFill = White

This is how to remove the selected value background color from the Power Apps Combo box control.

Also, you may like the below Power Apps Tutorials:

• Power Apps Dropdown Control with SharePoint
• How to Sort Combo Box Items in Power Apps
• Power Apps Data Table [Complete Guide]
• Power Apps Gallery Control [Complete Tutorial]
• Power Apps Gallery Group By [With Real Examples]
• Power Apps Gallery Patch [With Various Examples]
• Power Apps Gallery Filter [With Real Examples]
• How to Reset Power Apps Combo Box
• How to Patch a Collection in Power Apps
• How to Sort Power Apps Collection

Conclusion

From this Power Apps Tutorial, we learned all about what a Power Apps Combo box control is. Also, we have discussed how to work with this control in different scenarios. Such as:

• Power Apps Combo box properties
• Power Apps Combo box example by adding custom values
• Power Apps Combo box limit or item limit
• Power Apps Combo box color
• Power Apps Combo box background color
• Power Apps Combo box rounded border-radius
• Power Apps Combo box border thickness
• Power Apps Combo box type
• Power Apps Combo box tooltips
• Power Apps Combo box selected value background color