Navigate Between Dashboard Pages

You can connect multiple dashboard pages in your CLI project 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.

To navigate between dashboard pages:

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

Prerequisites

• A Wix CLI project with at least 2 dashboard page extensions.
• The @wix/dashboard package installed in your project.

Step 1 | Get the target page's component ID

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

Step 2 | Navigate from the source page

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

Step 3 | Retrieve data on the target page

On the target page, use 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 (pageParams) contains a location object with the pathname passed via relativeUrl:

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

See also

• Add Dashboard Page Extensions with the Wix CLI
• Dashboard Page Extension Files and Code
• navigate() API reference
• observeState() API reference