frontend-field-components

Mapping data model fields to frontend UI components in Drumr requires matching each field type—text, numeric, choice, boolean, date, file, or relationship—to the expected JSX component and configuring context-specific props for read or write rendering.

Configuring read and write variants for a Drumr field involves applying context-aware rendering settings, selecting distinct component props for read, write, table, or named-view contexts so records display the correct controls without inventing custom UI elements.

Rendering array or nested fields in Drumr frontend components requires wrapping the field entries in a List component and applying valueMetadata handling to preserve the separation between frontend UI configuration and backend data-model semantics.

A Drumr field renders raw input instead of the expected UI control when the component prop selection is missing or mismatched with the field type, preventing proper labelField and valueMetadata handling required for correct read and write context rendering.

You can use different Drumr components for table views and detail views by applying context-aware rendering configurations that specify distinct component props for table, named-view, and all contexts within your app.registerDataModel or app.registerAction entries.

You should use reference field components in Drumr for relationship linking, while composition field components handle embedded nested structures, with both requiring specific labelField configuration and valueMetadata handling to render correctly across read and write contexts.