Configurable Widget Layout

By default, the dashboard builder lists all configurable fields of a widget from top to bottom, in the order they are defined in the config array. With many fields, this list becomes long and hard to use.

The optional layout array in the mobro-widget-config.json structures the fields using tabs, fieldsets and separators.

Layout Definition

The layout array contains the names of fields and layout elements. Layout elements can contain fields and other layout elements.

Layout element	Description	Contains
fieldset	A group of fields, optionally collapsible	Field names, fieldsets, tabs and separators
tabs	A set of tabs	tab elements only
tab	A single tab within tabs	Field names, fieldsets, tabs and separators
separator	A labeled separator	-

Fields that are not referenced in the layout are listed after the layout.

The config and layout of a repeater field work the same way, for the fields of each repeater item.

Example

A widget with three fields, two of which are grouped in a fieldset:

mobro-widget-config.json

{
  "name": "my_widget",
  "displayName": "My Widget",
  "filename": "MyWidget.tsx",
  "config": [
    {
      "name": "title",
      "label": "Title",
      "type": "string"
    },
    {
      "name": "center_vertically",
      "label": "Center vertically",
      "type": "checkbox"
    },
    {
      "name": "center_horizontally",
      "label": "Center horizontally",
      "type": "checkbox"
    }
  ],
  "layout": [
    "title",
    {
      "type": "fieldset",
      "label": "Alignment",
      "children": [
        "center_vertically",
        "center_horizontally"
      ]
    }
  ]
}