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

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

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

Important

  • This is a preview feature, and isn't 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.

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 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.

Resize the topmost container to fill the entire space with these properties.

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

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