Form View

Form View allows to request some data from the user. When the form is submitted, the command will receive all values in the respective parameters.

The delivery method depends on the type of your command. For Local Commands, the form data is sent using stdin, and for Cloud Commands, it's sent using a GET or POST request.

Form

Property CommandResponse.view of type Form allows showing a custom form in the Command Bar.

• 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. This is only relevant to Cloud Commands.

• error. Optional. The error message to show for the whole form.

Simple form to order a drink

{
  "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"
        ]
      }
    ]
  }
}

Multiple fields on the same row

{
  "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

Property CommandResponse.view.fields defines an array of fields in the Form View. There are multiple different form field types that allow creating sophisticated forms.

type FormField = 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.

• 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.

Single line text field

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

Large textarea field

{
  "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.

• 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.

Simple toggle field

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

DateField

Defines a field which lets the user easily select a date from a calendar style UI.

• 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.

Simple date field

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

SelectField

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

• 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.

SelectOption

Allows to customize options for SelectField.

• label: Label for the option.

• value: Value of the option.

Select field that allows to pick only one option

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

Select field with custom options

{
  "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"
          }
        ]
      }
    ]
  }
}

Select field that allows to pick multiple options

{
  "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"
        ]
      }
    ]
  }
}