Edit

Share via

App navigation in model-driven apps

  • Article

In a model-driven app, there are the three main app runtime navigation components.

  1. Areas - For apps with more than one area, a switch control is displayed in the lower left navigation pane. In the screenshot below, the current area is named Accounts.

  2. Groups - Group names appear as a navigation element in an app with the subarea names within the group listed beneath it. In the screenshot below, one group is named Accounts and one is named New Group.

  3. Pages - Pages appear under the group that they're configured within in the app designer. In the screenshot below, one page is named All accounts revenue and another page is named Contacts.

    Default model-driven app site map

Create an area

By default, the ability to create additional areas is disabled. Areas are enabled by default for apps with existing multiple areas.

Enable areas

  1. On the command bar select Settings.
  2. Select Navigation on the left pane, and then select Enable Areas.
  3. Close the Settings dialog.

Add a new area

  1. On the left navigation pane, select Pages.

  2. Select the area switcher under Pages, and then select New area. If the area switcher is missing, you need to enable areas. Create an area for you app.

  3. Complete the properties pane for the area:

  4. To save your app navigation changes select Save.

  5. To publish the changes and make them available to other users, select Publish.

Create a group

To create a new group, complete the following steps:

  1. On the left navigation pane, select Pages.

  2. Select ... next to Navigation.

  3. Select New group. Add a group or page

  4. Complete the properties pane for the group:

  5. To save your app navigation changes select Save.

  6. To publish the changes and make them available to other users, select Publish.

Create a page

Pages were formerly called subareas in the app designer. To create a new page, complete the following steps:

  1. On the command bar, select Add page.
  2. Select the content type you want.
    • Dataverse table. Select an existing table or create a new one. More information: Create a custom table
    • Dashboard. Select a dashboard. More information: Create or edit model-driven app dashboards
    • Custom page. Add a custom page, such as a canvas app page. More information: [Overview of custom pages for model-driven apps]
    • Web resource. Web resources represent files that can be used to extend an application such as HTML files, JavaScript, and CSS, and several image formats.
    • Navigation link. Add a URL, such as a website address. More information: Add a URL to an app (model-app-page-overview.md)
  3. Complete the choices that are on you screen to create the page, and then select Add.
  4. To save your app navigation changes select Save.
  5. To publish the changes and make them available to other users, select Publish.

Add a URL to an app

A URL is a type of page in the app navigation. When the user selects the page, the URL opens in a new tab in the web browser.

URL component in a model-driven app

  1. In the model-driven app designer, select Add page on the command bar.

  2. On the New page screen, select URL, and then select Next.

  3. In the properties pane for the URL, enter the following information, and then select Add:

  4. To save your app navigation changes select Save.

  5. To publish the changes and make them available to other users, select Publish.

Remove a group or page

  1. On the left navigation pane, select Pages.
  2. Select the group or page you want, select the ellipses (...) and then select Remove from navigation.

Remove an area

  1. On the left navigation pane, select Pages.
  2. Select the area switcher under Pages, select ... next to the area you want to remove, and then select Remove from navigation.

See also

Overview of the model-driven app designer (preview)