Skip to main content

DefineDashboardExtension

defineDashboardExtension​

@vendure/dashboarddefine-dashboard-extension.ts
v3.3.0

The main entry point for extensions to the React-based dashboard. Every dashboard extension must contain a call to this function, usually in the entry point file that is referenced by the dashboard property of the plugin decorator.

Every type of customisation of the dashboard can be defined here, including:

  • Navigation (nav sections and routes)
  • Layout (action bar items and page blocks)
  • Widgets
  • Form components (custom form components, input components, and display components)
  • Data tables
  • Detail forms
  • Login

Example

defineDashboardExtension({
 navSections: [],
 routes: [],
 pageBlocks: [],
 actionBarItems: [],
});
Signature
function defineDashboardExtension(extension: DashboardExtension): void

Parameters

extension​

parameter
DashboardExtension

DashboardExtension​

@vendure/dashboardextension-api-types.ts
v3.3.0

This is the main interface for defining all extensions to the dashboard.

Every type of customisation of the dashboard can be defined here, including:

  • Navigation (nav sections and routes)
  • Layout (action bar items and page blocks)
  • Widgets for the Insights page
  • Form components
  • Data tables
  • Detail forms
  • Login page customisation
Signature
interface DashboardExtension {
    routes?: DashboardRouteDefinition[];
    navSections?: DashboardNavSectionDefinition[];
    pageBlocks?: DashboardPageBlockDefinition[];
    actionBarItems?: DashboardActionBarItem[];
    alerts?: DashboardAlertDefinition[];
    widgets?: DashboardWidgetDefinition[];
    customFormComponents?: DashboardCustomFormComponents;
    dataTables?: DashboardDataTableExtensionDefinition[];
    detailForms?: DashboardDetailFormExtensionDefinition[];
    login?: DashboardLoginExtensions;
}

routes​

property
DashboardRouteDefinition[]

Allows you to define custom routes such as list or detail views.

property
DashboardNavSectionDefinition[]

Allows you to define custom nav sections for the dashboard.

pageBlocks​

property
DashboardPageBlockDefinition[]

Allows you to define custom page blocks for any page in the dashboard.

actionBarItems​

property
DashboardActionBarItem[]

Allows you to define custom action bar items for any page in the dashboard.

alerts​

property
DashboardAlertDefinition[]

Allows you to define custom alerts that can be displayed in the dashboard.

widgets​

property
DashboardWidgetDefinition[]

Allows you to define custom routes for the dashboard, which will render the given components and optionally also add a nav menu item.

customFormComponents​

property
DashboardCustomFormComponents

Unified registration for custom form custom field components.

dataTables​

property
DashboardDataTableExtensionDefinition[]

Allows you to customize aspects of existing data tables in the dashboard.

detailForms​

property
DashboardDetailFormExtensionDefinition[]

Allows you to customize the detail form for any page in the dashboard.

login​

property
DashboardLoginExtensions

Allows you to customize the login page with custom components.