Configurable Widget Layout

By default, all the configurable fields of a widgets are listed in the dashboard builder in a top to bottom list the way they are defined in the widget config.

With a lot of fields this can become quite long and complex for the user to configure. For this reason it's possible to define an optional layout how these fields should be structured.

Layout Definition

A layout definition is basically a list of either the fields name or layouts. If a field is defined but not referenced by its name in the layout definition, it will be simply listed at the end in the old list manner.

Based on the layout type layouts can be recursively used.

The only thing all layouts share is the type property, same as fields.

Field	Type	Restriction	Description
type	string	Required. Must be a valid layout type.	The type of the layout

Example

This would be an example for the mobro-widget-config.json with three fields, while two are combined in a fieldset.

mobro-wiget-config.json

{
  "name": "my_widget",
  "displayName": "My Widget",
  "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"
      ]
    }
  ]
}