PowerApps Combobox Control

In this PowerApps Tutorial, We will discuss what is a Combobox control in PowerApps and what are the various important PowerApps Combobox Properties.

Also, By taking some simple scenarios, we will cover these below things that are related to PowerApps Combobox Control.

• How to add PowerApps Combobox Control
• PowerApps Combobox Add Items or How to add items in PowerApps Combobox control
• PowerApps Combobox Defaultselecteditems
• How to use PowerApps Combobox Selected Value
• PowerApps Combobox Selecteditems
• PowerApps Combobox office 365 users
• PowerApps Combobox Display Fields
• How to do PowerApps Combobox Search Field
• What is PowerApps Combobox SharePoint List

Combobox Control in PowerApps

• PowerApps Combo box control is a type of control that helps you to search for items you will select. This Combobox control exactly looks like a dropdown control that allows users to make selections from provided choices.
• Performance is not affected by very large data sources as the Search is performed server-side on the SearchField property.
• By using the PowerApps Combo box control, single or multiple selections are possible that you can be configured via the SelectMultiple property.
• By modifying the Layout settings in the Data pane, for each item, you can choose to display a single data value, a picture, and a person value.
• Suppose you want to search for items with any numbers, then you need to convert numbers to text with the Text() function. Example: Text(6789).
• When you will use a PowerApps Combo box as a Person or People picker, you need to select the Person template from the Layout settings in the Properties Data pane and configure the person-related data properties as shown below:

PowerApps Combobox Properties

Below represents some of the important properties of PowerApps Combobox control that you should know:

• BorderStyle: It specifies whether the control’s border is a Solid, Dashed, Dotted, or None.
• DisplayFields: It helps to display the list of fields shown for each item returned by the search. You can easily configure via the properties Data pane.
• DisplayMode: 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, then, in that case, you need to specify that single or multiple items to the Combo box DefaultSelectedItems property.
• Height: It specifies the distance between a control’s top and bottom edges.
• InputTextPlaceholder: When no items are selected in the combo box, then this property helps to display the instructional text to end-users.
• OnChange: When the user changes a selection, it specifies how the app responds.
• OnNavigate: When the user clicks on an item, it specifies how the app responds.
• OnSelect: When the user clicks on control, it specifies how the app responds.
• TabIndex: It specifies the Keyboard navigation order in relation to other controls.
• SearchFields: Specify the field or column that you want to search in the Combobox control.
• SelectMultiple: If you will change this property value to true, then you can select one or more values from the Combo box control. If it is false, then you can only select only one single value from the control.
• Visible: This property defines whether a control appears or is hidden.
• Width: It specifies the distance between a control’s left and right edges.

Add PowerApps Combobox Control

Now to do some activities, first of all, we need to add the Combobox control in the PowerApps screen. Follow these below steps to do so:

• Sign in the PowerApps app with your credentials.
• Create a blank new Canvas app and choose any one Layout either Tablet or Phone. Then a new blank Powerapps screen will appear with a Tablet layout.
• On the new blank PowerApps screen, Go to Insert tab -> Click on Input -> Select the Combo box as shown below.
• Once you will click on the combo box control, then the box will appear on the screen that looks like exactly a Dropdown control.

PowerApps Combobox Add Items

Now it’s time to know how you can add items into the PowerApps Combo box control. You can add the items dynamically and as well as from any Data sources like SharePoint Online List, Excel sheet, etc. Let’s take an example.

PowerApps Combobox Add Items Dynamically:

To insert the items dynamically, Select the Combobox control and apply this below formula on its Items property as:

Items = ["Apple", "Orange", "Banana", "Grapes", "Mango"]

Where,

• Apple, Orange, Banana, Grapes, Mango = These are the items that you want to display in the combo box dropdown control.

Once you will preview the app, you can see all the items that are available in the Combo box dropdown control as shown below. You can select a single or multiple items from that control.

NOTE:

