Skip to main content

Creating a valid Layout

To create a valid Layout object, you need to understand the structure and elements of the Layout class. Below is a detailed documentation of each element of the Layout object.

Layout Object​

A Layout object defines how the fields and components are displayed on the screen. It can contain various types of layouts such as columns, rows, containers, and more.

JSON Example​

{
  "type": "column",
  "children": [
    {
      "type": "component",
      "name": "example-component"
    }
  ]
}

Elements of Layout​

type​

Example:

"type": "column"

children​

  • Type: List of Layout
  • Description: A list of child layouts. Used in list layouts.

Example:

"children": [
  {
    "type": "component",
    "name": "example-component"
  }
]

child​

  • Type: Layout
  • Description: A single child layout. Used in wrappers layouts.

Example:

"child": {
  "type": "component",
  "name": "example-component"
}

visibleIf​

warning

If the condition is false, the layout and his children will not be calculated nor rendered.

  • Type: String
  • Description: Condition to make the layout visible.

Example:

"visibleIf": "true"

name​

  • Type: String
  • Description: Name of the layout. Used to reference the component or the field.

Example:

"name": "example-layout"

options​

  • Type: Options
  • Description: Additional options for the layout. The options are different for each layout type.

Example:

"options": {
  "display": {
    "width": 100,
    "height": 200
  }
}

title​

warning

This one is used only in expanded section layout.

  • Type: Layout
  • Description: Title layout.

Example:

"title": {
  "type": "component",
  "name": "example-title"
}