Add a variety of UI elements to your app, and configure aspects of their appearance and behavior directly, from the toolbar, or in the formula bar. These UI elements are called controls, and the aspects that you configure are called properties.

Prerequisites

  1. Sign up for PowerApps, install it, open it, and then sign in by providing the same credentials that you used to sign up.

  2. In PowerApps Studio, click or tap New on the File menu (near the left edge).

    New option on File menu

  3. On the Blank app tile, click or tap Phone layout .

    Create an app from scratch

  4. If you're prompted to take the intro tour, click or tap Next to get familiar with key areas of the PowerApps interface (or click or tap Skip).

    Opening screen of the intro tour

    You can always take the tour later by clicking or tapping the question-mark icon near the upper-right corner and then clicking or tapping Take the intro tour.

Add a control

You can add any control in a variety of categories by clicking or tapping the Insert tab of the toolbar, clicking or tapping a category, and then clicking or tapping the control that you want. In this section, review the controls in each category to get familiar with the types of controls that you can add and where you might find each type.

  • Text

    Options in the Text category

    Tip: Write or draw by using the pen input.

  • Controls

    Options in the Control category

    Tip: Offer choices in your app by adding a list box, a drop-down list, or radio buttons.

  • Gallery

    Options in the Gallery category

    Tip: Show a list of records from a table using a gallery.

  • Forms

    Options in the Form category

    Tip: Show or edit a record by using a form.

  • Media

    Options in the Media category

    Tip: Show data other than text by adding multimedia to your app.

  • Charts

    Column chart, Line chart, Pie chart

    Tip: Configure a chart to showcase mission-critical data.

  • Icons

    This category contains a variety of shapes, action icons, and symbol icons. Scroll through to review all the options.

If you need more space for controls, add a screen.

Configure a control directly

In this procedure, you'll add and configure a Text box control, but you can apply many of the same principles to other controls.

  1. In the toolbar, click or tap the Insert tab, and then click or tap Text box.

    Insert tab

    When you add a control, it's selected by default. You can also select an existing control by clicking or tapping it. When a control is selected, a selection box surrounds it, and other areas of the UI change so that you can configure the selected control. For example, a selected Text box control resembles this graphic.

    A selected text box

    Important: If a control is selected when you select another control or a blank area of the screen, the first element is no longer selected.

  2. Make the Text box control narrower by dragging a handle on the right edge of the selection box to the left. (The middle handle appears only if you zoom in.)

    A resized text box

    You can also resize a control by modifying its Height, Width, or both properties, as this topic describes later.

  3. Move the Text box control by dragging the selection box itself (or by modifying the X, Y, or both properties, as this topic describes later).

  4. Triple-click the text that appears in the Text box control, and then type Hello, world.

    A text box with custom text

    You can also modify this text by setting the Text property of this control, as this topic describes later.

  5. Delete the Text box control by clicking or tapping it and then pressing Delete.

  6. Restore the Text box control by pressing Ctrl-Z (or by repeating the first four steps in this procedure).

Configure a control from the toolbar

By configuring a control from the toolbar, you can specify a wider variety of options than you can directly.

  1. With the Text box control selected, click or tap the Home tab of the toolbar.

    Home tab

  2. Click or tap Fill, and then click or tap a color such as aquamarine.

    Fill option

    The Text box control reflects your selection.

    A text box with aquamarine fill

  3. Change the font family and the size of the text (for example, to 18 pt. Georgia).

    Font controls

    The Text box control reflects your selection.

    18-point Georgia

  4. Click or tap the Text box tab, click or tap VerticalAlign, and then click or tap Top.

    Text-box tab

    The Text box control reflects your selection.

    A text box with text aligned to the top of the box

Configure a control in the formula bar

By using the formula bar, you can set properties that you can't set directly or from the toolbar. For example, you can set a tooltip that appears when a user points to the control but doesn't click or tap it. You can also specify complicated formulas that increase the power of your app.

Each change that you made earlier in this topic updated the value of a property for the control that you configured.

  • When you resized the control, you changed its Width property.
  • When you moved the control, you changed its X and Y properties.
  • When you changed the text that the control displays, you changed its Text property.

Instead of configuring a control directly or from the toolbar, you can also update the value of a property by selecting it in the property list and then specifying a value in the formula bar. By taking this approach, you can search for a property alphabetically, and you can specify more types of values.

  1. With the Text box control selected, click or tap Text in the property list, and then type "My Company Name" (including the quotation marks) in the formula bar.

    A literal string in a text box

    When you surround a string of text with quotation marks, you specify that it should be treated exactly as you typed it. As an alternative, you can set the value of a property to a formula.

  2. With the Text box control selected, click or tap Text in the property list, and then type Today() (without quotation marks) in the formula bar.

    The control shows the current date.

    Today function

    Tip: You can format dates and times in various ways, in addition to performing calculations on them.

Configure two controls to interact with each other

In this procedure, you'll add a check box and then configure the text box that you already have to appear only when the check box is selected.

  1. Click or tap the Insert tab.

    Insert tab

  2. Click or tap Controls, and then click or tap Check box.

    Insert check box

  3. Move the Check box control so that it appears below the Text box control, and set the Text property of the Check box control so that Show text appears.

    Configure check box

  4. With the Check box control still selected, click or tap the Home tab.

    Rename check box

  5. Click or tap the current name of the Check box control (to the right of New screen), and then type MyCheckbox.

    Rename check box

  6. Click or tap the Text box control to select it, click or tap the Text box tab, and then click or tap the Visible option.

    Visible property

  7. In the formula bar, delete true, and then type or paste this formula:

    If(MyCheckbox!Value = true, true, false)

    This If function states that the text box should appear only when the check box is selected. Because the check box is cleared, the Text box control disappears (except for the selection box).

    Visible formula

  8. Click or tap the Check box control to add the selection box to it, and then click or tap it again to add a check mark.

    The Text box reappears:

    Text box appears when the check box is selected

  9. Clear the Check box control to hide the Text box control.

    Text box disappears when the check box is cleared

This example is basic, but you can configure the behavior and appearance of your app by building one or more formulas from simple to complex.

Rename a screen or a control

By renaming a screen or control, you can build formulas that are easier to read and maintain.

  1. Click or tap the screen or the control that you want to rename.

  2. On the Home tab, click or tap the name of the control (to the right of New screen), and then type the name that you want.

    Rename a checkbox