Overview of the model-driven app designer

The new model-driven app designer provides a modern WYSIWYG authoring experience when you work with model-driven apps.

Changes to the app are instantly reflected in the preview, enabling you to see exactly how the app will appear to users when published.

Layout of the model-driven app designer that has the account and contact tables added

The app designer interface has the following areas:

  1. Command bar – Displays the available actions:

    • Back. Closes the model-driven app designer and returns you to the Power Apps website (make.powerapps.com).
    • New page. Creates a new page for one or more table forms and views or table dashboards for the app.
    • Settings. Opens the app properties such as name and description.
    • Switch to classic. Opens the app in the classic app designer.
    • Save. Saves the app.
    • Publish. Makes the changes made available to other users.
    • Play. Opens the app in a new tab in run mode.
  2. App preview – Displays a real-time preview of the form as it will appear to users when published.

  3. Panes - The left navigation pane consists of the following areas:

    • Pages. Displays the components in your app. From the page area you can choose to add or remove forms, views, and dashboards for each table.
    • Navigation. Displays a navigation structure of your app that is formed using areas, groups, and subareas. You can add or remove groups and subareas to the navigation.
    • Data. Provides a view of all available tables that are currently used within your app and a view of all tables that are available in your environment.
    • Automation. Displays business process flows that are a part of this app. You can add, remove, or create new business process flows to the app.
  4. Property pane – Displays properties of the selected component and also allows you to make changes.

  5. Preview size switcher - Changes the size of the form preview helping you to see how the form will appear on various screen sizes.

  6. Zoom slider - Zooms in or out of the app preview helping you take a closer look.

  7. Fit to screen - Quick action to fit the app preview to the available screen size.

    Layout of the model-driven app designer that has the account and contact tables added.

From the Navigation pane, select Navigation bar to set the following options.

  1. Show Home. Enabled by default. When selected, displays the Home page link for the app.

  2. Show Recent. Enabled by default. When selected, displays the recently viewed pages link. Selecting the link displays all recently viewed pages.

  3. Show Pinned. Enabled by default. When selected, displays the pages that have been pinned. App users select the push-pin icon next to a record listed under Recent to add it to their pinned rows.

  4. Enable collapsible groups. Disabled by default. When selected, subareas displayed under groups in the site map can be expanded or collapsed.

  5. Enable Areas. Disabled by default. When selected, new areas can be added to the app. For apps with existing multiple areas, this setting is enabled by default. You can't disable this setting while the app has multiple areas.

  6. Enable web resources. Disabled by default. When selected, web resources can be added to the app as a type of subarea. More information: Add a web resource to an app (preview).

  7. Enable URLs. Disabled by default. When selected, URLs can be added to the app as a type of subarea. More information: Add a URL to an app

    Options available for app navigation

Known limitation

  • The app’s URL can’t be specified.

Next steps

Create a model-driven app using the app designer

Working with custom pages

Understanding app navigation