Navigate Between Dashboard Pages in Studio Two

You can connect multiple dashboard pages in your Studio Two site using the Dashboard SDK's navigate() and observeState() methods. A common use case is the master-detail pattern: a list page that displays items and a detail page that shows information about a selected item.

navigate() always targets a dashboard page. You can also call it from other dashboard extensions, such as plugins and menu plugins. This article covers the page-to-page flow in a Studio Two site. For the full API, see About Dashboard Page Navigation.

To navigate between dashboard pages:

1. Get the target page's ID.
2. Navigate from the source page.
3. Retrieve data on the target page.

Step 1 | Get the target page's ID

You need at least 2 dashboard pages in the site project, and the @wix/dashboard package, which Studio Two site projects already include.

Find the target page's ID in its .extension.ts file. This is the id field:

Step 2 | Navigate from the source page

On the source page, call dashboard.navigate() to send the Wix user to the target page. Pass data through the relativeUrl parameter:

Step 3 | Retrieve data on the target page

On the target page, call dashboard.observeState() to read the data passed through the URL. The callback fires when the page initializes and whenever the state updates.

The first parameter contains a location object with the pathname passed in relativeUrl:

Use the retrieved ID to fetch and display the item's data.

See also

• About Dashboard Pages
• Build a Dashboard Page in Studio Two
• navigate()
• observeState()
• About Dashboard Page Navigation
• About Navigating to Dashboard Pages Built by Wix