Overview of custom pages for model-driven apps
The custom page is a new page type within a model-driven app, which brings the power of canvas apps into model-driven apps. Custom pages increase the convergence of model-driven and canvas apps and can be used to add full pages, dialogs, or panes with the flexibility of the canvas designer. It also includes a low-code page authoring experience with expressions and custom Power Apps component framework controls.
This new page can be more flexible than a model-driven app form, view, or dashboard page. It lets you include one or more tables. Then, the maker can define the data and component interactions. The custom page is a separate solution element, which allows one maker to edit one custom page at a time. Like other model-driven app pages, the page state is either from the parameters passed or retrieved from persisted tables.
Important
Custom pages are a new feature with significant product changes and currently have a number of known limitations outlined in Custom Page Known Issues.
| Capability | Status | Notes |
|---|---|---|
| Runtime for custom pages | General Availability | |
| Solution and ALM for custom pages | General Availability | |
| Connectors in custom pages | General Availability | List of all Power Apps connectors |
| Modern controls in custom pages | General Availability | List of supported controls |
| Code components in custom pages | General Availability | |
| Monitor support for custom pages | General Availability | |
| Authoring custom pages | General Availability | Modern app designer and canvas designer are expected to be used to author custom page that are supported at runtime |
| Canvas components in custom pages | General Availability | |
| Custom page in Teams model-driven app | Public preview | |
| Custom page in mobile online | Public preview | iOS must allow enabling “Allow cross site tracking” that can be prevented by device management |
Examples of custom pages
Below shows the custom page inline within the model-driven app. The model-driven app has the full-page space in the images without the header and navigation.
Custom page as a center dialog.
Custom page as an app side pane allows opening a custom page within the new app side pane on the right side of the app.
Custom pages must be created from a solution either from the modern app designer or the Solution area in Power Apps using New > Page. More information: Add a custom page to your model-driven app
Custom pages are different than embedded canvas apps
A custom page enables makers to create a new page experience using the canvas app capabilities. This provides a low-code authoring experience with more flexible layouts, more control with styling options, the ability to add connector data, use expressions, and so on. Custom page authoring happens in the canvas app designer with increasing context of the model-driven app that the page runs in.
Embedded canvas apps also use the canvas capabilities with a hosting approach that isn't as integrated as a custom page. The simpler integration of an embedded canvas app means the current limitation on number of embedded canvas apps hasn't changed. The advanced integration of the custom page addresses those limits. The embedded canvas app can only be placed on a model-driven form acting like a low-code component. More information: Embed a canvas app on a model-driven form.
In most cases, we recommend that you use custom pages instead of embedded canvas apps for tighter integration and better performance.
Note
The number of custom pages in a model-driven app shouldn't exceed 25. The amount of custom pages in an app can increase the wait time an app user experiences when the user plays an app with custom pages, after the last app publish. The increased user wait time is limited to the first app launch, by the first user, after the last publish of the model-driven app.
Migrating standalone canvas app content to custom pages
Existing standalone canvas apps aren't supported for use as a custom page and the expected app structure is different. A standalone canvas app often has many screens with global access to all controls and variables. The custom page is expected to typically be a single screen with loose coupling to provide performance and co-development capabilities.
To migrate an existing standalone canvas app, first start by identifying a mapping of screens to separate custom pages. For each separate custom page complete the following steps:
- Create a blank custom page from the model-driven app designer. More information: Add a custom page to your model-driven app
- Add a canvas app data source for data used by the screen.
- Copy the screen from the original canvas app in the canvas designer.
- Paste the screen into the blank custom page in the canvas designer.
- Change the navigate calls to use the custom page name instead of the screen name.
- Add the custom page into the model-driven app designer site map.
Frequently asked questions
What data can the custom page use?
A custom page can use Microsoft Dataverse and all of the connectors for Power Apps. More information: List of all Power Apps connectors.
What interactions can the custom page have with the model-driven app?
Custom pages can be added to the site map for direct navigation using Add custom page to sitemap. Model-driven app pages can open a custom page using the
navigateToClient API. Custom pages can navigate to other custom pages or to a model-driven app page such as a form, view, or dashboard with the Power Fx navigate function. More information: Navigating to a custom pageHow is the custom page made responsive?
The responsive container controls enable building a responsive app page without formulas. More information: Building responsive pages. More custom page design guidance can also be found in Design a custom page for your model-driven app.
How is the custom page managed in a solution?
Each custom page is a separate component in the solution, which allows one maker to edit one custom page at a time. Most custom pages will have a single screen. Instead of multiple screens, they'll use the custom page's navigation functions to move to another custom page or model-driven app page. When a custom page has multiple screens, it's still a single solution component so only one maker can be working on the contained set of screens.
What licenses are allowed to use a custom page and does a custom page impact app counts?
The custom page uses a special canvas app type, which allows it to be managed differently. The custom page is considered part of the model-driven app infrastructure and can only be used within a model-driven app. So, it follows the license for the model-driven app. Also, custom pages don't count toward the app limits because they're treated as a page instead of an app.
Do custom pages need to be shared like standalone canvas apps?
The custom page is aligned with the model-driven app page sharing, which relies on the model-driven app sharing without sharing individual pages for app users. Makers might need to share the custom page to allow editing.
See also
Add a custom page to your model-driven app
Design a custom page for your model-driven app
Add connectors into custom pages