Headless CMS Reference Field

Overview

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.

Autocomplete Input Type

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.

Single Value Autocomplete Input

(click to enlarge)

Multiple Values Autocomplete Input

(click to enlarge)

Detailed View With Modal Search Type

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

Detailed View Preview Card For a Single Record

(click to enlarge)