Group

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

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

There are 3 group modes.

• -

  Default. Elements are stacked vertically.
• Row

  Elements are placed in a horizontal row.

  Note

  Currently, the preview for a row group mode shows no padding between elements. However, in production, padding will be added. This is a known bug in the preview.

• Repeater

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

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

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

Repeater example

This form contains a group element with ID users, in Repeater mode.

Inside the group element, there’s a text component with ID name.

In the preview, it will render nothing:

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

However, if we assign this object to the form’s model:

Note

This is currently not possible to do in the preview.

You would need to use callback mapping to accomplish this.

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

We would display something which looks like we added two groups with Row mode and a text inside.