Page Blocks

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

propertystring

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

title

propertyReact.ReactNode

An optional title for the page block

location

propertyPageBlockLocation

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

component

propertyReact.FunctionComponent<{ context: PageContextValue }>

The component to be rendered inside the page block.

shouldRender

property(context: PageContextValue) => booleanv3.5.0

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

propertystring | 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.

@vendure/dashboard Sourcev3.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

propertystring

order

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

@vendure/dashboard Sourcev3.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' | 'full';}

pageId

propertystring

position

propertyPageBlockPosition

column

property'main' | 'side' | 'full'