Design a custom page for your model-driven app (preview)

This article provides tips for designing a custom page for use in a model-driven app.

Important

  • The base functionality of custom pages has moved to general availability in all regions. However some specific or new capabilities are still in public preview and are marked with (preview).
  • 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.
  • Custom pages are a new feature with significant product changes and currently have a number of known limitations outlined in Custom Page Known Issues.

Supported controls in a custom page

Custom page authoring currently supports a subset of canvas app controls. The table below lists the currently supported controls.

Control Control Type Notes
Label1 Display
Text Box1 Input
Date Picker1 Input
Button1 Input
Combo Box1 Input
Check Box1 Input
Toggle1 Input
Radio Group1 Input
Slider1 Input
Rating1 Input
Vertical Container Layout New responsive horizontal layout container
Horizontal Container Layout New responsive horizontal layout container
Rich Text Editor Input
Gallery List
Icon Media
Image Media
Edit Form Input
Display Form Input
Code components Custom Add code components to a custom page
Canvas components (preview) Custom Add canvas components to a custom page

1 Control is a new modern control. The control was introduced for canvas apps in Teams. The control is based on Fluent UI library wrapped with Power Apps Component Framework.

Custom components support for custom page

You can add both low-code (canvas components) and pro-code (code components) custom UX components to your environment and make them available for all makers. For custom page specific UX extensibility articles, see add canvas components to a custom page for your model-driven app and add code components to a custom page for your model-driven app.

In general, the low-code extensibility approach is simpler to build, test, and has a lower maintenance cost. We recommend evaluating canvas components first and then use code components only if there is a need for more complex and advanced customization.

More information:

Enable responsive layout with container control

Responsive custom page layouts are defined by building a hierarchy of Horizontal layout container and Vertical layout container controls. These controls are found in the canvas app designer under Layout on the Insert tab.

Set the minimum screen height and width on the App object to prevent page level scroll bars and use a vertical body scroll bar.

MinScreenHeight=200
MinScreenWidth=200

Optionally, the custom page design size can be adjusted in Settings > Display with Size set to Custom. Then set the Width and Height to a more typical desktop custom page size like width 1080 and height 768. Changing this setting after controls are added to the screen may cause some layout properties to become reset.

Set the topmost container to fill the entire space and resize based on available space.

X=0
Y=0
Width=Parent.Width
Height=Parent.Height

Horizontal wrapping of a flexible height container

To support pages adjusting from desktop down to a narrow width, enable these properties on a horizontal container with flexible height. Without these settings, the page will clip controls when the page is narrow.

Direction=Horizontal
FlexibleHeight=true
Justify=Stretch
Align=Stretch
VerticalOverflow=Scroll
Wrap=True

Child containers or controls directly under this container should be set to have a minimum width that allows the page to fit within a 300 px width. Consider the padding on the container or control as well as parent containers.

Vertical wrapping of a flexible width container

To support pages adjusting from desktop down to a narrow width, enable these properties on a vertical container with flexible width. Without these settings, the page will clip controls when the page is narrow.

Direction=Vertical
FlexibleWidth=true
Justify=Stretch
Align=Stretch
HorizontalOverflow=Scroll
Wrap=True

Child containers or controls directly under this container should be set to have a minimum height that allows the page to fit within a 300 px width. Consider the padding on the container or control as well as parent containers.

More information: Building responsive layout.

  1. On the Vertical Container, set Align (horizontal) to Stretch

  2. Insert three Horizontal Container controls within the parent Vertical Container

  3. On the first and third child horizontal container controls, set Stretch height off and reduce height to space needed, such as Height=80.

Horizontal container with two even child containers

  1. On the parent horizontal container, set Align (vertical) to Stretch.

  2. Insert two Vertical Container controls within the parent Horizontal Container.

Styling custom page controls to align to model-driven app controls

By creating the custom page from the modern app designer, these features use the default values.

  • Theme for the custom page. Theme values for the controls used in a custom page are automatically set to match the default blue theme of the Unified Interface. This default theme is used both in the studio and at application runtime. Explicit theme selecting is removed from custom page authoring experience.

  • Controls need to use a different font size, which is based on their position in the page hierarchy.

    Note

    Custom page text has a upscaling of 1.33 so you need to divide the target FontSize by 1.33 to get the desired size.

    Label Type Target FontSize FontSize to use
    Page title 17 12.75
    Normal labels 14 10.52
    Small labels 12 9.02
  • Primary and secondary button controls need the following styling changes:

    Primary buttons

    Color=RGBA(255, 255, 255, 1)
    Fill=RGBA(41,114,182,1)
    Height=35
    FontWeight=Normal
    

    Secondary buttons

    Color=RGBA(41,114,182,1)
    Fill=RGBA(255, 255, 255, 1)
    BorderColor=RGBA(41,114,182,1)
    Height=35
    FontWeight=Normal
    

Tab navigation and keyboard accessibility for custom pages

Custom pages follow the same tab navigation design that's used by the hosting model-driven app. Visually aligned semantic HTML structure helps users navigate the custom pages seamlessly when using a keyboard or a screen reader. Note that unlike stand alone canvas apps, custom page controls and other UX elements don't need explicit tab numbers assignments. Modern controls don't have a TabIndex property and utilize the semantic HTML structure for navigation.

Various elements like controls, canvas and code components, containers and so on can be tabbed based on their position in the custom page layout. The tab navigation follows Z order navigation. Individual tab-stops inside larger grouping elements like components, containers are navigated first before the tab moves out to the next element in the document object model (DOM) tree.

Here is an example navigation with the page containing controls, code, and canvas components and containers.

Custom page tab navigation.

Note

Overlapping controls and elements on the custom page will not have their DOM merged so tab stops can be out of sync from visual layout. The same is true for the dynamic element positioning using formulas.

See also

Model-driven app custom page overview

Using PowerFx in custom page

Building responsive layout

Add a custom page to your model-driven app