Power Apps List Box Control – Complete tutorial

In this Power Apps tutorial, We will discuss what is a List box control in PowerApps, What are the List box control properties and how we can use Power Apps List Box control in the app.

Also, By taking some various examples, We will cover these below topics as:

• Add PowerApps ListBox control
• PowerApps Listbox items
• PowerApps Listbox add items
• PowerApps Listbox Example
• PowerApps List box count
• PowerApps Listbox collection
• PowerApps Listbox concat
• PowerApps Listbox clear
• PowerApps Listbox conditional formatting
• PowerApps Listbox deselect
• PowerApps Listbox distinct
• PowerApps Listbox get selected items
• PowerApps List box items from SharePoint list
• PowerApps Listbox selected items
• PowerApps List box with checkbox
• PowerApps Listbox default multiple
• PowerApps Listbox onselect
• PowerApps List box filter
• PowerApps Listbox multiple columns
• PowerApps Listbox multiselect
• PowerApps List box text
• PowerApps Listbox remove item
• PowerApps Listbox sort
• PowerApps Listbox default value
• PowerApps Listbox default select all
• PowerApps Listbox horizontal
• combo box SharePoint List PowerApps

PowerApps Listbox control

• Power Apps List box control is a type of control that contains a list of items that can be selected by the user. A user can select one or multiple items from the list box.
• In this control, you can add the items by using its Items property.

PowerApps Listbox control Properties

Below represents some of the important key properties of PowerApps List box control:

1. Items = You can specify the items you want to view in the list box. Also, it specifies the data source that appears in the control such as a list, a chart, or a gallery.
2. Default = It defines the initial value of the control before it is changed by the user.
3. Selected = It specifies the data record that represents the selected item. Here you can only have one default selected item. Suppose you need more selected items, then in that case you can use a Combo Box control in PowerApps.
4. BorderColor = It specifies the color of a control’s border.
5. BorderStyle = It specifies whether a control’s border is Solid, Dashed, Dotted, or None.
6. Color = It provides the color of text in a control.
7. DisplayMode = It specifies whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).
8. Fill = It provides the background color of a control.
9. Font = This specifies the name of the family of fonts in which text appears.
10. Height = It provides the distance between a control’s top and bottom edges.
11. HoverFill = It defines the background color of a control when the user keeps the mouse pointer on it.
12. Italic = It defines whether the text in a control is italic.
13. LineHeight = It provides the distance between, for example, lines of text or items in a list.
14. OnChange = It specifies how the app responds when the user changes the value of a control
15. OnSelect = It specifies how the app responds when the user taps or clicks a control.
16. Reset = It defines whether the controlreverts to its default value.
17. SelectedItems – Read-only = It specifies a datatable of selected items for a multiselect listbox.
18. SelectedItemsText – Read-only = It represents a datatable of selected items text for a multiselect listbox.
19. SelectedText (Deprecated) = It represents a string value that represents the selected item.
20. SelectionColor = It provides the text color of a selected item or items in a list or the color of the selection tool in a pen control.
21. SelectionFill = It defines the background color of a selected item or items in a list or a selected area of a pen control.
22. SelectMultiple = It specifies whether a user can select more than one item in a listbox control.
23. Size = It provides the font size of the text that appears on the control.
24. Visible = It specifies whether the control displays or is hidden.
25. Width = It specifies the distance between the control’s left and right edges.

Read PowerApps Dropdown Gallery

Add PowerApps ListBox control

Next, we will see how we can add a ListBox control in Power Apps.

• On the Power Apps screen, Go to Insert tab -> Click Input -> Select List box. Once you will select it, then the list box will appear on the screen as shown below.
• Now in the Listbox control, you need to add the items as per your choice or from any data source. To know how to insert the items in the control, follow the below instructions.

Read PowerApps Filter SharePoint List with Examples

PowerApps Listbox items

• While you are inserting a List box control, then you can see the control’s items property will be ListboxSample and the items will appear as 1, 2, 3.
• Now suppose in the control, you want to add the items as per your choice, then you need to do these below things as:
• Select the List box control and apply this below code on its Items property as:

Items = ["Arctic","Southern","Atlantic","Pacific"]

Where,

“Arctic”, “Southern”, “Atlantic”, “Pacific” = I have given the Ocean name but you can give the choice options as per your need.

• Once you will preview the app, you can select one or multiple choices from the list box control.

