diff --git a/src/docs/5.35.x/headless-cms/fields/assets/reference-autocomplete-input-multiple.png b/src/docs/5.35.x/headless-cms/fields/assets/reference-autocomplete-input-multiple.png new file mode 100644 index 000000000..b9b8dbff2 Binary files /dev/null and b/src/docs/5.35.x/headless-cms/fields/assets/reference-autocomplete-input-multiple.png differ diff --git a/src/docs/5.35.x/headless-cms/fields/assets/reference-autocomplete-input-single.png b/src/docs/5.35.x/headless-cms/fields/assets/reference-autocomplete-input-single.png new file mode 100644 index 000000000..18ded6509 Binary files /dev/null and b/src/docs/5.35.x/headless-cms/fields/assets/reference-autocomplete-input-single.png differ diff --git a/src/docs/5.35.x/headless-cms/fields/assets/reference-detailed-multiple.png b/src/docs/5.35.x/headless-cms/fields/assets/reference-detailed-multiple.png new file mode 100644 index 000000000..6df570346 Binary files /dev/null and b/src/docs/5.35.x/headless-cms/fields/assets/reference-detailed-multiple.png differ diff --git a/src/docs/5.35.x/headless-cms/fields/assets/reference-detailed-preview-card-single.png b/src/docs/5.35.x/headless-cms/fields/assets/reference-detailed-preview-card-single.png new file mode 100644 index 000000000..f10bd11e3 Binary files /dev/null and b/src/docs/5.35.x/headless-cms/fields/assets/reference-detailed-preview-card-single.png differ diff --git a/src/docs/5.35.x/headless-cms/fields/assets/reference-detailed-search.png b/src/docs/5.35.x/headless-cms/fields/assets/reference-detailed-search.png new file mode 100644 index 000000000..7694145a2 Binary files /dev/null and b/src/docs/5.35.x/headless-cms/fields/assets/reference-detailed-search.png differ diff --git a/src/docs/5.35.x/headless-cms/fields/assets/reference-detailed-single.png b/src/docs/5.35.x/headless-cms/fields/assets/reference-detailed-single.png new file mode 100644 index 000000000..7e5bba254 Binary files /dev/null and b/src/docs/5.35.x/headless-cms/fields/assets/reference-detailed-single.png differ diff --git a/src/docs/5.35.x/headless-cms/fields/reference.mdx b/src/docs/5.35.x/headless-cms/fields/reference.mdx new file mode 100644 index 000000000..3d7b67576 --- /dev/null +++ b/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"; + + + +- what is the Headless CMS Reference Fields +- what are the visual types of reference fields + + + +## 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. + + + + +## 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 + + + + +### Search Modal + + diff --git a/src/docs/5.35.x/navigation.js b/src/docs/5.35.x/navigation.js index 0889ce5e5..6af7f45ac 100644 --- a/src/docs/5.35.x/navigation.js +++ b/src/docs/5.35.x/navigation.js @@ -1,5 +1,6 @@ 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 ( @@ -7,6 +8,13 @@ export const Navigation = () => { {/* Inherit navigation from 5.34.x. */} {/* Add new items. */} + + +
+ +
+ + ); }; diff --git a/src/docs/shared/release-notes/5.35.0/assets/modal-search.png b/src/docs/shared/release-notes/5.35.0/assets/modal-search.png deleted file mode 100644 index 25ffb71d9..000000000 Binary files a/src/docs/shared/release-notes/5.35.0/assets/modal-search.png and /dev/null differ diff --git a/src/docs/shared/release-notes/5.35.0/assets/model-field-appearance.png b/src/docs/shared/release-notes/5.35.0/assets/model-field-appearance.png deleted file mode 100644 index 7470ab799..000000000 Binary files a/src/docs/shared/release-notes/5.35.0/assets/model-field-appearance.png and /dev/null differ diff --git a/src/docs/shared/release-notes/5.35.0/assets/multiple-model-reference-modal-dropdown.png b/src/docs/shared/release-notes/5.35.0/assets/multiple-model-reference-modal-dropdown.png deleted file mode 100644 index 4ffba64d4..000000000 Binary files a/src/docs/shared/release-notes/5.35.0/assets/multiple-model-reference-modal-dropdown.png and /dev/null differ diff --git a/src/docs/shared/release-notes/5.35.0/assets/multiple-model-reference.png b/src/docs/shared/release-notes/5.35.0/assets/multiple-model-reference.png deleted file mode 100644 index f52784fbe..000000000 Binary files a/src/docs/shared/release-notes/5.35.0/assets/multiple-model-reference.png and /dev/null differ diff --git a/src/docs/shared/release-notes/5.35.0/assets/referenced-items.png b/src/docs/shared/release-notes/5.35.0/assets/referenced-items.png deleted file mode 100644 index 7769efd82..000000000 Binary files a/src/docs/shared/release-notes/5.35.0/assets/referenced-items.png and /dev/null differ diff --git a/src/docs/shared/release-notes/5.35.0/changelog.mdx b/src/docs/shared/release-notes/5.35.0/changelog.mdx index e87f96df2..b6add639c 100644 --- a/src/docs/shared/release-notes/5.35.0/changelog.mdx +++ b/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. - - - - - +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))