When you are adding Powerapps Combo box items dynamically, you should remember one thing i.e. always you need to put the items within a ” “ and a bracket [ ], otherwise it will display an error.

PowerApps Combobox Add Items from Data source:

Similarly, if you want to add the items from any Data source (either SharePoint list, Excel sheet, etc.), then do these below things:

• I have a SharePoint list named Customer Care Report Details as shown below. This list has different types of columns. Among all those columns, it has a single text column named Customer Name. I want to display all the customer names in the Combo box control.

• Next, go to the Powerapps app and connect the SharePoint Data Source (Go to View tab -> Data sources -> Search SharePoint -> Add a new or existing connection -> Select the SharePoint site -> Choose the SharePoint list (Customer Care Report Details) -> Click on Connect button. Then the specific SharePoint list has been added to the app.
• Select the Combo box control and go to Properties pane. Add the SharePoint list Data source (Customer Care Report Details) to Combobox control.
• Now to add the field values in Combobox, Go to Edit -> Choose the Layout as Double. Then the Double layout will appear with these below three categories:

1. Primary text: This will help you to display the item as Primary. Here, I want to display the Customer Name column as the primary item.
2. Secondary text: This will help you to display the item as secondary. Here, I want to display the Customer Care Report For column as the secondary item.
3. SearchField: You need to select the column that you want to search in the Combobox control.

• Save and Preview the app. Once you will click the dropdown icon, you can able to see all the primary and secondary field values as below.
• Similarly, if you will search any customer name in the combo box, then it will display only related to the search item.

NOTE:

You can only search the items if the Allow searching property is enabled, otherwise, the Combobox will not allow you to search any item. To enable this, Select the Combobox control -> Go to Properties pane -> Toggle on to the Allow searching property.
In the same way, if you want to allow the multiple selections in the Combobox, then you should enable the Allow multiple selections property.

PowerApps Combobox Defaultselecteditems

Now we will see how a user can set the Default selected items to the Powerapps Combobox control. For example, suppose you want to set a default item to the combo box control and that item should appear by default when an end-user opens the app every time.

In the PowerApps Combobox control, you can set a single Default selected item and as well as multi-selected items. That means, more than one item also you can add as default to the Combobox control. Follow these below examples to use it very simply.

Example-1:

• In this example, I have a Combobox control that contains these below values on its Items property as:

Items = ["Submitted", "Approved", "Rejected", "Pending", "In Progress"]

• Here, I want to make the Submitted item as my Default selected item that will appear in the Combobox by default.

• Select the Combobox control and set the below item on its DefaultSelectedItems property as:

DefaultSelectedItems = ["Submitted"]

• As I need the single item (“Submitted”) to make as Default, So I applied one single item to the DefaultSelectedItems property. Once you will add the item, you can see the Combobox control will appear with that specific default item as shown below.

• Similarly, Suppose you want to make multiple items (more than one) as default selected items, then write the formula like below:

DefaultSelectedItems = ["Submitted", "Pending"]

• Once you will apply the formula, then the Combobox will appear with those specific multiple items that you have specified in the DefaultSelectedItems property.

NOTE:

Always you should remember, When you are going to add multiple items into the Combobox control, you need to toggle on the Allow multiple selections property or make true to the SelectMultiple property of that control.

Example-2:

• In this example, We will see how we can set the PowerApps Combobox Default selected item from a SharePoint Online List. Below represents a SharePoint list named Gadget Details that contains two columns as:

1. Gadget Name: By default, it is a Title column with a single line of text. Just I renamed it to Gadget Name.
2. Brand: This is also a single line of text column.

• Also, this list has some records as like the below screenshot. Among all the records, I want to set the Combobox Default item as Kindle from the Gadget Name column.

• To do so, Select the Combobox control and apply this below formula on its DefaultSelectedItems property as:

DefaultSelectedItems = Filter('Gadget Details', Title = "Kindle")

Where,

1. ‘Gadget Details’ = SharePoint List name
2. Title = This is the column from the SharePoint list (Gadget Name).
3. “Kindle” = This is the item that you want to set as the default item in the Combobox control.

• When you will preview the app, you can see the specified item will display as by default in the Combobox control.

PowerApps Combobox Selected Value

In this below scenario, we will see what is the PowerApps Combobox Selected value and how you can easily use it in the PowerApps screen or Powerapps form.

• The below screenshot represents the SharePoint ist named Customer Care Report Details. This list has these many columns with the Single line of text data type:

1. Title
2. Customer care Report For
3. Plot Number
4. Bell Reference Number
5. Customer Name

• On the PowerApps screen, I have a Combobox control with the SharePoint list (‘Customer Care Report Details’) Data source connector. When you will add the SharePoint list to the Combobox control, then the list name will automatically appear in the control’s Items property as below.

• Next what I want to do is, Whatever a user will select the item(s) from the combo box control, that specific item’s Bell Reference Number (SharePoint list column) will appear in a Label control.
• For that, Insert a Label control and apply this below formula on its Text property as:

Text = Concat(ComboBox7.SelectedItems, 'Bell Reference Number' & ",")

Where,

1. Concat = This Powerapps function helps to concatenate a mix of individual strings.
2. ComboBox7 = Combobox control name
3. ‘Bell Reference Number’ = SharePoint list column that you want to see in the Label control. Not only the Bell Reference Number, But also, you can pass any column value from the Sharepoint list like Customer Name, Plot Number etc. Suppose, in the Label control, you want to see the Customer name, then you can replace the Customer Name instead of the Bell Reference Number.
4. “,” = This is a string value that represents between two items

• Please make sure that the “Selected” is mostly used in “single selection” mode. At that time the Powerapps Combobox SelectMultiple property should be false i.e. (ComboBox1.SelectMultiple=false).
• The “SelectedItems” property however contains all the selected items in “multiple selection” mode. So at that time the PowerApps Combobox SelectMultiple property should be true i.e. (ComboBox1.SelectMultiple=true).

• Save and Preview the app. Select single or multiple values from the Combobox control. Once you will select, you can see those specific item Bell Reference Number including comma (,) in the label control as shown below.

PowerApps Combobox Selecteditems

Let us discuss about what is the PowerApps Combobox Selected Items and how to use it.

• This scenario defines when you will select any item (s) from the Combobox control, how it exactly reflects in another control in Powerapps.
• I have taken the same SharePoint list (Customer Care Report Details) as in the above example (PowerApps Combobox Selected Value). Also, it is having the same columns and the same records as the previous one.
• On the PowerApps screen, I have a Combobox control and a Label control. The Combobox control is having a Single layout that displays with the Customer Name column values. Follow these below different examples that how a user can select the items from the Combobox control in different ways.

Example-1:

In this example, I want to show (in the Label) only the first item that I will select from the Combobox control. That means, When a user will select single or multiple items, then, in that case, he/she can able to see only the first item in the Label control.

• Select the Label control and apply this below formula on its Text property as:

Text = First(ComboBox7.SelectedItems).Title

Title is the SharePoint list column that you want to display in the Label control.

• Save and Preview the app. Select the item (s) from the Combobox control. You can see only the first selected item value in the label control as shown below.

Example-2:

In this example, I want to show (in the Label) only the last item that I will select from the Combobox control. That means whatever the last item will choose, that item will display in the label control.

• Select the Label control and apply this below formula on its Text property as:

Text = Last(ComboBox7.SelectedItems).Title

• Save and Preview the app. Select the item (s) from the Combobox control. You can see only the last selected item value in the label control as shown below.

Example-3:

In this below example, It will count the number of items that you have selected from the Combobox control and display in the Label control.

• Select the Label control and apply this below formula on its Text property as:

Text = CountA(ComboBox7.SelectedItems.Title)

• Save and Preview the app. Select the item (s) from the Combobox control. Whatever items you will choose in the Combobox, the total number of items will display in the Label control as below.

Example-4:

In this example, suppose you want to display all the items that you have selected from the Combobox control, then follow these below things:

• Select the Label control and apply this below formula on its Text property as:

Text = Concat(ComboBox7.SelectedItems, Title & ", ")

• Save and Preview the app. Select the item (s) from the Combobox control. Now you can see all the items (that you have selected in the Combo box) in the label control (with “,”).

PowerApps Combobox office 365 users

• PowerApps Office 365 Users is a Data source connector that contains all the information about a user. User information like it contains User Display Name, Job Title, User ID, User Email address, etc.
• Normally what happens is, if you want to display a Person field or a people picker field from the SharePoint list, then we are adding a people picker column in the list, and using that column in our Powerapps form, gallery control, etc.
• But here, We can use the people picker control in PowerApps without using any SharePoint Data source. We will do this by using the Office365 Users Data source (because it is already having the user details).
• For more details, you can refer to this below link that how you can use PowerApps Combobox office 365 users Data source connector:

Create People Picker in PowerApps with Combo Box

PowerApps Combobox Display Fields

Here we will discuss how a user can display their desired fields in a PowerApps Combobox control.

• The below screenshot represents a SharePoint list (Travel Details) that contains different types of columns. Among all the columns, it has a Title column (Traveller) and a Vehicle (Single line of text) column.
• Also, this list has some records as shown below.
• In this scenario what I want to do is, I want to display both the Title and Vehicle column at a time in the PowerApps Combo box. That means when a user is going to select the combo box, he/she can able to see both the columns at a time.

• On the PowerApps screen, Insert a Combo box control and add the SharePoint list Data source (Travel Details) to control.
• In the Combo Box control, if you will edit the Fields property, then you can see, there are three different Layouts present as: “Single, Double, and Person“.

PowerApps Combobox with Single Layout:

• If you will select the Layout as Single, then the Combobox will display with a single or one field value. You just need to enter the Primary text value that which field you want to display in the Combo box control.
• As I wanted to display the Combobox with the Title field (Traveller), So I have selected the Primary text as the Title column as shown below.

• Now Save and Preview the app. Click on the Combobox control. You can see all the Traveller’s name (as we selected Single layout) within the control as like below.

PowerApps Combobox with Double Layout:

• If you will select the Layout as Double, then the Combobox will display with double field values. That means, when a user will select the Combo box, he/she can able to see two field values in the Combobox control.
• For that, you need to enter the Primary text value and as well as the Secondary text value.
• As I wanted to see the Combobox with Title field and as well as Vehicle field values, So I selected the Title column in Primary text and the Vehicle column in the Secondary text field.
• There is also a field called SearchField that helps users for searching purpose. That means by depending on which column or value, the user is searching in the combo box.

• Save and Preview the app. Once you will click on the Combobox control, you can see all the Traveller’s name with the Vehicle (as we selected Double layout) within the control as like below.
• If you will search the value depending upon the Title column, then only it will show related to the title column values. But if you will search depending upon the Vehicle column, then it will not show any value (because we provided the Title column in the SearchField property).

PowerApps Combobox Search Field

Let’s discuss how a user can search a single field or multiple fields in the PowerApps Combobox control. Below is a simple scenario.

• I have a SharePoint list named Project Details. This list has these below different types of columns including some records as below. Here what I want to do is, I want to search the Combo box based upon the Title field and as well as the Employee First Name field.

• On the PowerApps screen, Insert a Combobox control and add the SharePoint List Data source (Project Details).
• Select the Combobox control -> Go to Properties pane -> Click on Edit from the Fields section -> Select the Layout as Double.
• Select the Primary text as “Employee First Name” and Secondary text as “Title“. As per the requirement, we need to search both the field values. But you can see in the SearchField option, it is accepting only one column value.

• You may think that it is not possible to search with two values in the Combobox control. Do not worry, it is possible to search the Combobox control with two different fields.
• Select the Combobox control and go to the Advanced tab. Go to the SearchFields option under the Data section and apply this below formula as:

["EmployeeFirstName", "Title"]

• Save and Preview the app. You can see all the Employee’s first name and as well as the Title field values in the Combobox control.
• You can only search the fields if you enabled the Allow searching option from the Properties pane. Otherwise, the Search box will not appear to search any value in the Combo box.

• When you will search the Combobox based upon the Title field, then it will display with those values that the user has searched. Similarly, when you will search the Combobox based upon the Employee’s first name, then it will display with those particularly related values like the below screenshot.

PowerApps Combobox SharePoint List

In this scenario, We will see how we can use a SharePoint List in the PowerApps Combo box control. Follow this below simple scenario.

• I have a SharePoint list named Project Details. This list contains some different types of columns including the Choice column. In the below, you can see there are two choice columns named Client and Project. These Client and Project columns are having with these below choice values as:

1. Client: [Conros, TSInfoTechnologies, Intel, HCL, Dynamic Systems]
2. Project: [PowerApps, Power BI, Power Automate, SPFx, Python, SharePoint OnPremise, SharePoint Online]

• In this scenario, I want to merge these two choice field values in a single Combobox control. That means when the user will click on the Combobox, he/she can able to see all the choice values from Client and Project fields.

• At first, create a collection on Apps OnStart property. Select the App (from the left navigation) and apply this below formula on its OnStart property as:

OnStart = ClearCollect(
    AvailableOptions,
    Choices('Project Details'.Project),
    Choices('Project Details'.Client)
)

Where,

1. ClearCollect = This is the PowerApps function that helps to create PowerApps Collections. Always it clears the previous value and stores the new value.
2. AvailableOptions = Collection name
3. Project Details = SharePoint List name
4. Project, Client = These are the choice columns from SharePoint list

• Next, insert a Combobox control and set it’s Items property as:

Items = AvailableOptions

Where,

1. AvailableOptions = PowerApps Collection name that you have created on App’s OnStart property

• Now save and preview the app. Click on the Combobox control. You can see all the choice field values (from Project and Client column) will display in the control.
• If in case you are not able to see the choice values in the Combobox control, then just save and publish the app. Close it and again play the app. You can see all the choice values as shown below.

• Next, select the Combobox control and make as false to the SelectMultiple property. So that from the Comobox control, you can not select more than one value at a time.

• Suppose you want to give any reference to this Combobox value, then in that case what you need to do is,

1. Add a Label control and set its Text property as:

Text = ComboBox2.Selected.Value

Where,

ComboBox2 = Combo box control name

2. Save and preview the app. Select any choice value from the Combo box control. Then the selected value will appear in the Label control as shown in the below screenshot.

Also, you may like these beow PowerApps Tutorials:

• PowerApps upload file to SharePoint document library
• Create PowerApps Date filter
• PowerApps Gallery Control Filter Example
• PowerApps Get Current User (ID, EMail, Department, Location, Photo, etc)
• PowerApps send email on submit
• PowerApps Email Attachment Control – How to Use
• PowerApps Microphone Control – How to use
• How to Create Login Screen in PowerApps
• PowerApps Popup message Box with Examples
• Get users from SharePoint Group in PowerApps
• PowerApps camera control + Save captured image in SharePoint
• How to Create CSV in SharePoint using PowerApps and Power Automate
• PowerApps Examples – COVID 19 Self Declaration form

In this PowerApps Tutorial, We discussed what is a Combobox control in PowerApps and what are the various important PowerApps Combobox Properties.

Also, By taking some simple scenarios, we covered these below things as:

• How to add PowerApps Combobox Control
• PowerApps Combobox Add Items or How to add items in PowerApps Combobox control
• PowerApps Combobox Defaultselecteditems
• How to use PowerApps Combobox Selected Value
• PowerApps Combobox Selecteditems
• PowerApps Combobox office 365 users
• PowerApps Combobox Display Fields
• How to do PowerApps Combobox Search Field
• What is PowerApps Combobox SharePoint List