Add a list box, a drop-down list, a combo box, or radio buttons to a canvas app

Show a single column of data (for example, from a multi-column table) in a canvas app so that users can select one or more items in a list.

• Add a list box to allow users to select more than one option.
• Add a drop-down list or combo box to take up less space on a screen.
• Add a set of radio buttons for a particular design effect.

This topic focuses on lists boxes and radio buttons, but the same principles apply to drop-down lists.

Prerequisites

1. Create a blank canvas app.
2. Learn how to add and configure controls.

Create a simple list

1. Add a List box control named MyListBox, and set its Items property to this expression:

   ["circle","triangle","rectangle"]
   

   Your designer looks similar to the following:

   

2. On the Insert tab, select Icons, select the circle, and move it under MyListBox:

   

3. Add a triangle and a rectangle, and then arrange the shapes in a row under MyListBox:

   

4. Set the Visible property of the following shapes to the following functions:

   Shape	Set Visible function to
   circle	If("circle" in MyListBox.SelectedItems.Value, true)
   triangle	If("triangle" in MyListBox.SelectedItems.Value, true)
   rectangle	If("rectangle" in MyListBox.SelectedItems.Value, true)

5. While holding down the Alt key, select one or more shapes in MyListBox.

   Only the shape or shapes that you select appear.

In these steps, you used an expression to create a list of items. You can apply this to other elements within your business. For example, you can use a Drop down control to display product images, product descriptions, and so on.

Add radio buttons

1. On the Home tab, select New Screen, and then select Blank.

2. On the Insert tab, select Controls, and then select Radio.

   

3. Rename the Radio control to Choices, and set its Items property to this formula:
   ["red","green","blue"]
   

   

   If needed, resize the control to show all the options.

4. On the Insert tab, select Icons, and then select the circle.

5. Set the Fill property of the circle to the following function:
   If(Choices.Selected.Value = "red", Red, Choices.Selected.Value = "green", Green, Choices.Selected.Value = "blue", Blue)

   In this formula, the circle changes its color depending on which radio button you choose.

6. Move the circle under the Radio control, as in this example:

   

7. While holding down the Alt key, select a different radio button to change the color of the circle.

Add an item to an existing list

1. Add a Button control and name it "btnReset".

   Don't know how to add, name, and configure a control?

2. Set OnSelect property on btnReset to this formula:

   ClearCollect(MyItems, {value: "circle"},{value: "triangle"},{value: "rectangle"})
   

3. Set the Text property on btnReset to "Reset".

4. Add a List box control named lbItems, and set its Items property to MyItems.

5. While holding down the Alt key, press the Reset button.

   Note

   The list box should populate with the items from the "MyItems" collection.

6. Arrange the list box and button so they're lined up vertically.

   

7. Add a Text Input control, and name it "txtAdd".

8. Set Text property of txtAdd to "".

9. Add a Button control, and name it "btnAdd".

10. Set the Text property of btnAdd to "Add".

11. Set OnSelect property of btnAdd to the following formula:

    Collect(MyItems,{value: txtAdd.Text}); Reset(txtAdd)
    

    Note

    • The collect function will add the text from the text input as an item in the collection.
    • The reset function will reset the text input back to it's default state.

12. Arrange txtAdd and btnAdd so they're lined up vertically underneath lbItems and btnReset.

    

13. Preview the app by pressing F5.

14. Add a text value to txtAdd text input control.

15. Press the Add button.

    Note

    The list box should populate with the items from the MyItems collection.

(Optional) Remove an item from an existing list

1. Add a Button control, and name it "btnDelete".

2. Set the Text property of btnDelete to"Delete".

3. Set OnSelect property of btnDelete to the following formula:

   Remove(MyItems, lbItems.Selected)
   

4. Arrange btnDelete so it's lined up vertically underneath btnReset

   

5. Preview the app by pressing F5.

6. Press the Reset button to reset the list box.

7. Press an item in the list box to select it.

8. Press the Delete button to delete item.