Read Power Apps Display SharePoint List Items

PowerApps Listbox add items

Here we will see how we can add items in the PowerApps ListBox control from the SharePoint List.

• The below screenshot represents a SharePoint List named SharePoint Project Expenses. This list has some columns with different Data types as:

1. Project Name = Bydefault, this is a Title column. Just I renamed it to Project Name.
2. Number of User = Number Data type
3. Project Created Date = Date and time Data type
4. Project Location = Choice Data type

Now I would like to display the Title values in the PowerApps ListBox control.

• To do this, Add a List box control and apply this below code on its Items property as:

Items = 'SharePoint Project Expenses'.Title

Where,

1. ‘SharePoint Project Expenses’ = SharePoint List name
2. Title = SharePoint column name that I want to display in the list box control

NOTE:

1. In the List box control, the columns produced by this rule are all nested tables and/or records, however the property should expect atleast some columns of simple values as like text, or numbers.
2. At first, you need to connect the SharePoint List data source to the PowerApps. Once the data source is connected, then you can use that specific list in the list box control.

• Once you will save and preview the app, you can see the values in the list box control as shown in the above screenshot.

PowerApps Listbox Example

Here we will discuss a scenario that explains how to use the PowerApps Listbox control.

1. On the PowerApps screen, Insert a List box control, rename the control to Country and set its Items property to this below code:

Items = ["AUSTRALIA", "ENGLAND", "FRANCE"]

Where,

“AUSTRALIA”, “ENGLAND”, “FRANCE” = These are the country names

Here I want to display the games when a user will select any specific country from the list box control.

2. Add four Dropdown control and place them under the Country list box as shown below. Specify the name to these Dropdown controls as:

ddAustralia, ddEngland and ddFrance (you can rename these controls as per your choice)

3. Specify the Items properties of each Dropdown control to one of these values as:

ddAustralia = ["Football", "Rugby", "Netball"]
ddEngland = ["Football", "Rugby", "Basketball"]
ddFrance = ["Rugby", "Motor Sports", "tennis"]

Refer to the below screenshot.

4. Next, set the Visible property of each drop-down control to one of these values as:

If("AUSTRALIA" in Country.SelectedItems.Value, true)
If("ENGLAND" in Country.SelectedItems.Value, true)
If("FRANCE" in Country.SelectedItems.Value, true)

5. Now Save and Preview the app. Select one or multiple choices from the List box control, then you can see that a specific dropdown will appear depends upon the selected list box values. As I have chosen AUSTRALIA and ENGLAND, those dropdown values will visible and others are hidden in the below screen.

PowerApps list box count

Do you want to count the items that are present in the Power Apps List box control? Yes, you can easily do it by using one simple code. Follow this below example.

• On the Power Apps screen, I have a List box control that is having some fruits like Apple, Mango, Orange etc. Now I want to count the items that have been selected by the user in the control.
• To do this, Insert a Label control and apply this below code on its Text property as:

Text = "Total count of ListBox items: " & CountRows(ListBox4.SelectedItems)

Where,

1. “Total count of ListBox items: “ = This is the text that will display in the label control
2. CountRows = This is the function that helps to count the total number of items or records either in a table, SharePoint list, or a gallery control.
3. ListBox4 = List box control name

• Save and Preview the app. Select one or multiple values from the list box control. At the same time, you can see the number of items (that you have been selected) will appear in the label control as like the below screenshot.

If you are interested to learn more about the PowerApps Count function, then you can refer to these below simple and detailed tutorials:

1. PowerApps Count Function with Examples
2. PowerApps CountRows function with Examples
3. PowerApps CountIf Function with Examples

Power Apps listbox collection

Here we will see how we can work with the PowerApps Listbox collection.

• On the app, there is a Power Apps Collection named EmployeeCollection. This collection has some headers like Employee Name, Designation, and Salary. Also, it has some employee details as shown below.

• On the PowerApps screen, I have a List box control and its Items property contains the specific Collection name (EmployeeCollection).
• Now what I would like to do is, When a user will select any employee name (from the list box control), then the salary of the specific employee will appear in the label control.

• To do so, Insert a Label control and set its Text property to this below code:

Text = "Employee Salary: "& ListBox5.Selected.Salary

Where,

