Configurable Widget Fields

The config array in the mobro-widget-config.json defines the fields users can configure for a widget. The dashboard builder generates a form in its sidebar from these fields, and the widget reads the values using the corresponding field hooks.

Field Types

Type	Input in the dashboard builder	Hook to read the value
string	Text input	useStringField
number	Number input	useNumberField
checkbox	Switch	useCheckboxField
select	Select of predefined options	useSelectField
radio	Radio buttons of predefined options	useSelectField
file	File upload	useFileField, useFilesField
font	Font select	useFontField
metric	Metric select	useMetricField
color	Color picker	useColorField
repeater	List of items, each with its own set of fields	useRepeaterField
action	Action select	useActionField
separator	Labeled separator (deprecated, not a field)	-

Common Properties

All fields share the following properties:

Property	Type	Restrictions	Description
type	string	Required One of the field types above	The type of the field.
name	string	Required Pattern: ^[\w-]+$ Unique within the widget	The identifier of the field, used to read its value.
label	string	-	The label shown in the dashboard builder.
description	string	-	A hint about the field, shown as tooltip in the dashboard builder.
defaultValue	-	Depends on the field type	The value of the field when a widget is added to a dashboard.

Additional properties depending on the field type are described on the page of each field type.

note

The JSON schema also allows a value property on every field. It's used by MoBro internally; don't set it in the mobro-widget-config.json.

Example

A mobro-widget-config.json with two configurable fields:

mobro-widget-config.json

{
  "name": "my_widget",
  "displayName": "My Widget",
  "filename": "MyWidget.tsx",
  "config": [
    {
      "name": "title",
      "label": "Title",
      "type": "string"
    },
    {
      "name": "show_title",
      "label": "Show title",
      "description": "Whether the title is shown above the value",
      "type": "checkbox",
      "defaultValue": true
    }
  ]
}

To structure many fields in the dashboard builder, e.g. using tabs, see Configurable Widget Layout.