Page Blocks - Vendure

DashboardPageBlockDefinition

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

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

id

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

title

An optional title for the page block

location

<MemberInfo kind="property" type={<a href='/reference/dashboard/extensions-api/page-blocks#pageblocklocation'>PageBlockLocation</a>} />

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

component

The component to be rendered inside the page block.

shouldRender

<MemberInfo kind="property" type={(context: PageContextValue) => boolean} since="3.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

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.

</div> ## PageBlockPosition <GenerationInfo sourceFile="packages/dashboard/src/lib/framework/extension-api/types/layout.ts" sourceLine="100" packageName="@vendure/dashboard" since="3.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.

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

blockId

order

</div> ## PageBlockLocation <GenerationInfo sourceFile="packages/dashboard/src/lib/framework/extension-api/types/layout.ts" sourceLine="112" packageName="@vendure/dashboard" since="3.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.

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

pageId

position

<MemberInfo kind="property" type={<a href='/reference/dashboard/extensions-api/page-blocks#pageblockposition'>PageBlockPosition</a>} />

column

</div>