How to Use Power Apps Modern Combobox Control?

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:

Power Apps Modern Combobox Control

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:

PropertyDescription
ItemsIt specifies where the information comes from for the Combox items.
Allow multiple selectionsYou 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 searchingSpecify the field or column you want to search in the Modern Combobox.
OnChangeWhen 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).
DefaultSelectedItemsIf 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– 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 distance between the control’s left and right sides.
Height – Distance between the control’s top and bottom.
VisibleSpecifies whether to display or hide the Modern Combo box control.

These are the properties of a Modern Combobox in Power Apps.

See also  PowerApps ForAll Function with examples

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:

  1. Sign in to Power Apps with your valid Microsoft credentials.
  2. Create a New Blank Canvas app (Apps -> + New App -> Canvas).
  3. Provide a unique name for the app (Power Apps Modern Combo Box), choose the Format as Tablet, and Click on Create.
  4. On the Power Apps Screen, Click on ellipses () from the top -> Settings.
Add Power Apps Modern Combobox Control

5. From the Settings pane, Go to General -> Scroll down and Enable the Modern controls and themes as shown below. Click on Close.

How to Add Power Apps Modern Combobox

6. Expand the + Insert tab (from the top) -> Modern -> Select Combobox under Preview section.

Add Power Apps Modern Combobox

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.

Add Power Apps Modern Combo box

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.

How to Use Power Apps Modern Combobox Control

3. Save, Publish, and Preview the app. Once you expand the Modern Combobox, you can view all the manual options in the image below.

Display Items Manually in Power Apps Modern Combobox

4. As I mentioned above, there are two main properties available, i.e.

  • Allow multiple selections
See also  Build a Calculator in Power Apps

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.

Select multiple items in Power Apps Modern Combobox

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.

Select multiple items in PowerApps Modern Combobox
  • 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.

Search item in Modern Power Apps Combobox

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.

Search item in Power Apps Modern Combobox

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:

ColumnDatatype
Project NameTitle [Single line of text]
Employee NameSingle line of text
Employee TypesChoice [Temporary, Permanent, Contract]
ManagerPerson or Group
Display SharePoint List Items in a Power Apps Modern Combobox

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

Display SharePoint List Items in Power Apps Modern Combobox

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.

Display SharePoint List Items in Modern Power Apps Combobox

3. To overcome it, remove all the SharePoint fields from the modern combobox and insert only the value.

See also  Power Apps Pen input [Capture a Power Apps Digital Signature]

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.

Get SharePoint List Items in Modern Power Apps Combobox

4. Now click on the + Add field -> Select Value -> Click Add button.

Get SharePoint text values in Modern Power Apps Combobox

5. Finally, preview the app. Once you expand the modern combo box, you can see all the SharePoint text values below.

Display SharePoint Text Column in Power Apps Modern Combobox

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

Display SharePoint Choice Values in Power Apps Modern Combobox

2. Preview the app. Expand the Modern Combobox; you can view all the SharePoint choices below.

Display SharePoint Choices in Power Apps Modern Combobox

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)

Display SharePoint Person Column in Power Apps Modern Combobox

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.

Display modern combobox items from SharePoint Person Column

3. Preview the app. Expand the Modern Combobox; you can view all the SharePoint people as shown below.

Display modern combobox items from SharePoint Person field

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.

Display Microsoft 365 Group Members in Power Apps Modern Combo box
  • Select the modern Combobox -> Properties -> Edit from the Fields section -> + Add field -> Select Value -> Click Add button.
Get Microsoft 365 Group Members in Power Apps Modern Combobox
  • Publish and preview the app once. Expand the Modern Combobox to see all the Microsoft 365 users, as shown below.
Display Microsoft 365 Members in Power Apps Modern Combobox

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:

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
>