Skip to main content
Demo

​
JSON Schema

Form block uses JSON Schema to build your very own form. You will find more informations about Schema Form here.

​
Minimal usage

# Page/Block
- slug: Form
  schema:
    type: object
    properties:
      foo:
        type: string
Displays a form with a single input which will do nothing without setting at least onSubmit or onChange: 
# Page/Block
- slug: Form
  schema:
    type: object
    properties:
      foo:
        type: string
  onSubmit: save form
This will emit a save form event with all form values as payload. You also can set a custom payload: 
# Page/Block
- slug: Form
  schema:
    type: object
    properties:
      foo:
        type: string
  onSubmit:
    event: save form
    payload:
      id: 1234
Static payload will me merged with form values. This event will be fired when form will be submitted, so when user type Enter or click on Submit button. But you can do the same on each user keypress with onChange. Be warned it can consume many resources, so don’t use this option everywhere: 
# Page/Block
- slug: Form
  schema:
    type: object
    properties:
      foo:
        type: string
  onChange:
    event: save form
    payload:
      id: 1234
There is a third event which fire when a field is blur. It’s onBlur: 
# Page/Block
- slug: Form
  schema:
    type: object
    properties:
      foo:
        type: string
  onBlur:
    event: save form
    payload:
      id: 1234
And finally, you can set initial values to your form with the values attribute. The content should be fetch from an update event indead: 
# Page/Block
- slug: Form
  values:
    foo: bar
  schema:
    type: object
    properties:
      foo:
        type: string
  onSubmit: save form

​
Advanced usage

Here’s a list of advanced parameters you can set on your form: submitLabel changes the default submit label by a localized string of your choice: 
# Page/Block
- slug: Form
  submitLabel:
    fr: Enregistrer les modifications
    en: Save changes
hideSubmit will hide the submit button. Form can be submitted with Enter key or on change and on blur. 
# Page/Block
- slug: Form
  hideSubmit: true
disableSubmit disable the submit button and disable the form to be submitted. In case an interaction with another part of the page needs to block the form. 
# Page/Block
- slug: Form
  disableSubmit: '{{disableSubmit}}' # where disableSubmit is set as a boolean
autoFocus automatically focus the first field of the form when it appears on screen. 
# Page/Block
- slug: Form
  autoFocus: true
buttons describe an array of custom buttons. They take each an event name and their payload will be merged with form values. 
# Page/Block
- slug: Form
  buttons:
    - type: event
      value: save form
      payload:
        email: true
      text: Save and send email
    - type: event
      value: save form
      text: Save
loading display a loading spinner in the submit button. Useless while the form has been submitted but the process takes time on backend side: 
# Page/Block
- slug: Form
  onSubmit: submit form
  updateOn: update form
  loading: '{{formIsLoading}}'

# Automation
- emit:
    event: update form
    payload:
      formIsLoading: true
- do something during some terribly long seconds:
    foo: '{{payload.foo}}
- emit:
    event: update form
    payload:
      formIsLoading: false
resetOn is an event name to reset the form from backend. Just emit the event set and all values will reset. 
# Page/Block
- slug: Form
  onSubmit: submit form
  resetOn: reset form

# Automation
- emit:
    event: reset form
disableStretchContent makes objects fields groups static. By default they are collaspables. 
# Page/Block
- slug: Form
  disableStretchContent: true
collapsed makes all objects fields groups opened by default. 
# Page/Block
- slug: Form
  collapsed: true