Flex Layout · Flowable Forms

Layout container with flexible alignment content in rows/columns.

Demo

Basic example

{
  "type": "flexlayout",
  "extraSettings": {
    "direction": "column",
    "align": "end",
    "justify": "end",
    "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
                        }
                      ]
                    }
                  }
                ]
              }
            ]
          }
        }
      }
    ]
  }
}

Attributes

Attribute	Type	Description
type	`string`	Type expected is flexlayout

See section Common attributes.

Extra attributes

Attribute	Type	Description
sections	`Object[]`	Array of panel or subform definitions.
direction	`string`	Specifies the axis inside container. Accepted values: `row`, `column`.
align	`string`	Specifies how to self-align items. Accepted values: `start`, `end`, `center`, `stretch`.
justify	`string`	Specifies how is distributed the space around. Accepted values: `start`, `end`, `center`, `space-around`, `space-between`.

Every panel/subform in the array will be treated as a flexible item

When to use it

Use it to organize a group of items (components/containers) inside the space of another container.