Back to Vendure

DashboardWidgetConfig

docs/docs/reference/admin-ui-api/dashboard-widgets/dashboard-widget-config.mdx

3.7.01.4 KB
Original Source
<GenerationInfo sourceFile="packages/admin-ui/src/lib/core/src/providers/dashboard-widget/dashboard-widget-types.ts" sourceLine="11" packageName="@vendure/admin-ui" />

A configuration object for a dashboard widget.

ts
interface DashboardWidgetConfig {
    loadComponent: () => Promise<Type<any>> | Type<any>;
    title?: string;
    supportedWidths?: DashboardWidgetWidth[];
    requiresPermissions?: string[];
}
<div className="members-wrapper">

loadComponent

<MemberInfo kind="property" type={() => Promise<Type<any>> | Type<any>} />

Used to specify the widget component. Supports both eager- and lazy-loading.

Example

ts
// eager-loading
loadComponent: () => MyWidgetComponent,

// lazy-loading
loadComponent: () => import('./path-to/widget.component').then(m => m.MyWidgetComponent),

title

<MemberInfo kind="property" type={string} />

The title of the widget. Can be a translation token as it will get passed through the translate pipe.

supportedWidths

<MemberInfo kind="property" type={DashboardWidgetWidth[]} />

The supported widths of the widget, in terms of a Bootstrap-style 12-column grid. If omitted, then it is assumed the widget supports all widths.

requiresPermissions

<MemberInfo kind="property" type={string[]} />

If set, the widget will only be displayed if the current user has all the specified permissions.

</div>