How to use Power Apps List box control?

Have you ever heard of the Power Apps list box control and how to use it in the Power Apps environment? If not, this Power Apps guide will undoubtedly assist you. In this tutorial, we will go over all of the Power Apps list control’s properties, basic actions, and uses, such as:

• Power Apps list box control
• Power Apps list box control properties
• Power Apps populate Listbox
• Power Apps list box control horizontal
• Power Apps list box control add items
• Power Apps Listbox tooltip
• Power Apps Listbox auto height
• Power Apps Listbox search
• Power Apps Listbox select the first item
• Power Apps Listbox data source
• Power Apps Listbox deselect
• Power Apps Listbox from excel
• Power Apps Listbox get selected value
• Power Apps list box count items

Power Apps list box control

A list box control is a list that allows the user to choose one or more items. In Power Apps, there is a control named the “List Box” control that, unlike a Drop Down control, always displays all choices and allows the user to select more than one item at a time (unlike a Radio control).

Continuing with the tutorial, we’ll look at how to populate a list box control in Power Apps and how to use this control in various scenarios.

Power Apps Listbox properties

Before we begin to work with the Power Apps Listbox control, we must first understand what properties are available. These are:

• AccessibleLabel: It defines the screen reader label.
• BorderColor: It defines the border color of a control.
• BorderStyle: It defines whether the border of a control is Solid, Dashed, Dotted, or None.
• BorderThickness: It defines the width or thickness of a control’s border.
• Color: It defines the text color in a control.
• Default: It specifies the control’s initial value before it is changed by the user.
• DisabledBorderColor: It specifies if the control’s DisplayMode property is set to Disabled, the color of its border.
• DisplayMode: It defines whether the control accepts user input (Edit), displays data only (View), or is disabled (Disabled).
• Fill: It defines the control’s background color.
• FocusedBorderColor: It represents the color of the border when control is focused.
• FocusedBorderThickness: It represents the thickness of the border when control is focused.
• Font: It defines the name of the font family in which text appears within the control.
• HoverColor: When the user keeps the mouse pointer on a control, the color of the text changes.
• HoverFill: When the user keeps the mouse pointer on a control, the background color changes.
• Italic: Whether or not the text in a control is italicized.
• OnChange: When a user changes the value of a control, actions must be taken (for example, by adjusting a slider).
• OnSelect: When a user clicks a control, actions are taken.
• PressedBorderColor: When a user taps or clicks a control, the color of its border changes.
• Reset: Whether a control’s default value is restored.
• SelectMultiple: Whether a user can select multiple items from a list box.
• Size: It specifies the font size of the text displayed on the control.
• Visible: It determines whether the control is visible or hidden.
• Width: It specifies the distance between the left and right edges of the control.

Read Power Apps combo box default value

Power Apps populate Listbox

Now, we will see how to populate a list box control within the Power Apps. For this, we need to prepare a blank canvas app in the Power Apps environment.

To prepare this, the following steps are:

• Sign in to the Power Apps with your Office365 tenant address.
• Go to Create > Blank App > Blank Canvas app > Create.
• Provide the app name and choose the format (i.e., Tablet or Mobile).
• Create.

• It will create a blank app with a default screen, where we can add a Power Apps list box control. To find this control, the following steps are:
  • On the Power Apps screen, Insert > Input > List box > Select. It will create a list box with sample values i.e., 1,2,3… like below.

This is how to populate a list box control within the Power Apps environment.

Power Apps list box control horizontal

When working with the PowerApps List Box control, we may need to arrange a list box control horizontally. By default, the items are set up vertically, and sometimes we wonder how to arrange them horizontally.

Suppose, we have a multichoice Power Apps Listbox and would like to show the selected items to the users, but the list box is only vertical, which limits gallery design options. That means, we can not display the Power Apps list box control horizontally for now.

We recommend you follow the mentioned link to get more ideas about horizontal Power Apps list box control.

Power Apps Listbox additems

Here, we will see how to add custom items or values within the Power Apps list box control. Suppose, we want to build a list box control using some custom values instead of the sample values (i.e., 1,2,3…). For this, we need to insert the below text values within the Items property of the list box control specify as an Array.

Items = ["Ontario","Belleville","Cavendish", "Toronto","Ottawa"]

Once we enter the above expression into the Items property, the items are displayed with the Power Apps list box control as shown below:

This is how to add custom items within the Power Apps list box control.

Read Power Apps Combo box with SharePoint list

Power Apps Listbox get selected value

In this section, we will see how to get the selected value from the Power Apps list box control when a user selects any item.

We will use the above example of the Power Apps list box control that we have created. The following steps are:

• On the Power Apps screen, add a Label control to display the selected value.
• Insert the below expression on the Text property of the Label control.

Text = Lsb_City.Selected.Value

Where Lsb_City is the name of the Power Apps list box control.

Let’s preview the app and select any item from the Power Apps list box control (ex: Toronto). We can see the selected value will be displayed in the label control below:

This is how to get the selected Item from the Power Appa ListBox.

Power Apps Listbox get multi-selected values

Similarly, we’ll see how to get the multi-selected values from the Power Apps list box control in this section. We will also show those multi-selected values with a separator.

For this, we will use the above example of the Power Apps list box control and insert the below expression on the label’s Text property.

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

On the above, we have used concat() to display the multiple selected values by a comma separator.

Let’s select multiple items from the Power Apps list box control(ex: Toronto, Belleville), and we can see that those items will come within the label control like below:

This is how to get the multi-selected values from the Power Apps list box control.

Read Power Apps combo box filter

Power Apps list box count items

