Columns · Flowable Forms

Horizontal layout container with flexible columns.

Demo

Basic example

{
  "type": "columns",
  "extraSettings": {
    "sections": [
      {
        "type": "panel",
        "extraSettings": {
          "layoutDefinition": {
            "rows": [
              {
                "cols": [
                  {
                    "type": "text",
                    "label": "Write your name",
                    "value": "{{name}}"
                  }
                ]
              }
            ]
          }
        }
      },
      {
        "type": "panel",
        "extraSettings": {
          "layoutDefinition": {
            "rows": [
              {
                "cols": [
                  {
                    "type": "select",
                    "label": "Select your country",
                    "value": "{{country}}",
                    "extraSettings": {
                      "dataSource": "Static",
                      "identity": "value",
                      "formatItem": "{{$item.text}}",
                      "enableAutocomplete": false,
                      "items": [
                        {
                          "text": "Spain",
                          "value": 1
                        },
                        {
                          "text": "Switzerland",
                          "value": 2
                        },
                        {
                          "text": "Germany",
                          "value": 3
                        }
                      ]
                    }
                  }
                ]
              }
            ]
          }
        }
      },
      {
        "type": "panel",
        "extraSettings": {
          "layoutDefinition": {
            "rows": [
              {
                "cols": [
                  {
                    "type": "radio",
                    "label": "Choose your food",
                    "value": "{{food}}",
                    "extraSettings": {
                      "items": [
                        {
                          "text": "Pizza",
                          "value": 1
                        },
                        {
                          "text": "Pasta",
                          "value": 2
                        },
                        {
                          "text": "Hot dog",
                          "value": 3
                        },
                        {
                          "text": "Burger",
                          "value": 4
                        },
                        {
                          "text": "Paella",
                          "value": 5
                        },
                        {
                          "text": "Soup",
                          "value": 6
                        }
                      ]
                    }
                  }
                ]
              }
            ]
          }
        }
      }
    ]
  }
}

Attributes

Attribute	Type	Description
type	`string`	Type expected is columns

See section Common attributes.

Extra attributes

Attribute	Type	Description
sections	`Object[]`	Array of panel or subform definitions.

Every panel/subform in the array will be contained in a flexible column

When to use it

Use it to handle a flexible number of column containers.
e.g. When any column can disappear in runtime