1. “Employee Salary: ” = This is the text that will display in the label control
2. ListBox5 = List box control name
3. Salary = Collection header name. You need to specify the header that the value you want to display in the label control

• Save and Publish the app. Reopen the app again and select an employee from the list box control. In the label, you can see the salary of that specific employee as like the below screenshot.
• As we discussed above that the listbox is a control where by default you can select more than one item at the same time, and also if multiple items are selected, then the label will display one of them. If you want to use it as a “single-selection” control, you should set its “SelectMultiple” property to false.

PowerApps listbox concat

Do you want to concatenate the list box values in Power Apps? Refer to this below simple scenario.

• On the Power Apps screen, there is a list box control having with these below items as [A, B, C, D]. Now I would like to concatenate these items with a delimiter “;” and display in the label control as like [A; B; C; D;].

• Add a Label control on the screen and apply this below formula on its Text property as:

Text = Left(
    Concat(
        ListBox3.SelectedItems.Value,
        Concatenate(
            Text(Value),
            "; "
        )
    ),
    Len(
        Concat(
            ListBox3.SelectedItems.Value,
            Concatenate(
                Text(Value),
                "; "
            )
        )
    ) - 1
)

Where,

ListBox3 = List box control name

• Now save and preview the app. Select the items from the list box control. Then you can see the items will appear in the label control with the delimiter “;” as shown below.

PowerApps listbox clear

While working with PowerApps List box control, most of the time what happens is, the previous items are still selected every time a user returns to a screen. Suppose for this case, you want to clear the selected items from the list box control. Follow these below things to do so.

• Set the OnVisible property of the screen to this below code:

OnVisible = UpdateContext({TheSelection: "."});
UpdateContext({TheSelection: ""})

Where,

TheSelection = Context variable name. You can give any name here. By default, the Default value will be “1”.

• Next, select the list box control and set its Default property to the specific variable name as:

Default = TheSelection

• Now Save and Publish the app. Once you will reopen the app again, you can see there will be no selected value in the list box control.

PowerApps Listbox conditional formatting

In this scenario, We will see how we can use conditional formatting in PowerApps ListBox control. Do you ever imagine formatting the display properties of certain items in a ListBox control based on some criteria? If no, then follow this simple scenario.

• On the PowerApps, there is a Collection named TaskStatus where the Name, Status, and Selected are the headers of the collection as shown below. Below represents the code to create the collection on screen’s OnVisible property as:

OnVisible = ClearCollect(
    TaskStatus,
    {
        Name: "Vineet",
        Status: "InProgress",
        Selected: false
    },
    {
        Name: "Kushal",
        Status: "Completed",
        Selected: false
    },
    {
        Name: "Shivam",
        Status: "Completed",
        Selected: false
    },
    {
        Name: "Arvind",
        Status: "InProgress",
        Selected: false
    }
)

• Now what I would like to do is, on the collection, whatever the tasks are in Inprogress, those names will appear in Red color and those tasks are Completed, that names will appear in Black color in the list box. Refer to the below screenshot.

• One thing I want to share is, to do this type of requirement, a Listbox itself can not do that because it does not have the functionality to change the formatting on a per-item basis.
• For alterantive solution, We can use a Gallery control in PowerApps that should behave like a list box. Follow these below steps to do so.

1. On the screen, Insert a Blank vertical gallery control and add a Label control inside the gallery template. Select the gallery control and set its Items property as:

Items = TaskStatus

Where,

TaskStatus = Collection name

2. Select the gallery control and set its BorderThickness property to 2. Not only 2, you can specify the value as much you want to see the thickness.

BorderThickness = 2

3. Select the Label control and set its Text property to the below code:

Text = ThisItem.Name

Where,

Name = One of the Headers of the collection

4. Next, Select the Label control and apply this below formula on its Color property as:

Color = If(
    ThisItem.Status = "Completed",
    RGBA(
        0,
        0,
        0,
        1
    ),
    RGBA(
        255,
        0,
        0,
        1
    )
)

5. Again select the Fill property and set this below code on it.

Fill = If(
    ThisItem.Selected,
    RGBA(
        62,
        96,
        170,
        1
    ),
    RGBA(
        0,
        0,
        0,
        0
    )
)

6. At last, go to the OnSelect property of the Label control and apply this below formula:

OnSelect = Patch(
    TaskStatus,
    ThisItem,
    {Selected: !ThisItem.Selected}
)

