Widget Configuration

Each widget must include a mobro-widget-config.json file. MoBro searches the src/ directory of the widget pack for these files to detect its widgets, so the files can be located anywhere within src/.

In the ModBros widget packs, each widget has its own directory at src/widgets/<widget_name>/, containing the mobro-widget-config.json, the component and all other files of the widget.

caution

Without this file, MoBro doesn't detect the widget, and it doesn't show up in the dashboard builder.

Fields

Field	Type	Restrictions	Description
name	string	Required Pattern: ^[\w-]+$ Unique within the widget pack	The identifier of the widget within the widget pack. Not shown to users.
displayName	string	Required	The name of the widget shown to users in the dashboard builder.
description	string	-	A short description of the widget.
filename	string	Default: widget.tsx	Path to the file containing the widget's React component, relative to this file.
icon	string	Default: icon.svg	Path to the widget's icon, relative to this file. Shown in the dashboard builder. Optional.
config	array	-	The fields users can configure in the dashboard builder.
layout	array	-	How the configurable fields are structured in the dashboard builder.

The file must not contain any other properties. The CLI validates the file against the JSON schema when running and publishing the widget pack.

The component must be the default export of the file referenced by filename. Supported file extensions are .tsx, .ts, .jsx and .js.

caution

Don't change the name of a published widget. Dashboards reference widgets by the name of the widget pack and the name of the widget, so renaming a widget breaks all dashboards using it.

Example

src/widgets/metric-value/mobro-widget-config.json

{
  "name": "metric_value",
  "displayName": "Metric Value",
  "description": "Displays the value of a metric including its unit.",
  "filename": "MetricValue.tsx",
  "icon": "icon.svg",
  "config": [
    {
      "name": "metric",
      "label": "Metric",
      "type": "metric"
    }
  ]
}

JSON Schemas

MoBro serves JSON schemas for both configuration files. With the schemas set up, your IDE suggests all available properties and validates the files while you type.

The schemas are available while MoBro is running:

File	Schema
mobro-widget-pack-config.json	http://localhost:42169/mobro-schema/mobro-widget-pack-config.schema.json
mobro-widget-config.json	http://localhost:42169/mobro-schema/mobro-widget-config.schema.json

JetBrains IDEs (WebStorm, IntelliJ IDEA, …): projects created with dashboard-cli generate already contain the mappings in .idea/jsonSchemas.xml.

Visual Studio Code: add the mappings to the .vscode/settings.json of the project:

.vscode/settings.json

{
  "json.schemas": [
    {
      "fileMatch": ["mobro-widget-pack-config.json"],
      "url": "http://localhost:42169/mobro-schema/mobro-widget-pack-config.schema.json"
    },
    {
      "fileMatch": ["mobro-widget-config.json"],
      "url": "http://localhost:42169/mobro-schema/mobro-widget-config.schema.json"
    }
  ]
}