Customizing Pages
Existing pages in the Dashboard can be customized in many ways:
- Action bar buttons can be added to the top of the page
- Page blocks can be added at any position, and existing page blocks can be replaced or removed.
- Extend list pages with custom components, data and bulk actions
- Extend detail pages with custom components and data
- Toolbar items can be added to the global header bar
- History entries can render custom Order and Customer timeline events
Most customizations should be implemented with these extension APIs rather than by copying or replacing a built-in route. Replacing a route is still possible by registering your own route, but it should normally be the last option because it means you take responsibility for keeping that whole page aligned with future Dashboard behavior.
Choose the Right Extension Point
| I want to... | Use this |
|---|---|
| Add a button to an existing page header | Action bar items |
| Add secondary page actions in the three-dot menu | Action bar dropdown items |
| Add a panel to a detail page or replace an existing panel | Page blocks |
| Hide a built-in panel conditionally | Page block shouldRender with order: 'replace' |
| Change how a table column renders | Data table display components |
| Fetch extra fields for an existing list table | Data table extendListDocument |
| Add bulk actions to a list table | Data table bulk actions |
| Replace a native input on a detail form | Native detail-page input overrides |
| Fetch extra fields for an existing detail page | Detail form extendDetailDocument |
| Add a custom input for a plugin-defined custom field | Custom field components |
| Add a global icon button near alerts | Toolbar items |
| Move, remove, or rename navigation entries | Navigation modification |
| Find the IDs needed by extension APIs | Extension targets and Dev Mode |
Customization Flow
- Turn on Dev Mode and find the relevant IDs.
- Prefer the smallest extension point that matches the job, such as a page block, action bar item, data table extension, or detail form extension.
- If you need extra data, extend the page's GraphQL document rather than creating a parallel request when the data belongs to the page.
- Use components and utilities from
@vendure/dashboardso the extension stays aligned with Dashboard styling and dependency versions. - Only create a new route when you are adding a new workflow or intentionally replacing the whole page experience.
Was this chapter helpful?