Edit

Share via

Add and navigate screens in canvas apps

Create modern, responsive apps by adding prebuilt screens for common app scenarios. The screens feature responsive containers and modern controls that adapt to different screen sizes. You can also add custom screens with different layouts and controls.

The following new prebuilt screens are available:

Screenshot of the New screen menu in Power Apps Studio showing available layouts.

Add a new screen

  1. Sign in to Power Apps.

  2. Create a canvas app or open one for editing.

  3. On the command bar, select New screen, and then select a screen layout.

  4. Preview the app to determine how it looks on different devices. For more information, see Preview an app.

Tip

To make the app adapt to the size of the device display it's running on, turn off the Scale to fit option.

Welcome screen

The Welcome screen works well as the first screen of an app. You can customize each tile with an image, a title, and a description. Add or remove tiles in the main container to change the number of tiles. Use the tiles to guide users to other parts of the app.

The Welcome screen template includes the following controls:

  • Screen container
    • Header container
      • Header
    • Main container
      • Container
        • Image container
          • Image
        • Title container
          • Feature item button
          • Description text

Screenshot that shows what appears when you add a Welcome screen layout from the New screen button.

Add and customize the Welcome screen

  1. Select New screen > Welcome screen.

  2. To change the image of a tile, select it and then select Edit.

  3. Select the Feature Item button control and add your own text in the Properties pane.

    Screenshot that shows where to edit the text of the Featured item tile.

  4. Select the Short description or engaging message text and add your own.

  5. Add and remove tiles if needed.

    • To add tiles in the tree view, copy and paste a Container item.

    • To remove a tile in the tree view, right-click a Container, and then select Delete.

Use the Header and gallery screen to show a range of product or service information, like a product catalog. When you connect a gallery control to a data source, a catalog is automatically created with little customization required.

The gallery control in the Header and gallery screen is a classic control. When the modern gallery control is released, the Header and gallery screen uses it. For more information, see Overview of modern controls and themes in canvas apps.

The Header and gallery screen has the following template for controls:

  • Screen container
    • Header container
      • Header
    • Main container
      • Gallery
        • Gallery container
          • Image container
            • Image
          • Title container
            • Title text
            • Description text
          • Button container
            • Button

Screenshot showing the Header and gallery screen.

  1. Select New Screen > Header and gallery.

  2. In the tree view, select Gallery and connect it to a data source such as Dataverse.

  3. Select specific controls inside the gallery, such as the image, title text, and text description. In the control's properties, use the ThisItem syntax to set the desired image, title text, and description.

    For example, to add the Account name to the title text control, find it by typing ThisItem in the formula bar to see a list of available items to add from your data set.

    Screenshot that shows where to use ThisItem in the formula bar.

Approval request screen

The Approval request screen has a header, a form with a submit button, and a gallery with predefined stages. The Approval request screen is useful for scenarios where actions are triggered by form submissions, such as submitting an approval request or displaying a workflow process for a business.

Tip

When you add an approval request screen, connect it to a data source. The data source determines the field names in the request form.

The Approval request screen has the following template for controls:

  • Screen container
    • Header container
      • Header
    • Main container
      • Form container
        • Form title text
        • Approval form
        • Submit button
      • Sidebar container
        • Reviewers text
        • Reviewers gallery

Screenshot showing the Approval request screen.

Add and customize the Approval request screen

  1. Select New Screen > Approval request.

  2. In the tree view on ApprovalForm, connect to a data source such as Dataverse.

  3. Choose a data source.

  4. To view the details of the approval stages, select ReviewersGallery under the SidebarContainer node in the tree view. Then, in the properties pane, select the Advanced tab and go to Items.

    The approval stages have the following details:

    • Name: Name of the stage or approver
    • Title: Subtitle of the stage or approver
    • Status: Stage status
    • Current: Whether this stage is the current stage of the approval request

    Screenshot that shows the Items advanced property.

To notify the approver, add a Power Automate approval workflow in the button. For more information, see Create and test an approval workflow with Power Automate.

Header and form

The Header and form screen has a header, a form, and two buttons to submit the form or cancel form submission. This screen is great for using a full-screen form.

The Header and form screen has the following template for controls:

  • Screen container
    • Header container
      • Header
    • Main container
      • Form container
        • Form
      • Button container
        • Cancel button
        • Submit button

Screenshot showing the Header and form screen.

Add and customize the Header and form screen

  1. Select New Screen > Header and form.

  2. In the tree view, you see Form selected and a prompt appears for you to connect the form to a data source.

  3. Choose a data source.

  4. Optionally, to ensure the best screen responsiveness, select each data card on the form and set its Width Fit property to On in the Display tab of the Properties pane.

Header and table

The Header and table screen has two controls: a header control and a table control. This template is great for showing a detailed data table on a screen.

The Header and table screen has the following controls:

  • Header container
    • Header
  • Main container
    • Table

Add and customize the Header and table screen

  1. Select New Screen > Header and table.

  2. In the tree view, select Table and connect it to a data source.

Table and form

The Table and form screen contains two main controls: the modern table control and the modern form control. This template has built-in Power Fx formulas to make data connection and customization easy. This template is ideal for selecting and editing a record by using a form.

The Table and form screen contains the following controls:

  • Screen container
    • Header container
      • Header control
    • Body container
      • Text input (Search)
      • Table control
      • Form control
      • Button
        • New
        • Edit
        • Delete
        • Submit
        • Cancel

Screenshot showing theTable and form screen.

Add and customize Table and form screen

In Power Apps Studio:

  1. Select New Screen > Table and form.

  2. Select Data in the inline action bar.

  3. Select the data source you want.

    Screenshot that shows the location of the Data button, where you can select a data source from a list.

    When you connect, the table and form controls both connect to the data source.

You can select a record in the table control, and the form shows the details of the selected record.

All buttons in this template have prebuilt Power Fx, so you don't need to customize them. When you connect the screen to the selected data source, the screen becomes fully functional.

Screenshot that shows the screen view when connected to a data source: a data list and its form elements with a submit button.

Reorder screens

When your app has more than one screen, you can change their order in the tree view.

Select the overflow menu of a screen that you want to reorder, and then select Move up or Move down.

Screenshot that shows where the overflow menu is located in order to move a screen up or down in your tree view.

Use the StartScreen property to set the screen that displays first.

Add navigation

When your app has more than one screen, add navigation so your users can move between them.

  1. Select the screen. Select Insert. In the search box, type Next arrow and then select it.

  2. Move the arrow to where you want it to appear on the screen.

  3. Select the arrow. Set the OnSelect property to the Navigate function. For example, use Navigate(Target, Fade).

    Replace Target with the name of the screen where you want to navigate.

    Screenshot of the OnSelect property set to the Navigate function.

    In this example, when a user selects the arrow, the target screen fades in.

  4. On the Target screen, add a Back arrow icon the same way. Set its OnSelect property, for example, Navigate(Target, ScreenTransition.Fade).

    Replace Target with the name of the screen where you want to return.

Screen-control reference

  • Last updated on