Add a custom page to your model-driven app (preview)

[This topic is pre-release documentation and is subject to change.]

This article guides you through creating and editing a custom page for a model-driven app using the modern app designer.

Important

  • This is a preview feature, and may not be available in all regions.
  • Preview features aren’t meant for production use and may have restricted functionality. These features are available before an official release so that customers can get early access and provide feedback.

Create or edit a model-driven app using modern app designer

The following steps walk you through opening the new modern app designer, which is needed to add a custom page to a model-driven app.

Create a new model-driven app using modern app designer

  1. Sign into Power Apps

  2. On the left navigation pane, select Solutions and then open or create a solution to contain the new model-driven app.

  3. Select New > App > Model-driven app.

  4. Select Use modern app designer, and then select Next.

    New model-driven app design prompt

  5. Enter the new app's Name, optionally a Description, and then select Create.

    New model-driven app name prompt

Open an existing model-driven app using modern app designer

  1. Open make.powerapps.com

  2. On the left navigation pane, select Solutions, and then open the solution containing the existing model-driven app.

  3. Open the model-driven app menu and select Edit > Edit in preview to open the modern app designer.

    Open modern app designer preview

Create or edit a custom page

Custom pages can be created from two places. The first is while authoring a model-driven app in the modern app designer. The other is from the Solutions area in Power Apps. Custom pages can be edited from the Solutions area but won't appear in the Home or Apps areas of make.powerapps.com.

Note

Custom pages must be created from a solution either from the modern app designer and or the Solutions area in Power Apps using New > Page. The custom page is a different canvas app type than the normal standalone canvas app.

Create new custom page from modern app designer

  1. Open modern app designer.

  2. Select New page on the command bar or on the Pages pane.

    App designer create new page

  3. Select Custom as the page type.

    New page select custom page

  4. The canvas app designer opens for page authoring.

    Canvas designer new page

  5. When you're finished creating your canvas app custom page, Save, Publish, and then close the canvas app designer browser tab to return to the model-driven app designer.

Create new custom page from the solutions area

  1. Sign in to Power Apps

  2. Select Solutions from the left navigation pane, and open or create a solution to contain the new custom page

  3. Select New > App > Page.

    Solutions area create new page

Edit an existing custom page

  1. Open up make.powerapps.com

  2. Select Solutions from the left navigation pane, and then open or create a solution to contain the new custom page.

  3. Select the custom page with Page type, and then select Edit.

    Solutions area new page

Author custom page content

  1. Design the custom page content. More information: Design a custom page for your model-driven app

  2. Save and publish the custom page.

  3. Close canvas app designer.

  4. Return to the app designer browser tab and refresh the app designer by selecting Dismiss.

    Dismiss creating your page prompt

  5. Select Publish in the app designer to add the changed custom page into the model-driven app.

  6. Select Preview to play the app in a new browser tab.

Add an existing custom page into a site map

  1. Sign into make.powerapps.com

  2. Open an existing model-driven app using modern app designer

  3. Select the Navigation tab.

    App Designer navigation pane

  4. Expand the navigation, and then select the location to place the page.

  5. Select Add > Subarea to add a new item after the selection.

    App Designer app subarea

  6. In the right property pane, select an existing Page from the list, and then enter a Title.

    App Designer subarea select existing page

  7. Select Publish, which also saves the app if there are changes.

  8. Select Play to run the app in a new browser tab.

  9. To close the app designer select Back and return to the solution.

See also

Model-driven app custom page overview

Design a custom page for your model-driven app

Using PowerFx in custom page

Navigating to and from a custom page using client API

Code components for custom page designer