Using ListBox Control In Microsoft PowerApps

Before reading this article, please go through the important article links given below

Quick Start on Microsoft PowerApps

• To Use Template
• To Use Blank App
• To Add Excel File
• To Use Sort And SortByColumn Functions
• To Use Filter, Search, And LookUp Functions
• To Add Contacts
• To Get User Details
• Developing Camera App
• Using Radio Button
• Developing Drawing App

In PowerApps, we can Add the ListBox Control.

ListBox Control

The ListBox is used to display a list of items to a user. A user can select an item from the list. It allows the programmer to add the items at design time by using Item Methods.

Follow the below steps to work with ListBox Control in PowerApps.

Step 1

Log into the PowerApps

After downloading the PowerApps from the Windows store, here we need a Microsoft related organization’s Office 365 ID or (MSDN, Microsoft, Skype, Office 365 etc.,), to login with it.

 

Step 2

Create a New App in PowerApp

After Login, we can see the Dashboard. There we click on the New button.



Step 3

Choose the Blank App

 

Step 4

Designing the App

Now, let's start to design the App. In the left side we can see the Individual Screens for adding our data. In  the right side we can see the List of Layouts. In the Top we can see the formula bar. There you see the Properties of the screen that you select. In the Right Side we see the Add Data Source to add the external data Source.

 

Step 5

Drag and Drop the ListBox Control

1. Go to the Insert menu, then Controls, and Drag the ListBox tool.
   
   
   
   
2. Drop the ListBox tool on the Screen.
   
   
   
   
3. Rename the MyListBox
   
   
   
   
4. Add the Options
   
   
   

Step 6

Drag and Drop the Shape Control Tool

If you select the List, the selected list appears on the Shape control.

1. Go to the Insert Menu then choose Icons and Drag the Circle Shape.
   
   
   
   
2. Drag the Shape control to the screen.
   
   
   
   
3. Likewise draw the remaining Shapes
   
   
   
   
4. Add Coding
   
   Select the Shape Control and Add the coding to the Visible Event.

1. Select the Circle Shape and Add the coding
   
   Coding
   
   If("circle" in MyListBox.SelectedItems.Value, true)
   
   
   
   
2. Select the Triangle Shape and Add the coding
   
   Coding
   
   If("triangle" in MyListBox.SelectedItems.Value, true)
   
   
   
   
3. Select the Rectangle Shape and Add the coding
   
   Coding
   
   If("rectangle" in MyListBox.SelectedItems.Value, true)
   
   
   

Step 7

Run the App



Output 1

Main Screen



Output 2

Click on the Circle List.



Output 3

Click on the Triangle List.



Output 4

Click on the Rectangle List



Output 5

Reclick on the Triangle List to remove the Shape.



Conclusion

I hope you understood the How to Add the ListBox Control in Microsoft PowerApps and how to run it.