Skip to main content
API contract 3.4

Box provider

Replaces the container a box schema is rendered with.

Boxes are the layout of a view: tabs, grids, arrays, galleries. Override one when a section needs an arrangement the built-in boxes do not offer — a side-by-side comparison, a custom summary panel above a list.

Signature​

type AdminBoxProvider = (props: {
  resource?: string;
  schema: BoxSchema;
  excludeFields?: string[];
  props: SchemaBoxProps;
}) => ReactElement | undefined | null;

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

Parameters​

NameTypeDescription
resourcestringResource the box belongs to; admin-wide provider only
schemaBoxSchemaThe box; schema.type and schema.name are what you match on
excludeFieldsstring[]Fields already rendered elsewhere and to be skipped here
propsSchemaBoxPropsschema, label, excludeFields and isRequired — spread them into your box

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.

Box types​

defaultBoxProvider handles these values of schema.type:

typeContainer
tabSchemaTabBox — tabbed sections, with the open tab kept in the URL
wizardSchemaWizardBox — stepped form
gridSchemaGridBox — responsive grid
objectSchemaObjectBox — the properties of a nested object
arraySchemaArrayBox — a repeatable list; an array with array.listed renders as SchemaChoicesArrayBox chips instead
listSchemaListBox — an embedded list of a related resource
gallerySchemaGalleryBox — an image carousel
anything elseSchemaSimpleBox — a plain stack of fields; this is where simple lands, and it is also the fallback for an unknown type

tab-item and grid-item never reach the provider on their own — the parent SchemaTabBox / SchemaGridBox consumes its own children.

Example​

<SchemaAdmin
  boxProvider={({schema, props}) => {
    if (schema.name === 'order-summary') {
      return <OrderSummaryBox {...props} />;
    }
  }}
>
  <SchemaResource name="eshop/order" />
</SchemaAdmin>
caution

A custom box has to honour excludeFields, otherwise a field already shown by another box appears twice. Passing props through unchanged is enough — the built-in boxes read it from there.

See also​