Skip to main content
API contract 3.4

Field provider

Replaces the component that displays a field.

Use it when a value needs a presentation the built-in fields do not have — a stock level shown as a traffic light, a status with a custom badge. To change a form input, use the InputProvider instead.

Signature​

type AdminFieldProvider = (props: {
  resource?: string;
  source: string;
  type: FieldType;
  format?: FieldFormatType;
  isInList?: boolean;
  schema?: FieldSchema;
  locale?: string;
  props: FieldProps;
}) => ReactElement | undefined | null;

The resource-level provider receives the same object without resource.

Parameters​

NameTypeDescription
resourcestringResource the field belongs to; admin-wide provider only
sourcestringField path on the record
typeFieldTypeJSON type from the schema
formatFieldFormatTypeFormat from the schema, when it has one
isInListbooleantrue in a datagrid cell — the place where compact rendering matters
schemaFieldSchemaThe field's full schema, including enum and options
localestringActive admin locale
propsFieldPropsProps Habarico prepared — spread them into your component

Returns​

The element to render, undefined to let the next provider decide, or null to render nothing at all. See how an override is resolved.

Example​

Admin-wide, for one format introduced by the backend:

<SchemaAdmin
  fieldProvider={({format, schema, props}) => {
    if (format === 'stock-level') {
      return <StockLevelField {...props} thresholds={schema?.options} />;
    }
  }}
>
  <SchemaResource name="eshop/product" />
</SchemaAdmin>

Per resource, for a single field:

<SchemaResource
  name="eshop/product"
  fieldProvider={({source, props}) => {
    if (source === 'rating') {
      return <StarsField {...props} />;
    }
  }}
/>
caution

Spread props into your component. It carries the label, the record, the alignment and the empty text that the surrounding layout expects; a component that ignores them renders correctly in isolation and wrongly inside a datagrid.

Default mapping​

When no provider claims a field, defaultFieldProvider decides — its table is on the SchemaField page.

See also​