Add a list box, a drop-down list, 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 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. Sign up for PowerApps.
  2. Sign in using the same credentials that you used to sign up.
  3. Under Make your own app, hover over the Canvas app from blank tile, select the phone icon, and then select Make this app.
  4. 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.