Layout

---

Layout

Layout is a special wrapper UI Component, that can be used to show multiple tables and forms in a grid or layout format.

{
  ...  
  "root": "main",
  "layouts": {
    "main": {
      "direction": "vertical",
      "components": [
        "top",
        "mainTabs"
      ],
      "size": [
        "30",
        "70"
      ]
    },
    "top": {
      "direction": "horizontal",
      "components": [
        "statusPie",
        "ownerBar",
        "originatedLine"
      ]
    }
  },
  ...
}

Layout properties

Prop Name	Description	Data Type	Required	Example
components	An array of components identifiers to layout. A component is a table, form, tab, chart, panel slot, or another layout.	array string	no
direction	horizontal / vertical	string	no
size	Sets the initial relative width (for columns) or height (for rows). Users can still adjust sizes on UI.	array string	no	["70", "30"]
resize	Per-pane flags indicating which splits are user-resizable.	array boolean	no
collapsed	When true, the layout pane starts collapsed (common for form columns inside a panel wrapper).	boolean	no	true
type	When set to panel, declares a collapsible panel slot. The layout key is the panelId used in panel commands. Panels start collapsed and take no space until opened.	string	no	"panel"

Panel slots

A panel is a layout placeholder — not a form. Forms live in the top-level forms map and are mounted dynamically when a panel command is clicked.

• The layout node id (the key under layouts) is the panelId.
• Panels are collapsed by default and do not reserve column space until expanded.
• Toolbar or column-icon commands with type: "panel" open the panel and mount the configured form.
• The form closes the panel on configurable button actions via settings.closePanelOn (see Forms — Panel lifecycle).

"layouts": {
  "mainLayout": {
    "direction": "horizontal",
    "components": ["tablesSide", "assetSidePanel"],
    "size": ["70", "30"]
  },
  "tablesSide": {
    "direction": "vertical",
    "components": ["droppedEditForm", "assets-table"],
    "size": ["50", "50"]
  },
  "assetSidePanel": {
    "type": "panel"
  }
},
"commands": {
  "openCreateForm": {
    "type": "panel",
    "label": "Create Asset",
    "settings": {
      "panelId": "assetSidePanel",
      "formId": "createForm"
    }
  },
  "openEditForm": {
    "type": "panel",
    "label": "Edit Asset",
    "settings": {
      "panelId": "assetSidePanel",
      "formId": "editForm",
      "useSelectedRow": true
    }
  }
}

Forms referenced by formId must be defined under forms but are not listed as children of the panel layout node.