This Power Apps article explains all the details about Modern Combobox control in Power Apps, including its key properties.
Additionally, we will see how to use Power Apps Modern Combobox control with various scenarios like:
- How to display items manually in Power Apps Modern Combobox
- Display SharePoint list items in a Power Apps Modern Combobox
- Display Microsoft 365 Group Members in Power Apps Modern Combo box
We will also learn how to enable the Power Apps Modern Controls for the Canvas app.
Power Apps Modern Combobox Control
Power Apps Modern Combobox is a control that lets people select from provided options. It looks exactly like a Modern Dropdown control.
This control also allows multiple selections and searches using Allow multiple selections and Allow searching properties.
Refer to the image below that how a Modern Combo box looks like:
This is the overview of a Modern Combo box control in Power Apps.
Power Apps Modern Combobox Control Properties
The table below represents some of the important properties of a Power Apps modern Combobox control:
Property | Description |
---|---|
Items | It specifies where the information comes from for the Combox items. |
Allow multiple selections | You can choose one or more values from the Combo box control if you enable it. Else you can only choose one value at a time from the control. |
Allow searching | Specify the field or column you want to search in the Modern Combobox. |
OnChange | When the user changes a selection, it specifies how the app responds. |
Display mode | It defines whether the control allows user input (Edit), Displays data (View), or is disabled (Disabled). |
DefaultSelectedItems | If you want to set any default item when a user opens the app, you need to specify that single or multiple items in the Modern Combo box DefaultSelectedItems property. |
Position | X – 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. |
Size | Width – The distance between the control’s left and right sides. Height – Distance between the control’s top and bottom. |
Visible | Specifies whether to display or hide the Modern Combo box control. |
These are the properties of a Modern Combobox in Power Apps.
Add Power Apps Modern Combobox Control
Here, we’ll see how to add a Modern Combobox Control in the Power Apps Canvas app.
First, the “Modern controls and themes” option must be enabled on the Power Apps Canvas app Settings page.
If you disable this option, you cannot see the Modern controls in Power Apps. To activate Power Apps Modern Controls, follow these steps:
- Sign in to Power Apps with your valid Microsoft credentials.
- Create a New Blank Canvas app (Apps -> + New App -> Canvas).
- Provide a unique name for the app (Power Apps Modern Combo Box), choose the Format as Tablet, and Click on Create.
- On the Power Apps Screen, Click on ellipses (…) from the top -> Settings.
5. From the Settings pane, Go to General -> Scroll down and Enable the Modern controls and themes as shown below. Click on Close.
6. Expand the + Insert tab (from the top) -> Modern -> Select Combobox under Preview section.
7. When inserted, the Modern Combobox will appear on the screen with the default name ComboboxCanvas1. You can change the name to anything you like.
This is how to add Modern Combobox control in the Power Apps Canvas app.
How to Use Power Apps Modern Combobox Control
Let’s discuss how to add items to a Power Apps modern Combo box manually as well as from a SharePoint list.
Display Items Manually in Power Apps Modern Combobox
1. In Power Apps, while inserting a Modern Combobox, by default, it will appear with some sample items or options like Item 1, Item 2, etc. You can change these options according to your needs.
2. If you want to add items manually to the Modern Combo box, then set its Items property as:
Items = ["Jennifer", "Bradpit", "Scotty", "Rhiana", "Rose"]
Make sure you provide options with an inverted comma (“”) and a parenthesis []. Else, you may face some issues.
3. Save, Publish, and Preview the app. Once you expand the Modern Combobox, you can view all the manual options in the image below.
4. As I mentioned above, there are two main properties available, i.e.
- Allow multiple selections
If you enable this property, the user can select multiple options from the modern combo box. Select the modern combobox and make the Allow multiple selections property On.
Preview the app. Expand the modern combo box; you can select multiple items, as shown below. All the combo box selected items will appear with a comma delimeter.
- Allow searching:
If you enable this property, the user can search for a particular item from the modern combo box. Select the modern combobox and make the Allow searching property On.
Preview the app. Expand the modern combo box and search for a specific item. It will give you the specific search item from the combo box.
This way, we can add items manually and select and search multiple items in modern Power Apps Combo box control.
Display SharePoint List Items in a Power Apps Modern Combobox
Next, we will explore how to display SharePoint list items in a Modern Power Apps Combobox control.
I have a SharePoint list named Project Details. This list has four various columns:
Column | Datatype |
---|---|
Project Name | Title [Single line of text] |
Employee Name | Single line of text |
Employee Types | Choice [Temporary, Permanent, Contract] |
Manager | Person or Group |
Now, I would like to get all the values from different columns and display them in the Power Apps modern Combo box control.
Display SharePoint Text Column Values in Power Apps Modern Combobox
Suppose I want to display the SharePoint text values in the modern combo box, then follow the steps below:
1. Select the Modern Combobox and set its Items property as:
Items = Distinct('Project Details',Title)
Where,
Title = SharePoint text field name
2. The modern combobox will appear with blank values when you preview the app, as shown below. Instead of a blank combo box, it should display all the SharePoint text values.
3. To overcome it, remove all the SharePoint fields from the modern combobox and insert only the value.
Go back to the app. Select the modern Combobox -> Properties -> Edit from the Fields section -> Select ellipses (of an individual) -> Remove.
In the same way, remove all the fields from the Data section.
4. Now click on the + Add field -> Select Value -> Click Add button.
5. Finally, preview the app. Once you expand the modern combo box, you can see all the SharePoint text values below.
This is how to display SharePoint text column values in Power Apps modern combobox control.
Display SharePoint Choice Values in Power Apps Modern Combobox
Next, if you want to display all the SharePoint choices in the Power Apps modern combo box, then follow the steps below:
1. Select the Modern Combobox and apply the code below on its Items property as:
Items = Choices('Project Details'.'Employment Types')
Where,
‘Employment Types’ = SharePoint Choice field name
2. Preview the app. Expand the Modern Combobox; you can view all the SharePoint choices below.
This way, we can get all the SharePoint choice values in the modern Power Apps Combobox.
Display SharePoint Person Column in Power Apps Modern Combobox
Let’s say in Power Apps modern Combobox, you want to display all the people from the SharePoint Person column. In that case, follow the approach below:
1. Select the Modern Combobox and apply the code below on its Items property as:
Items = Distinct(
'Project Details',
'Manager'.DisplayName
)
Where,
Manager = SharePoint Person Column (If you want to view the manager display name, then put .DisplayName)
2. Also, make sure to remove all the fields from the modern Combobox Data pane [if it was added before], and add the Value field into it.
3. Preview the app. Expand the Modern Combobox; you can view all the SharePoint people as shown below.
This way, we can use the Modern Combobox Control in Power Apps.
Display Microsoft 365 Group Members in Power Apps Modern Combo box
- In Power Apps Modern Combobox, to display all the Microsoft 365 Group members/people, write the code below on Combobox’s Items property:
Items = Office365Users.SearchUser({searchTerm:ComboboxCanvas2.SearchText}).DisplayName
Where,
ComboboxCanvas2 = Modern Combobox control name [To display the member name, provide “.DisplayName“]
Before writing the code, make sure to connect the Office 365 Users connector to the Power Apps app. Otherwise, you may face a connection issue.
- Select the modern Combobox -> Properties -> Edit from the Fields section -> + Add field -> Select Value -> Click Add button.
- Publish and preview the app once. Expand the Modern Combobox to see all the Microsoft 365 users, as shown below.
This way, we can display Microsoft 365 Group Members in the Power Apps Modern Combo box.
Some more Power Apps modern articles you may also like:
- Power Apps Modern Slider Control
- Power Apps Modern Table Control
- Power Apps Modern Radio Group Control
- Power Apps Modern Information Button Control
- Change Power Apps Dropdown to Radio button
Conclusion
This Power Apps tutorial explained all about the Modern Combobox control, its properties, and how to use it with various examples like:
- Display items manually in Power Apps Modern Combo box
- How to display SharePoint list items in a Power Apps Modern Combobox [using Text, Choice, and Person column]
- Get Microsoft 365 Group Members in Power Apps Modern Combo box
I am Bijay a Microsoft MVP (10 times – My MVP Profile) in SharePoint and have more than 17 years of expertise in SharePoint Online Office 365, SharePoint subscription edition, and SharePoint 2019/2016/2013. Currently working in my own venture TSInfo Technologies a SharePoint development, consulting, and training company. I also run the popular SharePoint website EnjoySharePoint.com