Skip to main content

FormComponents

DashboardCustomFormComponent​

@vendure/dashboardform-components.ts
v3.4.0

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

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

id​

property
string

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​

property
DashboardFormComponent

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

DashboardCustomFormComponents​

@vendure/dashboardform-components.ts
v3.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​

property
DashboardCustomFormComponent[]

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

DashboardFormComponentProps​

@vendure/dashboardform-engine-types.ts
v3.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;
}

DashboardFormComponentMetadata​

@vendure/dashboardform-engine-types.ts
v3.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 = {
  isListInput: true
}
Signature
type DashboardFormComponentMetadata = {
    isListInput?: boolean | 'dynamic';
    isFullWidth?: boolean;
}

isListInput​

property
boolean | '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​

property
boolean

TODO: not currently implemented

DashboardFormComponent​

@vendure/dashboardform-engine-types.ts
v3.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;
}