> ## Documentation Index
> Fetch the complete documentation index at: https://docs.omni.co/llms.txt
> Use this file to discover all available pages before exploring further.

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://docs.omni.co/feedback

```json
{
  "path": "/visualize-present/dashboards/pages",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# Creating multi-page dashboards

> Build multi-page dashboards in advanced layout to give viewers a tabbed experience.

export const feature_is_0 = "Pages are"

export const CheckIcon = ({label}) => {
  return <span>
      <Icon icon="circle-check" iconType="solid" color="#26bd6c" />
      {label && ` ${label}`}
    </span>;
};

export const XCircleIcon = ({label}) => {
  return <span>
      <Icon icon="circle-xmark" iconType="solid" color="#ff2465" />
      {label && ` ${label}`}
    </span>;
};

export const DashboardIcon = ({label}) => {
  return <span>
      <svg fill="none" height="1em" strokeWidth="2" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" style={{
    display: "inline",
    verticalAlign: "middle"
  }}><path d="M12.5625 3V21M12 9.75H3M21 15.375H12.5625M7 21H17C19.2091 21 21 19.2091 21 17V7C21 4.79086 19.2091 3 17 3H7C4.79086 3 3 4.79086 3 7V17C3 19.2091 4.79086 21 7 21Z" stroke="currentColor"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const WorkbookIcon = ({label}) => {
  return <span>
      <svg fill="none" height="1em" stroke-width="2" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg" style={{
    display: "inline",
    verticalAlign: "middle"
  }}><path d="M9.1875 3V15.375M21 15.375H3M7 21H17C19.2091 21 21 19.2091 21 17V7C21 4.79086 19.2091 3 17 3H7C4.79086 3 3 4.79086 3 7V17C3 19.2091 4.79086 21 7 21Z" stroke="currentColor"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const WorkbookNumberFormatIcon = ({label}) => {
  return <span>
      <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 30 30" stroke-linecap="round" stroke-linejoin="round" height="1.75em" width="1.75em" xmlns="http://www.w3.org/2000/svg" style={{
    display: "inline",
    verticalAlign: "middle"
  }}><path d="M8 10v-7l-2 2"></path><path d="M6 16a2 2 0 1 1 4 0c0 .591 -.601 1.46 -1 2l-3 3h4"></path><path d="M15 14a2 2 0 1 0 2 -2a2 2 0 1 0 -2 -2"></path><path d="M6.5 10h3"></path></svg>
    </span>;
};

export const DashboardCatalogIcon = ({label}) => {
  return <span>
      <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style={{
    display: "inline",
    verticalAlign: "middle"
  }}><path d="M10 19h-6a1 1 0 0 1 -1 -1v-14a1 1 0 0 1 1 -1h6a2 2 0 0 1 2 2a2 2 0 0 1 2 -2h6a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-6a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2z"></path><path d="M12 5v16"></path><path d="M7 7h1"></path><path d="M7 11h1"></path><path d="M16 7h1"></path><path d="M16 11h1"></path><path d="M16 15h1"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const DashboardAddItemIcon = ({label}) => {
  return <span>
      <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style={{
    display: "inline",
    verticalAlign: "middle"
  }}><path d="M4 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path><path d="M4 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path><path d="M14 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"></path><path d="M14 7l6 0"></path><path d="M17 4l0 6"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const DashboardControlIcon = ({label}) => {
  return <span>
      <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style={{
    display: "inline",
    verticalAlign: "middle"
  }}><path d="M3 3m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z"></path><path d="M3 11l8 -8"></path><path d="M3 17l14 -14"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const DashboardChartIcon = ({label}) => {
  return <span>
      <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style={{
    display: "inline",
    verticalAlign: "middle"
  }}><path d="M3 3v18h18"></path><path d="M20 18v3"></path><path d="M16 16v5"></path><path d="M12 13v8"></path><path d="M8 16v5"></path><path d="M3 11c6 0 5 -5 9 -5s3 5 9 5"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const DashboardLayoutIcon = ({label}) => {
  return <span>
      <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style={{
    display: "inline",
    verticalAlign: "middle"
  }}><path d="M4 7l16 0"></path><path d="M4 17l16 0"></path><path d="M7 4l0 16"></path><path d="M17 4l0 16"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const DashboardTextIcon = ({label}) => {
  return <span>
      <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style={{
    display: "inline",
    verticalAlign: "middle"
  }}><path d="M4 20l3 0"></path><path d="M14 20l7 0"></path><path d="M6.9 15l6.9 0"></path><path d="M10.2 6.3l5.8 13.7"></path><path d="M5 20l6 -16l2 0l7 16"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const DashboardStackContainerIcon = ({label}) => {
  return <span>
      <svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style={{
    display: "inline",
    verticalAlign: "middle"
  }}><path d="M4 5C4 4.73478 4.10536 4.48043 4.29289 4.29289C4.48043 4.10536 4.73478 4 5 4H19C19.2652 4 19.5196 4.10536 19.7071 4.29289C19.8946 4.48043 20 4.73478 20 5V9C20 9.26522 19.8946 9.51957 19.7071 9.70711C19.5196 9.89464 19.2652 10 19 10H5C4.73478 10 4.48043 9.89464 4.29289 9.70711C4.10536 9.51957 4 9.26522 4 9V5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M4 15C4 14.7348 4.10536 14.4804 4.29289 14.2929C4.48043 14.1054 4.73478 14 5 14H12C12.2652 14 12.5196 14.1054 12.7071 14.2929C12.8946 14.4804 13 14.7348 13 15V19C13 19.2652 12.8946 19.5196 12.7071 19.7071C12.5196 19.8946 12.2652 20 12 20H5C4.73478 20 4.48043 19.8946 4.29289 19.7071C4.10536 19.5196 4 19.2652 4 19V15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
      {label && ` ${label}`}
    </span>;
};

export const DashboardPageNavIcon = ({label}) => {
  return <span>
      <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" style={{
    display: "inline",
    verticalAlign: "middle"
  }}><path d="M4 8h16"></path><path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"></path><path d="M8 4v4"></path></svg>
      {label && ` ${label}`}
    </span>;
};

<Note>
  {feature_is_0} a feature of [advanced dashboard layouts](/visualize-present/dashboards/advanced-layout).
</Note>

A page is a self-contained tab within a dashboard, with its own [layout, items](/visualize-present/dashboards/containers-items), and filters. Use multiple pages to break a complex dashboard into focused views, separate content for different audiences, or surface drill-downs without forcing viewers to leave the dashboard. Viewers can move between pages using a [page navigation][page-navigation] item.

## Requirements

To follow this guide, you'll need:

* **A dashboard using advanced layouts**. See [Enabling advanced layout](/visualize-present/dashboards/advanced-layout#enabling-advanced-layout) for more information.
* Content permissions that allow you to edit dashboards

<h2 id="add-page">
  Adding pages
</h2>

<Note>
  Dashboards can have up to **15 pages**.
</Note>

Brand new dashboards are created as a single page with an empty layout where you can add containers and items. To add additional pages:

<Steps>
  <Step noAnchor>
    Click the **Edit** button on the dashboard to enter draft mode.
  </Step>

  <Step noAnchor>
    Click **Add > Page**.
  </Step>
</Steps>

When you add a second page to a dashboard (going from 1 to 2 pages), Omni automatically adds page navigation to both pages so viewers can navigate between them. See Page navigation][page-navigation] for more information.

If you add additional pages beyond the second, Omni copies the page navigation appearance from the previous page to maintain a consistent experience across your dashboard.

<h2 id="duplicate-page">
  Duplicating pages
</h2>

Duplicate existing pages in a dashboard to quickly create new pages with the same layout, containers, and content.

<Steps>
  <Step noAnchor>
    Click the **Edit** button on the dashboard to enter draft mode.
  </Step>

  <Step noAnchor>
    Select the page you want to duplicate.
  </Step>

  <Step noAnchor>
    In the properties panel, click **Duplicate page**.
  </Step>
</Steps>

The new page will appear immediately after the original page in the dashboard navigation. Omni automatically generates a unique name for the duplicated page by appending `Copy` to the original page name. For example, `Dashboard Copy` or `Dashboard Copy 2`.

Going from 1 to 2 pages also adds page navigation; see [Adding pages](#add-page).

## Switching and reordering pages

To switch or reorder pages while editing, use the **page selector** in the toolbar:

* **To switch pages**, click the dropdown to see all pages and select the one you want to work on.
* **To reorder pages**, click the dropdown and then **Re-order**. Drag the pages into the desired order and click **Save**.

<h2 id="settings">
  Advanced page settings
</h2>

To access the settings for a dashboard page:

<Steps>
  <Step noAnchor>
    Click the **Edit** button on the dashboard to enter draft mode.
  </Step>

  <Step noAnchor>
    Select the page you want to configure by clicking on it or using the page selector in the toolbar.
  </Step>

  <Step noAnchor>
    With the page selected, click the <Icon icon="ellipsis-vertical" /> icon in the properties panel.
  </Step>

  <Step noAnchor>
    Select **Advanced settings** from the menu.
  </Step>
</Steps>

The **Advanced settings** dialog will open, where you can configure the following:

### Page key

A unique identifier for the page. Keys must:

* Be unique across all pages in the dashboard
* Contain only letters, numbers, hyphens, and underscores
* Not exceed 40 characters
* Not be one of Omni's reserved system values: `chat`, `download`, `drill`, `edit`, `layout`, `monitor`, `move`, `performance`, `preview`, `publish`, `run`, `save-as`, `schedules`, `share`, `themes`, `transfer`

If you enter an empty value, invalid format, or a key that's already used by another page, you'll see a validation error and won't be able to save until the issue is resolved.

<h2 id="delete-page">
  Deleting pages
</h2>

To delete a dashboard page:

<Steps>
  <Step noAnchor>
    Click the **Edit** button on the dashboard to enter draft mode.
  </Step>

  <Step noAnchor>
    Select the page you want to delete.
  </Step>

  <Step noAnchor>
    In the properties panel, click **Delete page**.
  </Step>
</Steps>

Assets from a deleted page can be re-added to existing pages from the <DashboardCatalogIcon /> **Catalog**.

<Warning>
  Text items on a deleted page cannot be recovered from the <DashboardCatalogIcon /> **Catalog**.
</Warning>

## Next steps

* Learn to [build dashboard layouts](/visualize-present/dashboards/containers-items) with containers and items like charts, text, filters, and controls.
* Customize [page navigation](/visualize-present/dashboards/page-navigation) to control how viewers move between pages, including custom tabs and dynamic labels.
* Configure [advanced filters](/visualize-present/dashboards/advanced-filters) to display filters as button toggles, multi-select dropdowns, single-day pickers, and timeframe controls.

[page-navigation]: /visualize-present/dashboards/page-navigation