7. Now Save, Publish and Close the app. Reopen the app again. You can see those names are InProgress, they will appear in Red color and other will Black color.

PowerApps listbox deselect

Do you want to deselect the selected items from the PowerApps ListBox control? Refer to the below example.

• There is a List Box control that contains some items like Pen, Pencil, Eraser, Marker. Also, there is a Button control on the screen that will help you to deselct the item(s) once the user will click on it.
• Select the List box control and set its Default property to a variable as:

Default = itemVar

Where,

itemVar = Specify a variable name. You can provide any name here.

• Next, Select the Button input (Click me to Deselect) and apply this below formula on its OnSelect property as:

OnSelect = UpdateContext({itemVar: "1"});
UpdateContext({itemVar: ""})

Where,

itemVar = Specified variable name that you have created in the Listbox’s Default property

• Now Save and Preview the app. Select the one or more items from the list box and then click on the button (Click me to Deselect). You can see all the selected item(s) will deselect in the list ox control as shown below.

PowerApps listbox distinct

Suppose you want to remove the duplicate items and display only the unique item in the PowerApps list box control, then, in this case, you can use the Power Apps Distinct function.

Example – 1: (Using SharePoint List)

• The below screenshot represents a SharePoint List named SharePoint Project Expenses. This list has some repeated items or records as shown below.
• Now I would like to display the unique or distinct item (from the SharePoint List) in the Power Apps List box control.

• Select the List Box control and apply this below code on its Items property as:

Items = Distinct(
    'SharePoint Project Expenses',
    Title
).Result

Where,

1. ‘SharePoint Project Expenses’ = SharePoint list Name
2. Title = SharePoint List column. Here, the title column is Project Name (Renamed it in the Sharepoint List). You can specify any column that you want to display unique item.

• Once you will save and preview the app, you can see all the distinct value in the list box control as like the below screenshot.

Example – 2: (Using PowerApps Collection)

• Suppose, you have collection and you want to remove the duplicate values from that specific collection. In that case, you can use this below code on List box’s Items property as:

Items = Distinct(myCollection, Country)

Where,

1. myCollection = Collection name
2. Country = Specify the collection header or column where you want to remove the duplicates

PowerApps listbox get selected items

Here, we will discuss how to work with PowerApps Listbox to get selected items by taking some simple scenarios.

Example – 1:

• Suppose you want to get the list box selected item (s) and display it somewhere else in your form or any label control, then you can easily get the item (s) by using a simple formula. Refer to the below things.
• I have a multi-selected list box control having with some items. Now I want to display the selected list box item (multiselected) in a label control (preferably comma or semicolon-delimited).
• Select the Label control and apply this below formula on its Text property as:

Text = Concat(
    ListBox11.SelectedItems.Value,
    Concatenate(
        Text(Value),
        ", "
    )
)

Where,

ListBox11 = List box control name

Example – 2:

• Suppose, there are two list boxes on the screen where the first list box is having some items. Now whenever a user will select any item(s) from the first list box, then that item will appear in the second list box.
• To do so, Select the second list box control and apply this below formula on its Items property as:

Items = ListBox12.SelectedItems

Where,

ListBox12 = first list box control name

Here we saw how to work with PowerApps Listbox to get selected items.

PowerApps listbox items from SharePoint list

Here we will see how to work with PowerApps Listbox items from the SharePoint list. Follow these simple steps to understand better.

Step – 1:

Create a SharePoint List named Project Details. Add a column in the list named Status (Single line of text data type) as shown below.

Step – 2:

On the PowerApps screen, insert a List box control and add the below values on its Items property as:

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

Step – 3:

• Also, add a Text input control and a Button input below on that text input control as like the below screenshot.
• Rename the button as SAVE and apply this below code on its OnSelect property as:

OnSelect = Patch(
    'Project Details',
    Defaults('Project Details'),
    {
        Title: TextInput2.Text,
        Status: Concat(
            ListBox18.SelectedItems.Value,
            Text(Value),
            "; "
        )
    }
)

Where,

1. ‘Project Details’ = SharePoint List name
2. Title, Status = SharePoint column names (Single line text data type)
3. TextInput2 = Text input control name where you can enter the title
4. ListBox18 = List box control name

Refer to the below screenshot.

Step – 4:

Now Save and Publish the app. Preview the app and select any choices from the list box control. Enter the Title in the text input control and then tap on the SAVE button.

