From f251f30e71cc107e8a630c47e31c07a61c23b33f Mon Sep 17 00:00:00 2001 From: sc-illiakovalenko Date: Tue, 7 Apr 2020 15:13:36 +0300 Subject: [PATCH 1/2] Doc: move Forms installation section at the start of sample implementation --- docs/data/routes/docs/techniques/forms/en.md | 21 ++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/docs/data/routes/docs/techniques/forms/en.md b/docs/data/routes/docs/techniques/forms/en.md index 126c056ebd..ba41ac8061 100644 --- a/docs/data/routes/docs/techniques/forms/en.md +++ b/docs/data/routes/docs/techniques/forms/en.md @@ -42,6 +42,16 @@ In order to add a form to the JSS app we need a component to render the form. A * Choose the Sitecore Form you created previously as the Associated Content * NOTE: you will see a warning that the component is missing its implementation. This is normal - we haven't yet defined what the form looks like. +### Install NPM packages + +> There are two npm packages for JSS + Forms +> * `sitecore-jss-react-forms` implements components to render forms in React +> * `sitecore-jss-forms` implements framework-agnostic helpers to deal with the forms API (serializing forms to post, antiforgery, etc) +> +> These packages ship with TypeScript typings and JSDoc comments so they are easily discoverable in typings-aware editors such as Code. + +To use the sample forms implementation, install the forms package: `npm i @sitecore-jss/sitecore-jss-react-forms` + ### Implement the Form React component To make the form render as a form, we need to tell React how to render the Sitecore Forms schema. @@ -69,16 +79,7 @@ export default function Form(props) { Sitecore provides a sample implementation of rendering this form data into a usable React form for your reference and modification. The sample implementation provides a native React state-based implementation using controlled form components. It supports client and server side validation and multistep forms. -> There are two npm packages for JSS + Forms -> * `sitecore-jss-react-forms` implements components to render forms in React -> * `sitecore-jss-forms` implements framework-agnostic helpers to deal with the forms API (serializing forms to post, antiforgery, etc) -> -> These packages ship with TypeScript typings and JSDoc comments so they are easily discoverable in typings-aware editors such as Code. - -To use the example React forms implementation: - -* Install the forms package: `npm i @sitecore-jss/sitecore-jss-react-forms` -* Modify your Form component to use the library's form components: +To use the example React forms implementation, modify your Form component to use the library's form components: ```jsx import { Form } from '@sitecore-jss/sitecore-jss-react-forms'; From b8c60b6a42c6bec6265f1fa6915c62638508df27 Mon Sep 17 00:00:00 2001 From: sc-illiakovalenko Date: Tue, 7 Apr 2020 15:20:10 +0300 Subject: [PATCH 2/2] Add installation step --- docs/data/routes/docs/techniques/forms/en.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/data/routes/docs/techniques/forms/en.md b/docs/data/routes/docs/techniques/forms/en.md index ba41ac8061..1ad183fe02 100644 --- a/docs/data/routes/docs/techniques/forms/en.md +++ b/docs/data/routes/docs/techniques/forms/en.md @@ -50,7 +50,9 @@ In order to add a form to the JSS app we need a component to render the form. A > > These packages ship with TypeScript typings and JSDoc comments so they are easily discoverable in typings-aware editors such as Code. -To use the sample forms implementation, install the forms package: `npm i @sitecore-jss/sitecore-jss-react-forms` +To use the sample forms implementation, install the forms packages: +* `npm i @sitecore-jss/sitecore-jss-forms` +* `npm i @sitecore-jss/sitecore-jss-react-forms` ### Implement the Form React component