App shellModel-driven app

Site map

The left navigation of a model-driven app: groups of pages for tables and dashboards, with an area switcher and a collapsible pane.

Show me in the demoOpens the demo app with this component highlighted.

What it is

The site map is the navigation pane on the left. It lists the pages of the app, such as table views and dashboards, arranged in groups. If the maker enabled areas, an area switcher at the bottom left lets you jump between sets of groups. The hamburger button at the top collapses the pane to icons so the page gets more room.

When to use it

Use the site map as the main way into the app. Group pages by what people do (for example Work, Customers, Activities, Settings), not by table owner. Keep the list short: a handful of groups and no more than a few pages each. For the pages a person uses most, rely on Home, Recent and Pinned rather than adding more entries.

Licensing and configuration

No extra licence. You build the site map in the app designer, in the Navigation section of the Pages pane, using areas, groups and subareas. Navigation settings let you show or hide Home, Recent and Pinned, enable collapsible groups (off by default) and enable areas (off by default; on automatically if the app already has several).

Pitfalls

  • Areas are off by default, so the area switcher only shows up after you turn on Enable Areas.
  • Collapsible groups are off by default too. Long groups without them push the useful pages below the fold.
  • Each subarea opens a view or dashboard, not a form. People often forget to add a table to the app, so it never appears in the navigation.
  • Renaming a group is easy, but bookmarks to the old page keep pointing at the page, not the label.

Try it in the demo

  1. Select a page under Work and note that it opens a grid.
  2. Use the area switcher at the bottom to change area.
  3. Select the hamburger to collapse the pane to icons, then again to expand it.