Step – 5:

At last, go to that existing SharePoint list (Project Details). You can see the new item has been added with the Status values (Submitted, Approved) including a semicolon delimiter as shown below.

PowerApps Listbox selected items

Do you want to work with PowerApps Listbox selected items? Refer to this below scenario.

• I have a SharePoint List named PowerApps Email. This list has two coumns as Name and User Email. Both are Single line of text data type.

• Now on the Powerapps, what I would like to do is, there will be two list boxes. The first list box will display all the names from the Sharepoint list wherever the second listbox will only display the email of the last name selected as shown below.

• To do so, in the first list box, set its Items property to this below code:

Items = 'PowerApps Email'.Name

Where,

1. ‘PowerApps Email’ = SharePoint List name
2. Name = SharePoint single line text column

• Next, Select the second list box and apply this below formula on its Items property as:

Items = Filter(
    'PowerApps Email',
    Name = ListBox16.SelectedText.Value
)

Where,

1. ‘PowerApps Email’ = SharePoint List name
2. Name = SharePoint column
3. ListBox16 = List box control name

• Once you will apply the code, then go to the Properties pane and select the Value as your SharePoint Email column name. Here, in this case, my email column name is User Email.

• At last, Save and Preview the app. Select any name from the first list box, then the second list box will appear with the specific selected user email as like the above screenshot.

PowerApps list box with checkbox

Suppose based on your PowerApps requirement, you may need to replace a list box with a checkbox and vice versa, then you can refer to this below-detailed article where you can get more information about the check box control in Power Apps.

PowerApps CheckBox – How to use

PowerApps Listbox default multiple

Whenever you are working with the PowerApps List box control, sometimes you may be stuck with a question that is it possible to select multiple default values to the list box? So below represents the answer to this question.

• In the Power Apps List box control, there is no such property where we can make multiple values as default.
• In the List box control, there is one property called Select multiple that helps to control whether a user can select more than one item in the list box. You just need to enable this property to achieve this.
• Also, to achieve this, you can use a Power Apps Combobox control where you can do multiple default selected items.

PowerApps listbox onselect

Here we will see how we can work with PowerApps ListBox OnSelect. Refer to this below scenario.

• There is a List box control on the PowerApps screen. This control is having some sample values as shown below.
• Also, I have a Text input control where a user will type or enter the value that he/she wants to make as a Default value in the list box control.
• A Button control (Hit me to update Default) is there that will help the user to make the text value as a default value once he/she will click on it. Follow these below formulas to do so.

• Select the List box control and set its Default property to a variable as:

Default = NewDefault

Where,

NewDefault = Variable name

• Then, select the text input control and set its HintText property as:

HintText = "Enter a New Default"

Where,

“Enter a New Default” = This is the text or placeholder that will display in the text input control

• Now, Select the Button control (Hit me to update Default) and apply this below code on its OnSelect property as:

OnSelect = Set(NewDefault, TextInput1.Text)

Where,

1. NewDefault = Specified variable name
2. TextInput1 = Text input control name

• At last save and publish the app. Enter the value that you want to selected as default and then click on the button control. You can see the entered value will be selected as default value in the list box control.

PowerApps list box filter

In this topic, We will see how we can filter a PowerApps List box control by taking a simple scenario.

Example:

• There is a SharePoint list called Project Details. This list has a Choice column named Project Status having with these below choice values as:

1. Submitted
2. Approved
3. Rejected
4. Pending

Refer to the below screenshot.

• On the PowerApps screen, I have a List box control and a Gallery control. Where, the List box control Items = SharePoint Choice column values (Project Status).
• Now what I want to do is, When a user will select any value from the list box control, then the gallery will filter and it will display the details related to the list box selection.
• That means, Suppose I will choose the value as Approved, then the gallery will display all the approved item details. Here, I have explained two simple solutions to achieve this.

Solution – 1:

Below represents the list box filter result screen where the user selected as Pending and the gallery displayed all the pending item details. Follow these below things to do so.

1. At first, Insert a List box control and set its Items property (all the items should match with the SharePoint Choice values) as:

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

2. Add a Vertical gallery control to the screen and apply this below formula on its Items property as:

Items = Filter(
    'Project Details',
    'Project Status'.Value in ListBox15.Selected.Value
)

Where,

