Skip to main content

Page Blocks

DashboardPageBlockDefinition​

@vendure/dashboardlayout.ts
v3.3.0

This allows you to insert a custom component into a specific location on any page in the dashboard.

Signature
interface DashboardPageBlockDefinition {
    id: string;
    title?: React.ReactNode;
    location: PageBlockLocation;
    component?: React.FunctionComponent<{ context: PageContextValue }>;
    shouldRender?: (context: PageContextValue) => boolean;
    requiresPermission?: string | string[];
}

id​

property
string

An ID for the page block. Should be unique at least to the page in which it appears.

title​

property
React.ReactNode

An optional title for the page block

location​

property
PageBlockLocation

The location of the page block. It specifies the pageId, and then the relative location compared to another existing block.

component​

property
React.FunctionComponent<{ context: PageContextValue }>

The component to be rendered inside the page block.

shouldRender​

property
v3.5.0
(context: PageContextValue) => boolean

Control whether to render the page block depending on your custom logic.

This can also be used to disable any built-in blocks you do not need to display.

If you need to query aspects about the current context not immediately provided in the PageContextValue, you can also use hooks such as useChannel in this function.

requiresPermission​

property
string | string[]

If provided, the logged-in user must have one or more of the specified permissions in order for the block to render.

For more advanced control over rendering, use the shouldRender function.

PageBlockPosition​

@vendure/dashboardlayout.ts
v3.3.0

The relative position of a PageBlock. This is determined by finding an existing block, and then specifying whether your custom block should come before, after, or completely replace that block.

Signature
type PageBlockPosition = {
    blockId: string;
    order: 'before' | 'after' | 'replace'
}

blockId​

property
string

order​

property
'before' | 'after' | 'replace'

PageBlockLocation​

@vendure/dashboardlayout.ts
v3.3.0

The location of a page block in the dashboard. The location can be found by turning on "developer mode" in the dashboard user menu (bottom left corner) and then clicking the < /> icon when hovering over a page block.

Signature
type PageBlockLocation = {
    pageId: string;
    position: PageBlockPosition;
    column: 'main' | 'side';
}

pageId​

property
string

position​

property
PageBlockPosition

column​

property
'main' | 'side'