Create List and Detail Dashboard Pages

The master-detail pattern is one of the most useful dashboard designs for managing data in your Blocks app. This pattern involves creating 2 connected dashboard pages: a master page that displays a list of items (such as products, orders, customers, or blog posts) and a detail page that shows comprehensive information about a selected item. When users click on an item in the list, they navigate to the detail page with the specific item's data automatically loaded.

This guide shows you how to implement this pattern using the dashboard SDK's navigate() method to pass data between pages and the observeState() method to retrieve and use that data on the destination page.

Step 1 | Copy the dashboard page ID

Copy the single item dahsboard page ID from its Page Settings:

The ID should look something like this: 1600e523-f812-497d-9323-46e82ab78bd6.

Step 2 | Use navigate() to pass data

This step is done in the list dashboard page.

To send specific data to the destination dashboard page, use the relativeUrl parameter in the navigate() method. For example, pass a specific item ID to create a dynamic experience on the destination page.

The code assumes a repeater with items. When an item is clicked, the single item should open.

Step 3 | Use observeState() to retrieve data

This step is done in the detail dashboard page.

Use the data passed to the observeState() callback method to dynamically update the page's content. The callback is triggered both when the dashboard page is initialized and whenever it's updated.