Skip to main content

Layouts

Layout elements in the UI Schema contain other UI Schema elements like controls or other layouts and serve the purpose of defining the layout of those, e.g. a layout could arrange all its contained UI Schema Elements into a horizontal alignment.

elements​

All layouts need to declare an elements property which contains the children which are to be arranged by the layout. It is expected to be an array of UI Schema elements, e.g. controls or other layouts.

type​

By default, JSON Forms supports four different kinds of layouts: VerticalLayout and HorizontalLayout, a slightly modified version of the vertical layout called Group as well Categorization, which is often used to bundle related data, for instance by means of Tabs. Those four core layouts are detailed in the following.

HorizontalLayout​

API

Horizontal layouts use the HorizontalLayout type and arranges its contained elements in a horizontal fashion. Each child occupies the same amount of space, i.e. for n children a child occupies 1/n space.

{
  "type": "HorizontalLayout",
  "elements": [
    {
      "type": "Control",
      "label": "Name",
      "scope": "#/properties/name"
    },
    {
      "type": "Control",
      "label": "Birth Date",
      "scope": "#/properties/birthDate"
    }
  ]
}
Demo

VerticalLayout​

API

Vertical Layouts use the VerticalLayout type and arranges its elements in a vertical fashion, i.e. all elements are placed beneath each other.

{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "label": "Name",
      "scope": "#/properties/name"
    },
    {
      "type": "Control",
      "label": "Birth Date",
      "scope": "#/properties/birthDate"
    }
  ]
}
Demo

Group​

API

Groups are very similar to VerticalLayouts but feature an additional mandatory label property that is used to describe the elements.

label​

The label property defines an additional string that is used to describe the elements of the Group.

{
  "type": "Group",
  "label": "My Group",
  "elements": [
    {
      "type": "Control",
      "label": "Name",
      "scope": "#/properties/name"
    },
    {
      "type": "Control",
      "label": "Birth Date",
      "scope": "#/properties/birthDate"
    }
  ]
}
Demo

Categorization​

API

Categorization uses the Categorization type and can only contain elements of type Category. A Category itself acts as a container and has an elements of its own as well as a label that describes the contained data. Categorizations are typically used to structure controls with related data, e.g. 'Personal Data' and 'Dietary requirements' as demonstrated in example below.

{
  "type": "Categorization",
  "elements": [
    {
      "type": "Category",
      "label": "Personal Data",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/firstName"
        },
        {
          "type": "Control",
          "scope": "#/properties/lastName"
        },
        {
          "type": "Control",
          "scope": "#/properties/age"
        },
        {
          "type": "Control",
          "scope": "#/properties/height"
        },
        {
          "type": "Control",
          "scope": "#/properties/dateOfBirth"
        }
      ]
    },
    {
      "type": "Category",
      "label": "Dietary requirements",
      "elements": [
        {
          "type": "Control",
          "scope": "#/properties/diet"
        },
        {
          "type": "Control",
          "scope": "allergicToPeanuts"
        }
      ]
    }
  ]
}

In the example above note how each child within the elements is of type Category.

Demo