1. ‘Project Details’ = SharePoint List name
2. ‘Project Status’ = SharePoint Choice column
3. ListBox15 = List box control name

3. Save and Preview the app. Select any value from the list box control, then you can see the filtered result in the gallery control. Here, at a time, you can see one item’s details.

Solution – 2:

• Similarly, coming to the second solution, Whenever a user will select multiple values at a time, then the gallery will appear with all the selected item details.
• For example, Suppose the user selected the value Approved and Pending at a time, then the gallery displayed with Approved item details and as well as the Pending item details as shown below.

1. To do this, first of all, you need to create a context variable in the list box control. Select the list box control and apply this below formula on its OnSelect property as:

OnSelect = UpdateContext({vSelectedItems: ListBox15.SelectedItems.Value})

Where,

• vSelectedItems = Context variable name. Here, you can specify with any name.
• ListBox15 = List box control name

2. Select the gallery control and set its Items property to this below code as:

Items = Filter(
    'Project Details',
    'Project Status'.Value in vSelectedItems
)

Where,

vSelectedItems = Context variable name that I have created in the list box control

3. Save and Preview the app. Select the values (Approved, Pending) from the list box control, then you can see the filtered result in the gallery control. Here, at a time, you can see multiple item details.

PowerApps Listbox multiple columns

PowerApps List Box control does not support multi-valued fields. If you want to use the multiple value fields, instead of the List box control, you can use a Power Apps Combo box control to work for fields with multiple values.

PowerApps listbox multiselect

• Whenever you are working with a List box control with multiselecion, then you need to make sure the Select multiple property of the listbox control should be enabled before. Otherwise you can not select multiple values from the list box control.
• By default, this property will be enabled before at the time of inserting the list box control in the app.
• Normally what happens is, sometimes whenever you want to capture all of user selected items as a single string (comma or semi colon separated), then the formula not works properly.
• For some reasons, I also tried to use the “SelectedItemsText.Value” expression instead of “SelectedItems.Value” and it works perfectly for me.
• For example, suppose you want to pass multiple values from the Listbox one at a time to SQL table. Then you need to do these below things:

1. First of all, you need to make sure the Select multiple property has been enabled in the List box control.
2. Then, if you would like to save the selected items in ListBox to the food name column of the SQL table, then the formula of OnSelect property of a Button control should be as below:

OnSelect = ForAll(ListBox1.SelectedItems.Value,Patch('[dbo].[Fruits]',Defaults('[dbo].[Fruits]'),{fruitName:Value})))

Where,

‘[dbo].[Fruits]’ is a SQL table. The Value in the above formula represents each item of selected items of ListBox control.

PowerApps list box text

Here we will see how to work with PowerApps list box text.

• There is a Listbox control having with some items. Here, I would like to display the selected item(s) in a Label control.
• If the List box control is a single selection, then you can apply this below code on Label’s Text property as:

Text = First(ListBox10.SelectedItems).Value

Where,

ListBox10 = List box control name

• If the List box control is enabled with “Allow multiple selections” on, then you can apply this below formula on Label’s Text property as:

Text = Concat(ListBox10.SelectedItems, Value & ",")

Where,

ListBox10 = List box control name

• Save and Preview the app. Once you will select the single or multiple value from the list box, you can see those items in the label control as shown above.

PowerApps listbox remove item

Suppose you want to remove any item from the PowerApps List box control, then there will be two simple scenarios that you can refer to.

Scenario – 1:

• There is a List box control on the PowerApps screen. The list box items are retrieved from a Collection i.e. Fruits.
• Now what I would like to do is, there will be a Button input. Whenever the user will tap on the button, then the selected item will remove from the list box control and as well as from the specific collection (Fruits).

• To achieve this, Select the Button (Click to Remove) and apply this below formula on its OnSelect property as:

OnSelect = RemoveIf(
    Fruits,
    Name in ListBox21.SelectedItems.Name
);

Where,

1. Fruits = Collection name
2. Name = Collection Header that shows in the list box control
3. ListBox21 = List box control name

• Save and Preview the app. Select item(s) in the list box control and tap on the button. Then you can see those selected items will remove from the list box control and as well as from the collection.

Scenario – 2:

In this scenario, there will be two PowerApps List boxes. Here what I want to do is, When a user will select any item from the list box, then that selected item will appear in the second list box and at the same time, the selected item will remove from the first list box control. Refer to the below screenshot.

