Skip to main content

DetailForms

DashboardDetailFormInputComponent​

@vendure/dashboarddetail-forms.ts
v3.4.0

Allows you to define custom input components for specific fields in detail forms. The pageId is already defined in the detail form extension, so only the blockId and field are needed.

Signature
interface DashboardDetailFormInputComponent {
    blockId: string;
    field: string;
    component: DataInputComponent;
}

blockId​

property
string

The ID of the block where this input component should be used.

field​

property
string

The name of the field where this input component should be used.

component​

property
DataInputComponent

The React component that will be rendered as the input. It should accept value, onChange, and other standard input props.

DashboardDetailFormDisplayComponent​

@vendure/dashboarddetail-forms.ts
v3.4.0

Allows you to define custom display components for specific fields in detail forms. The pageId is already defined in the detail form extension, so only the blockId and field are needed.

Signature
interface DashboardDetailFormDisplayComponent {
    blockId: string;
    field: string;
    component: DataDisplayComponent;
}

blockId​

property
string

The ID of the block where this display component should be used.

field​

property
string

The name of the field where this display component should be used.

component​

property
DataDisplayComponent

The React component that will be rendered as the display. It should accept value and other standard display props.

DashboardDetailFormExtensionDefinition​

@vendure/dashboarddetail-forms.ts
v3.4.0

Allows you to extend existing detail forms (e.g. on the product detail or customer detail pages) with custom GraphQL queries, input components, and display components.

Signature
interface DashboardDetailFormExtensionDefinition {
    pageId: string;
    extendDetailDocument?: string | DocumentNode | (() => DocumentNode | string);
    inputs?: DashboardDetailFormInputComponent[];
    displays?: DashboardDetailFormDisplayComponent[];
}

pageId​

property
string

The ID of the page where the detail form is located, e.g. 'product-detail', 'order-detail'.

extendDetailDocument​

property
string | DocumentNode | (() => DocumentNode | string)

Extends the GraphQL query used to fetch data for the detail page, allowing you to add additional fields that can be used by custom input or display components.

inputs​

property
DashboardDetailFormInputComponent[]

Custom input components for specific fields in the detail form.

displays​

property
DashboardDetailFormDisplayComponent[]

Custom display components for specific fields in the detail form.