Group

Groups allow you to group elements together to control the visibility settings of multiple elements as a single group.

To use a group, drag and drop elements into it.

Properties

• ID

  Element identifier.
• Mode

  There are 3 modes.

  • Column (Default)

    Elements are stacked vertically.
  • Row

    Elements are placed in a single, horizontal row.
  • Repeater

    Repeater mode is more complex, but it can be thought of as an advanced form of Column.

    It should be used if you need to display a list with a variable number of elements (so you do not know the amount at the time of building the form).

    Repeater mode can receive an array (often during the data initializer callback execution) and display as many rows of components as items in the list.

    For an example, see Repeater example.

• Alignment

  • Gap size

    The spacing between adjacent elements in the group element.

    Note

    This value is added to the spacing settings.

• Background

  • Background color

• Border

  • Border color
  • Border radius

    Curvature of the group border corners.
  • Top border

    Right border

    Bottom border

    Left border
    The line style of the border sections (Default: None).

Repeater example

This form contains a group element with ID users, in Repeater mode. Inside the group element, we place a text component with ID name.

In the preview, it renders nothing:

This is because, by default, the form model is empty, and there’s no array with the key users, which is the key assigned to the group repeater.

Now, if we have the following object:

{"users":
  [
    {
      "name": "John Doe"
    },
    {
      "name": "Jane Doe"
    }
  ]
}

and we map it to the form model, we would display something which looks like we added two texts with Column mode and a text inside.

Note

This is currently not possible to preview, as you need to use callback mapping to accomplish this.