• On the app, there are two Collections named UserData and UserSelection. The UserData collection is having some records wherever the UserSelection collection is an empty collection as shown below. Both the PowerApps collection, I have created in the OnVisible property of the PowerApps Screen.

• At first, Select the first list box control and set its Items property as:

Items = Sort(UserData, SortOrder.Ascending)

• Again, select the OnSelect property of the first list box control and apply this below code:

OnSelect = Collect(
    UserSelection,
    ListBox19.Selected
);
Remove(
    UserData,
    ListBox19.Selected
)

Where,

ListBox19 = First list box control name

• Similarly, Select the second Listbox control and set its Items property as:

Items = Sort(UserSelection, SortOrder.Ascending)

• Again, select the OnSelect property of the second list box control and apply this below code:

OnSelect = Collect(
    UserData,
    ListBox20.Selected
);
Remove(
    UserSelection,
    ListBox20.Selected
)

Where,

ListBox20 = Second list box control name

• At last, Save, Publish and Close the app. Reopen the app again and perform this requirement, it will give the proper result.

PowerApps listbox sort

Do you want to sort (Ascending or Descending order) the list box items in PowerApps? Follow this below simple example and code to do so.

• On the PowerApps screen, there is a List box control. All the items are retrieved from a SharePoint List Gadget Details.
• The list box control shows the items from a SharePoint List column called Brand. Now I want to sort all the brand in an ascending order as shown in the below screenshot.

• To do this, Select the List box control and apply this below formula on its Items property as:

Items = Sort('Gadget Details',Brand, SortOrder.Ascending)

1. ‘Gadget Details’ = SharePoint List name
2. Brand = SharePoint single text column that I want to sort
3. SortOrder.Ascending = As I want to display the brand in an ascending order, so I have mentioned it as Ascending. If you want to display it in descending order, then you should write as “SortOrder.Descending“.

PowerApps listbox default value

• Whenever you are working with the PowerApps Listbox control, there will be a default selected value i.e “1“. This means while you are adding a list box control, the default items will be [1, 2, 3]. Thats why the default item will be 1.
• Also, if you want to change the default value as per your choice, then you need to provide that value in the List box Default property.
• For example, the below list box contains the items like Arctic, Southern, Atlantic and Pacific. Now I want to set its Default property to Pacific. For this, you need to provide the specific value as:

Default = "Pacific"

• While you are providing the default value, do not forget to put it within an ” “ as shown below.

• However it is not possible to set multiple items as the defult property.

PowerApps listbox default select all

• Suppose you have a List box control and you would like to select two or more values at most and that should be default selection by the user.
• Coming to this point, the Listbox control is not very flexible. So currently this property is not available where a user can select multiple default values from the list box.
• There is SelectMultiple property that controls whether a user can select more than one item in the Listbox, but there is no property to control how many items could be selected.
• Alternatively, We can use a Gallery control and make it to behave as like a List box control. The idea is to make the Gallery work like a ListBox, yet benefit from having more flexible design and function. It’s a makeshift ListBox.
• Below represents some important advantages that why we can use a gallery instead of a list box control:

1. If you will use a Gallery control, then there will be more flexible functions like you can add objects with OnSelect properties that a List box cannot do.
2. The gallery control provides a flexible design like template fill, Gallery fill, individual record fill and template padding.
3. The temp collection can be Items for another gallery.
4. The gallery control provides more flexible content like you can display more than text. Since it’s a gallery, you can add all objects including images to show up for each record.

Now, let us take a simple scenario.

• There is a List box control (actually its not a listbox control but by taking a gallery, I have made it to list box) and a Toggle control on the PowerApps screen.
• Now what I would like to do is, When a user will toggle on, then all the items will selected in the gallery. Similarly, When a user will toggle off, then all the items will deselect as shown in the below screemshot.

• So all the gallery items are retrieved from the PowerApps collection that you can see in below:
• Apply this below formula on Screen’s OnVisible property as:

OnVisible = ClearCollect(
    Patientcollection,
    {
        id: 1,
        name: "Smith"
    },
    {
        id: 2,
        name: "Marry"
    },
    {
        id: 3,
        name: "John"
    },
    {
        id: 4,
        name: "Bradpit"
    }
)

Where,

1. PatientCollection = Collection name
2. id, Name = Header of the collection

