...

• action - Must be set to message.

• text - Can contain a static text or an i18n key. If not given, the default text will be shown.
  See: TODO

• icon - Must be a code name from the Google Material Icon. If not given, the default icon will be shown. See: https://fonts.google.com/icons .

• color - Defines the color of the icon. If not given, the default icon color will be shown.
  See Colors .

layout

TODOBy default, in a form, all widgets of the Form Schema are displayed vertically, each ints own row.

...

Vertical orientation​

You can change this default by configuring orientation of the layout in the Form Config.

To do so, firstly you need to add the element layout to the form configuration as shown in this example:

{
  "title": "Person",
  "description": "The person form",  
  ...
  
  "layout": {
    "orientation": "vertical",
    "items": [
      {"field": "firstName"},
      {"field": "lastName"},
      {"field": "age"},
      {"field": "gender"}
    ]
  }
}

This example layout configuration would create exactly the default layout again:

...

Horizontal orientation​

You can then change the orientation, width and height of a layout item like this:

{
  "title": "Person",
  "description": "The person form",  
  ...
  
  "layout": {
    "orientation": "horizontal",
    "height": "100",
    "width": "900",
    "items": [
      {"field": "firstName"},
      {"field": "lastName"},
      {"field": "age", "width": "150"},
      {"field": "gender"}
    ]
  }
}

The attributes width and height can be also specified on individual widget fields.

This would result in this form layout afterwards, where all fields are displayed in a single row (horizontally):

...

Width of 900 in horizontal layout item prevents fields to cover all of the available space.

Layout items and fields in horizontal orientation, by default, try to span as much width as possible, but with respect to neighbouring fields - behave responsively.

Both min-width and max-width can be also used in place of width to reach responsiveness within defined limits.

Nesting layouts and orientations​

Layouts and its orientations can be nested in order to create quite complex form structures. Here’s an example:

{
  "title": "Person Form",
  "description": "A simple person form.",  
  ...
  
  "layout": {
    "orientation": "horizontal",
    "items": [
      {
        "orientation": "vertical",
        "items": [
          {"field": "firstName"},
          {"field": "age"}
        ]
      },
      {
        "orientation": "vertical",
        "items": [
          {"field": "lastName"},
          {"field": "gender"}
        ]
      }
    ]
  } 
}

This example would produce a form like this with nested orientation:

...

type

TODO

Internationalization (i18n)

...