App navigation in model-driven apps

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

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

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

• Pages - Pages appear under the group that you configure in the app designer. In the following screenshot, one page is named All accounts revenue and another page is named Contacts.

  

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.

3. On the New Area right pane, complete the properties pane for the area:

   • Title: Enter a title used to describe the area.
   • Icon: Optionally set an icon for the area. More information: Create or edit model-driven app web resources to extend an app
   • ID: The system generates an identifier for the area. Accept the system generated ID or enter a new one.
   • Advanced Settings:
     • Localized titles: Add localized titles for the area title. For more information, see Translate localizable text for model-driven apps.
     • Localized descriptions: Add localized descriptions for the area description. For more information, see Translate localizable text for model-driven apps.

4. To save your app navigation changes select Save.

5. To publish the changes and make them available to other users, select Save and 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.

4. Complete the properties pane for the group:

   • Title: Enter a title used to describe the group.
   • ID: The system generates an identifier for the group. Accept the system generated ID or enter a new one.
   • Advanced Settings:
     • Localized titles: Add localized titles for the group title. More information: Translate localizable text for model-driven apps
     • Localized descriptions: Add localized descriptions for the group description. More information: Translate localizable text for model-driven apps

5. To save your app navigation changes select Save.

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

Create a page

To create a new page, complete the following steps:

1. On the command bar, select Add page.
2. Select the content type you want.
   • Generative page. Use natural language to build a generative page that's created using AI. For more information, see Generate a page using natural language.
   • 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
   • Dashboard. Add a Dataverse or Power BI embedded dashboard as a page in the app. For more information, see Create or edit model-driven app dashboards and Create or edit a Power BI embedded system dashboard. (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.

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:

   • URL: Enter the full URL, such as https://www.microsoft.com.

   • Title: Enter a title for the URL component.

     

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)