• Next, Insert a Blank vertical gallery control and set its Items property to the created collection as:

Items = Patientcollection

• Select the gallery, add a Label control inside the gallery and expand the label size to size of the gallery template. Set its Text property to this below code:

Text = ThisItem.name

• Next set the below formula on Label’s OnSelect property as:

OnSelect = If(
    IsEmpty(
        Filter(
            SelecteItems,
            id = ThisItem.id
        )
    ),
    Collect(
        SelecteItems,
        ThisItem
    ),
    Remove(
        SelecteItems,
        ThisItem
    )
)

• Again apply this below code on Label’s Fill property as:

Fill = If(
    IsEmpty(
        Filter(
            SelecteItems,
            id = ThisItem.id
        )
    ),
    LightGray,
    Color.LightCoral
)

• Now, Select the Toggle control and apply these below codes on its OnCheck and OnUncheck property as:

OnCheck = Collect(SelecteItems,Patientcollection)
OnUncheck = Clear(SelecteItems)

Refer to the below screenshot.

• At last, Save, Publish and close the app. Reopen the app again. When you will toggle on the switch, then all the items will selected and if you will toggle off, then all the items will deselect.

PowerApps listbox horizontal

• Whenever you are working with PowerApps List box control, Always or some times you may think that is there any way to organize a listbox setup horizontally?
• As of now, in the single or multichoice listbox control, I would like to display the selected items for my users, but as long as the listbox is only vertical, it is very restricting in terms of gallery design. Also, it is the default layout (Vertical layout) of this control.

combo box SharePoint list PowerApps

Here we will discuss how to work with a combo box SharePoint list PowerApps.

• The below screenshot represents the Gadget Details list in a SharePoint site. This list has some different types of columns with different data types as shown below.
• By default, there is a Title field with a Single line of text. I just renamed this column name to Gadget Name. Now I would like to display this Title field values in a PowerApps Combo box control.

• On the PowerApps screen, Insert the Combo Box control (Insert -> Input -> Combo box). Then, connect the specific SharePoint List (Gadget Details) data source to the app.
• Select the Combo box control and set its Items property to the specific list as:

Items = 'Gadget Details'

• Go to its Properties pane and click on the Edit from the Fields section. Select the Title field in the Primary text and SearchField section as like below.

• Save and Preview the app. Once you will click on the combo box control, you can see all the values in the control as shown below. You can select one or multiple values from the control itself.

To get more knowledge about the Power Apps Combo box control, you can refer to this below-detailed tutorial:

• Combobox control in Power Apps

Also, you may like these below Power Apps tutorials:

• Create a canvas app in PowerApps from a SharePoint list (Helpful tutorial)
• PowerApps if statement with examples
• PowerApps Container Control – Complete tutorial
• How to use Power Apps for free
• Power Apps Image Control – How to use
• Power Apps GroupBy Function example
• Power Apps Audio and Video Control [Detailed tutorial]
• Power Apps Choices Function with Examples
• Power Apps Loading Spinner
• PowerApps First, FirstN, Last, and LastN function with examples
• PowerApps AddColumns Function with Examples
• PowerApps LastSubmit() with Examples
• PowerApps ForAll Function with examples
• PowerApps Patch Function with examples
• PowerApps Replace Function with examples

In this Power Apps tutorial, We saw what is Power Apps List box control, All the List box control properties, and how we can use this control in the app. Also, By taking some various examples, We covered these below topics as:

• Add PowerApps ListBox control
• PowerApps Listbox items
• PowerApps Listbox add items
• PowerApps Listbox Example
• PowerApps List box count
• PowerApps Listbox collection
• PowerApps Listbox concat
• PowerApps Listbox clear
• PowerApps Listbox conditional formatting
• PowerApps Listbox deselect
• PowerApps Listbox distinct
• PowerApps Listbox get selected items
• PowerApps List box items from SharePoint list
• PowerApps Listbox selected items
• PowerApps List box with checkbox
• PowerApps Listbox default multiple
• PowerApps Listbox onselect
• PowerApps List box filter
• PowerApps Listbox multiple columns
• PowerApps Listbox multiselect
• PowerApps List box text
• PowerApps Listbox remove item
• PowerApps Listbox sort
• PowerApps Listbox default value
• PowerApps Listbox default select all
• PowerApps Listbox horizontal
• combo box SharePoint List PowerApps