FormComponents

Allows you to define custom form components for custom fields in the dashboard.

Signature

interface DashboardCustomFormComponent {    id: string;    component: DashboardFormComponent;}

id

propertystring

A unique identifier for the custom form component. It is a good practice to namespace these IDs to avoid naming collisions, for example "my-plugin.markdown-editor".

component

propertyDashboardFormComponent

The React component that will be rendered as the custom form input.

@vendure/dashboard Sourcev3.4.0

Interface for registering custom field components in the dashboard. For input and display components, use the co-located approach with detailForms.

Signature

interface DashboardCustomFormComponents {    customFields?: DashboardCustomFormComponent[];}

customFields

propertyDashboardCustomFormComponent[]

Custom form components for custom fields. These are used when rendering custom fields in forms.

@vendure/dashboard Sourcev3.4.0

Props that get passed to all form input components. They are based on the controller props used by the underlying react-hook-form, i.e.:

export type ControllerRenderProps = {    onChange: (event: any) => void;    onBlur: () => void;    value: any;    disabled?: boolean;    name: string;    ref: RefCallBack;};

in addition, they can optionally be passed a fieldDef prop if the component is used in the context of a custom field or configurable operation arg.

The fieldDef arg, when present, has the following shape:

export type ConfigurableArgDef = {    defaultValue: any    description: string | null    label: string | null    list: boolean    name: string    required: boolean    type: string    ui: any}

Signature

type DashboardFormComponentProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = ControllerRenderProps<TFieldValues, TName> & {    fieldDef?: ConfigurableFieldDef;}

@vendure/dashboard Sourcev3.4.0

Metadata which can be defined on a DashboardFormComponent which provides additional information about how the dashboard should render the component.

The metadata is defined by adding the static property on the component:

Example

export const MyCustomInput: DashboardFormComponent = props => {  // implementation omitted}MyCustomInput.metadata = { // [!code highlight]  isListInput: true // [!code highlight]} // [!code highlight]

Signature

type DashboardFormComponentMetadata = {    isListInput?: boolean | 'dynamic';    isFullWidth?: boolean;}

isListInput

propertyboolean | 'dynamic'

Defines whether this form component is designed to handle list inputs. If set to 'dynamic', it means the component has internal logic that can handle both lists and single values.

isFullWidth

propertyboolean

TODO: not currently implemented

@vendure/dashboard Sourcev3.4.0

This is the common type for all custom form components registered for:

custom fields
configurable operation args
detail page fields

Here's a simple example:

import { DashboardFormComponent, Input } from '@vendure/dashboard';const MyComponent: DashboardFormComponent = (props) => {    return <Input value={props.value}                  onChange={props.onChange}                  onBlur={props.onBlur}                  name={props.name}                  disabled={props.disabled}                  ref={props.ref}                  />;};

Signature

type DashboardFormComponent = React.ComponentType<DashboardFormComponentProps> & {    metadata?: DashboardFormComponentMetadata;}