Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Forms doc #353

Merged
merged 3 commits into from
Apr 8, 2020
Merged

Forms doc #353

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f251f30
Doc: move Forms installation section at the start of sample implement…
illiakovalenko Apr 7, 2020
b8c60b6
Add installation step
illiakovalenko Apr 7, 2020
5822c5a
Merge branch 'master' into forms-doc
anastasiya29 Apr 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions docs/data/routes/docs/techniques/forms/en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,18 @@ 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 packages:
* `npm i @sitecore-jss/sitecore-jss-forms`
* `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.
Expand Down Expand Up @@ -69,16 +81,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';
Expand Down