feat: headless cms reference field

src/docs/5.35.x/headless-cms/fields/reference.mdx

@@ -0,0 +1,51 @@
+---
+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";
+
+<Alert type="success" title="What you'll learn">
+
+- what is the Headless CMS Reference Fields
+- what are the visual types of reference fields
+
+</Alert>
+
+## 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.  
+
+<Image src={autocompleteInputSingle} title={"Single Value Autocomplete Input"} />
+<Image src={autocompleteInputMultiple} title={"Multiple Values Autocomplete Input"} />
+
+## 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
+
+<Image src={detailedPreviewSingle} title={"Detailed View Preview Card For a Single Record"} />
+
+<Image src={detailedMultiple} title={"Detailed View Preview Card For Multiple Records"} />
+### Search Modal
+
+<Image src={detailedSearch} title={"Detailed View Search Modal"} />

src/docs/5.35.x/navigation.js

@@ -1,12 +1,20 @@
 import React from "react";
 import { Navigation as BaseNavigation } from "../5.34.x/navigation";
+import { Collapsable, NavGroup, Page, Section } from "@/docs/utils/navigation";
 
 export const Navigation = () => {
     return (
         <>
             {/* Inherit navigation from 5.34.x. */}
             <BaseNavigation />
             {/* Add new items. */}
+            <NavGroup type={"docs"}>
+                <Collapsable title={"Headless CMS"}>
+                    <Section title={"Fields"}>
+                        <Page link={"headless-cms/fields/reference"} />
+                    </Section>
+                </Collapsable>
+            </NavGroup>
         </>
     );
 };

src/docs/shared/release-notes/5.35.0/changelog.mdx

@@ -6,11 +6,6 @@ description: See what's new in Webiny version 5.35.0.
 
 import { Alert } from "@/components/Alert";
 
-import modalSearch from "./assets/modal-search.png";
-import modelFieldAppearance from "./assets/model-field-appearance.png";
-import referencedItems from "./assets/referenced-items.png";
-import multipleModelReference from "./assets/multiple-model-reference.png";
-import multipleModelReferenceModalDropdown from "./assets/multiple-model-reference-modal-dropdown.png";
 import modelWithDefaultFields from "./assets/model-with-default-fields.png"
 
 ## Lambda Functions
@@ -50,11 +45,8 @@ Because the handler code is deployed before the migration is executed, existing
 We added a new reference field renderer, called "Detailed view with modal search".
 The Detailed renderer is now a default renderer for all the new reference fields, but users can switch to the old one whenever they want to - or from the old one to the new one.
 
-<Image src={modelFieldAppearance} title={"Model Field Appearance Tab"} />
-<Image src={referencedItems} title={"List of referenced Items"} />
-<Image src={modalSearch} title={"Modal Search of References"} />
-<Image src={multipleModelReference} title={"Multiple Model Reference Field"}/>
-<Image src={multipleModelReferenceModalDropdown} title={"Multiple Model Reference Field Model Choice Dropdown"} />
+To find out more about the Detailed Reference Field, please read [this article](/docs/headless-cms/fields/reference#detailed-view-with-modal-search-type).
+
 
 ### Default Model Fields ([#2977](https://github.com/webiny/webiny-js/pull/2977)) ([#2978](https://github.com/webiny/webiny-js/pull/2978))