| title | Headless CMS Reference Field |
|---|---|
| description | Learn what is the Headless CMS Reference field |
import { Alert } from "@/components/Alert";
import autocompleteInputSingle from "./assets/reference-autocomplete-input-single.png"; import autocompleteInputMultiple from "./assets/reference-autocomplete-input-multiple.png"; import detailedPreviewSingle from "./assets/reference-detailed-preview-card-single.png"; import detailedMultiple from "./assets/reference-detailed-multiple.png"; import detailedSearch from "./assets/reference-detailed-search.png";
- what is the Headless CMS Reference Fields
- what are the visual types of reference fields
The reference field is a field that allows users to reference other records in the system. Reference field can point to a single model or multiple models, and it can even point to the model in which it is defined.
The Headless CMS application comes with, in time of writing this article, two visual types of reference fields:
- Autocomplete Input - an auto-complete input, allowing selection of a single value or multiple values
- Detailed view with modal search - a preview card of the selected record or records and the user searches through records using a modal window
The API side of the reference field is always the same.
The Autocomplete Input type is a simple UI component that allows users to select a single or multiple references, if field is multiple one, from a list of records in a model which was the field pointed at.
<Image src={autocompleteInputSingle} title={"Single Value Autocomplete Input"} /> <Image src={autocompleteInputMultiple} title={"Multiple Values Autocomplete Input"} />
The Detailed View With Modal Search type is a more complex UI component comprised of:
- a preview card of the selected record or records
- a modal window that allows users to search through records in a model which was the field pointed at
- a modal window to create new referenced record
<Image src={detailedPreviewSingle} title={"Detailed View Preview Card For a Single Record"} />
<Image src={detailedMultiple} title={"Detailed View Preview Card For Multiple Records"} />
<Image src={detailedSearch} title={"Detailed View Search Modal"} />