Form view

Request and capture some input from the user. You can send the form data using a GET or POST request.

Parameters

• type: "form"
• fields: An array of FormField objects. By default, each field will be displayed in a separate row. If you want some fields to be displayed in the same row – put them in a nested array, the available space will be evenly split between them. See examples below for more details.
• title: Optional. Title of the form.
• submitLabel: Optional. Text label for the submit button.
• cancelLabel: Optional. Text label for the cancel button.
• method: Optional. "get" or "post" (default). HTTP request method that will be used to submit the form.
• error: Optional. The error message to show for the whole form.

Examples

{
  "view": {
    "type": "form",
    "title": "Order Drink",
    "submitLabel": "Order",
    "fields": [
      {
        "type": "text",
        "id": "name",
        "label": "Your Name"
      },
      {
        "type": "select",
        "id": "drink",
        "label": "Drink",
        "options": [
          "Cappuccino",
          "Latte",
          "Green Tea",
          "Coke"
        ]
      }
    ]
  }
}

{
  "view": {
    "type": "form",
    "fields": [
      [
        {
          "type": "text",
          "id": "firstName",
          "label": "First Name"
        },
        {
          "type": "text",
          "id": "lastName",
          "label": "Last Name"
        },
        {
          "type": "toggle",
          "id": "subscribe",
          "label": "Subscribe to Newsletter"
        }
      ],
      {
        "type": "textarea",
        "id": "notes",
        "label": "Notes"
      }
    ]
  }
}

FormField Objects

There are multiple different form field types that allow you to create sophisticated forms, including:

• TextField
• ToggleField
• SelectField
• DateField

TextField

A plain-text input, similar to the HTML <input/> tag, defines a field where a user can enter free-form data.

Parameters

• type: "text"
• id: ID of the field. Must be unique in the Form view.
• label: Label for the field.
• required: Optional, true or false. Whether this field is required.
• defaultValue: Optional. The initial text value for this field.
• error: Optional. If set, shows an error message under the field.
• helpText: Optional. A Markdown text which will be displayed under the field.
• placeholder: Optional. Placeholder for this field, displayed inside the field in gray.
• multiline: Optional, true or false. Whether the field should be displayed as a large textarea.

{
  "view": {
    "type": "form",
    "fields": [
      {
        "type": "text",
        "id": "name",
        "label": "Name",
        "required": true,
        "defaultValue": "Steve",
        "placeholder": "Tell us your name"
      }
    ]
  }
}

{
  "view": {
    "type": "form",
    "fields": [
      {
        "type": "text",
        "id": "notes",
        "label": "Your Notes",
        "placeholder": "What is on your mind?",
        "multiline": true
      }
    ]
  }
}

ToggleField

Defines a field that allows the user to enable or disable something.

Parameters

• type: "toggle"
• id: ID of the field. Must be unique in the Form View.
• label: Label for the field.
• required: Optional, true or false. Whether this field is required.
• defaultValue: Optional, true or false. The default value for this field.
• error: Optional. If set, shows an error message under the field.
• helpText: Optional. A Markdown text which will be displayed under the field.

{
  "view": {
    "type": "form",
    "fields": [
      {
        "type": "toggle",
        "id": "subscribe",
        "label": "Subscribe to Newsletter",
        "defaultValue": true
      }
    ]
  }
}

SelectField

Defines a field that allows the user to select one or multiple options.

Parameters

• type: "select"
• id: ID of the field. Must be unique in the Form View.
• label: Label for the field.
• options: A list of strings or SelectOption objects that a user can select from.
• required: Optional, true or false. Whether this field is required.
• defaultValue: Optional. Default value for this field. If the field allows selecting multiple values (see multiple), an array of strings can be provided.
• error: Optional. If set, shows an error message under the field.
• helpText: Optional. A Markdown text which will be displayed under the field.
• multiple: Optional, true or false. Whether the field allow selecting single or multiple options.
• placeholder: Optional. Placeholder of the field, shown inside in gray.

SelectionOption Objects

{
  "view": {
    "type": "form",
    "fields": [
      {
        "type": "select",
        "id": "country",
        "label": "Country of Residence",
        "options": [
          "Ukraine",
          "Spain",
          "Germany"
        ]
      }
    ]
  }
}

{
  "view": {
    "type": "form",
    "fields": [
      {
        "type": "select",
        "id": "country",
        "label": "Country of Residence",
        "options": [
          {
            "value": "ukr",
            "label": "Ukraine"
          },
          {
            "value": "s",
            "label": "Spain"
          },
          {
            "value": "g",
            "label": "Germany"
          }
        ]
      }
    ]
  }
}

{
  "view": {
    "type": "form",
    "fields": [
      {
        "type": "select",
        "id": "country",
        "label": "Where do you want to travel to?",
        "multiple": true,
        "placeholder": "Select Countries",
        "options": [
          "Ukraine",
          "Spain",
          "Germany"
        ]
      }
    ]
  }
}

DateField

Defines a field which lets the user easily select a date using a calendar.

Parameters

• type: "date"
• id: ID of the field. Must be unique in the Form View.
• label: Label for the field.
• required: Optional, true or false. Whether this field is required.
• defaultValue: Optional. Default value for this field as a Date string.
• error: Optional. If set, shows an error message under the field.
• helpText: Optional. A Markdown text which will be displayed under the field.
• timeSelect: Optional, true or false (default). Whether the field allows selecting the time too.

{
  "view": {
    "type": "form",
    "title": "When is your birthday?",
    "fields": [
      {
        "type": "date",
        "id": "dateOfBirth",
        "label": "Your Date of Birth"
      }
    ]
  }
}