Edit

Share via

Add and navigate screens in canvas apps

  • Article

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. Learn more in Preview an app.

Tip

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

Welcome screen

The Welcome screen is ideal for the first screen of an app, where you can customize tiles such as an image, a title, and a description. You can change the number of tiles by adding or removing them in the main container. Use the tiles to navigate users to other parts of the app.

The Welcome screen has the following template for 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. Learn more in 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, you're asked to connect it with 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, you're prompted to connect to a data source such as Dataverse.

  3. Choose a data source.

  4. To view the details of the approval stages, in the tree view, select ReviewersGallery under the SidebarContainer node. 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.

You can add a Power Automate approval workflow in the button to notify the approver. Learn more in 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 allow easy data connection and customization. This template is ideal for selecting and editing a record 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 desired data source.

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

Once connected, the table and form controls are both bound to the data source.

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

All buttons in this template have prebuilt Power Fx, so there's no need for further customization. When you connect the screen to the selected data source, the screen is now 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 you have more than one screen in your app, you can put them in a different order in your 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 to be displayed first.

Add navigation

When you have more than one screen in your app, you can add navigation so that your users can move between them.

  1. With the screen selected, 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. With the arrow selected, set the OnSelect property to the Navigate function; for example, 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