This section will show you how to count items in the Power Apps list box. That is, it will show the total number or count of the Power Apps list box items that have been selected.

To implement this requirement, we will use the example of the above Power Apps list box control.

On that screen, we will add another label control and insert the below expression into the Text property.

Text = "Total selected items: " & CountRows(Lsb_City.SelectedItems)

Where Lsb_City is the name of the Power Apps list box control.

Let’s run the app and select an item or items from the Power Apps list box control. As we can see, it will display the total count of the selected items.

This is how to count the number of selected items in a Power Apps List Box.

Power Apps list box deselect

Here we will see how to deselect item(s) from the Power Apps list box control. Typically, if we select the selected items from the list box control, then it will deselect that item(s).

But in this section, we will see how to deselect the selected item(s) from the list box control via a button control. To perform this, we will use the above example of the Power Apps list box control and the following steps are:

• On the above Power Apps screen, add a button control and insert the below expression on the button’s OnSelect property.

OnSelect = UpdateContext({VarDeselect: "."});
                    UpdateContext({VarDeselect: ""})

Where VarDeselect is the name of the context variable name.

• Next, insert the variable name into the Power App list box’s Default property.

Default = VarDeselect

Let’s preview the app and select some items from the above Power Apps List box control. We can see all the selected items will be deselected once the button is clicked.

This is how to clear or deselect the selected items from a Power Apps list box.

Read How to Patch Power Apps Combo Box

Power Apps list box tooltip

A tooltip gives a short description of the control. In Power Apps, we can display a tooltip for various controls such as dropdown, combo box, list box, text input, and so on.

In this section, we will see how to give a tooltip to the Power Apps list box control. There is a property Tooltip under the properties panel that allows giving a tooltip to the control.

Suppose, we want to give a tooltip such as “Select the preferred cities from the list“. For this, insert the text within the text box of the tooltip.

Also, you can insert the text using the double quotes in the Tooltip property.

Tooltip = "Select the preferred cities from the list"

Let’s take a look at it to see how it works. When we hover the mouse pointer over the Power Apps list box control, we can see the tooltip.

This is how to show the tooltip in the Power Apps List box when hovering over an item in the list.

Read Power Apps Timer Control Examples

Power Apps list box data source

Here, we will see how to populate a Power Apps list box control from a data source such as SharePoint, Excel, etc.

Suppose, we have a SharePoint list named Orders List having some random data like the below:

Let’s build a Power Apps list box control using the data from the above list’s Title column. For this, add a list box control to the Power Apps screen and insert the below expression on the Items property.

Items = 'Orders List'.Title

Where ‘Orders List’ is the name of the SharePoint data source and Title is the name of the data source column name.

Now, we can see a Power Apps list box control having all the data from the data source column like below:

This is how to populate a Power Apps list box control from the data source.

Read How to Sort Combo Box Items in Power Apps

Power Apps Listbox select first item

In this section, we’ll look at how to use the Power Apps Listbox to select the first item. That is, we will create a Power Apps list box control that will default to displaying the first item as the selected item.

For this, we are going to use the above Power Apps list box control that is populated from the SharePoint list.

On that list box control, we will display the first item as the default selected item. To do this, insert the below expression on the Default property of the Power Apps list box control.

Default = First('Orders List'.Title).Title

Once the above formula is applied, we can see by default it is displaying the first item as the selected item within the Power Apps list box control.

This is how to display the first item as a selected item within the Power Apps list box control.

Power Apps list box auto height

Here, we will see how to set the auto height to the Power Apps List box control. That means the height of the Power Apps list box control will dynamically change.

Assume there is a list box control on a rectangle. However, the list box ignores the rectangle and moves outside of it, as shown below.

To set the height that changes dynamically or automatically as per the rectangle, insert the below expression into the Power Apps list box’s Height property.

Height = Rectangle1.Height

Where Rectangle1 is the name of the Power Apps rectangle. Using the above expression, the list box will display according to the height of the rectangle.

If we increase the height of the rectangle, then the height of the list box control will be increased automatically like below:

This is how to set auto height within the Power Apps list box control.

Read Power Apps combo box with Office 365 users

Power Apps list box from excel

Here, we will see how to build a Power Apps list box control from excel data. Suppose, we have excel data like the below:

Let’s connect this excel table to the Power Apps and build a list box control using the Vehicle column.

• Add a Power Apps list box control to the screen.
• Then insert the below expression on the Items property.

Items = VehiclesTable.Vehicle

Where VehiclesTable is the name of the excel table and Vehicle is the name of the column. Once the formula is applied, we can see all the data from the Vehicle column has been listed in the Power Apps list box control.

This is how to build a Power Apps Listbox from Excel.

Conclusion

In this Power Apps Tutorial, we covered all of the fundamental requirements of the Power Apps List box control, including:

• Power Apps list box control
• Power Apps list box properties
• Power Apps populate a list box
• Power Apps list box control horizontal
• Power Apps list box additems
• Power Apps list box get selected value
• Power Apps get multi-selected Listbox values
• Power Apps list box count items
• Power Apps Listbox deselect
• Power Apps Listbox tooltip
• Power Apps Listbox data source
• Power Apps Listbox select first item
• Power Apps Listbox auto height
• Power Apps Listbox from excel

You may like the following Power Apps tutorials:

• Power Apps Checkbox control within Gallery
• How to remove all items from a collection in PowerApps
• Power Apps collection filter
• How to Reset Power Apps Combo Box
• How to use Power Apps Combo Box Control?
• Power Apps Cascading Dropdown Control
• How to Filter Power Apps Dropdown Control
• How to Work With Power Apps Dropdown Blank Values