*** title: "DefineDashboardExtension" generated: true --------------- ## defineDashboardExtension 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 input components for custom fields, configurable operation arguments, and native detail-page fields * Data tables * Detail forms * Login * Custom history entries * Toolbar items *Example* ```tsx defineDashboardExtension({ navSections: [], routes: [], pageBlocks: [], actionBarItems: [], alerts: [], widgets: [], customFormComponents: {}, dataTables: [], detailForms: [], login: {}, historyEntries: [], toolbarItems: [], }); ``` ```ts title="Signature" function defineDashboardExtension(extension: DashboardExtension): void ``` Parameters ### extension \DashboardExtension`} /> ## DashboardExtension 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 input components for custom fields, configurable operation arguments, and native detail-page fields * Data tables * Detail forms * Login page customisation * Alerts * History entries * Toolbar items ```ts title="Signature" interface DashboardExtension { routes?: DashboardRouteDefinition[]; navSections?: DashboardNavSectionDefinition[] | ((config: NavMenuConfig) => NavMenuConfig); pageBlocks?: DashboardPageBlockDefinition[]; actionBarItems?: DashboardActionBarItem[]; alerts?: DashboardAlertDefinition[]; widgets?: DashboardWidgetDefinition[]; customFormComponents?: DashboardCustomFormComponents; dataTables?: DashboardDataTableExtensionDefinition[]; detailForms?: DashboardDetailFormExtensionDefinition[]; login?: DashboardLoginExtensions; historyEntries?: DashboardHistoryEntryComponent[]; toolbarItems?: DashboardToolbarItemDefinition[]; customProviders?: DashboardCustomProviderDefinition[]; } ```
### routes \DashboardRouteDefinition[]`} /> Allows you to define custom routes such as list or detail views. ### navSections \DashboardNavSectionDefinition[] | ((config: NavMenuConfig) => NavMenuConfig)`} /> Allows you to define custom nav sections for the dashboard. Can be provided as either: * An **array** of `DashboardNavSectionDefinition` objects to declaratively add new sections * A **function** that receives the current `NavMenuConfig` and returns a new one, allowing full control over the nav menu (move, remove, reorder items between sections) When using the function form, the function is guaranteed to run *after* all array-form registrations have completed, so it always sees the fully-populated nav config. *Example* ```ts // Array form (existing) navSections: [{ id: 'my-section', title: 'My Section' }] // Function form (new) navSections: (config) => ({ sections: config.sections.map(s => s.id === 'settings' && 'items' in s ? { ...s, items: s.items?.filter(i => i.id !== 'administrators') } : s ), }) ``` Note: modifier functions should return a **new** config object rather than mutating the input, to ensure predictable behavior when multiple modifiers are composed. The function form was introduced in version 3.6.0. ### pageBlocks \DashboardPageBlockDefinition[]`} /> Allows you to define custom page blocks for any page in the dashboard. ### actionBarItems \DashboardActionBarItem[]`} /> Allows you to define custom action bar items for any page in the dashboard. ### alerts \DashboardAlertDefinition[]`} /> Allows you to define custom alerts that can be displayed in the dashboard. ### widgets \DashboardWidgetDefinition[]`} /> Allows you to define custom widgets for the Insights page. ### customFormComponents \DashboardCustomFormComponents`} /> Registers custom input component IDs for custom fields and configurable operation arguments. ### dataTables \DashboardDataTableExtensionDefinition[]`} /> Allows you to customize aspects of existing data tables in the dashboard. ### detailForms \DashboardDetailFormExtensionDefinition[]`} /> Allows you to customize detail pages, including native field input overrides. ### login \DashboardLoginExtensions`} /> Allows you to customize the login page with custom components. ### historyEntries \DashboardHistoryEntryComponent[]`} /> Allows a custom component to be used to render a history entry item in the Order or Customer history lists. ### toolbarItems \DashboardToolbarItemDefinition[]`} since="3.5.3" /> Allows you to define custom toolbar items in the app shell header bar. Toolbar items appear alongside the breadcrumbs, Dev Mode indicator, and alerts icon. ### customProviders \DashboardCustomProviderDefinition[]`} since="3.7.0" /> Allows you to add custom providers in different locations.