Component schema
Description of the component plugin schema
Schema JSON changes in development
Changes saved to the schema.json file are not hot reloaded. The app builder must be refreshed.
Provides a number of attributes that determine the available options in the settings panel and how the component is displayed in the component tree.
Required fields are marked by an asterisk.
| Property | Type | Description |
|---|---|---|
| name* | string | A unique name for your component. |
| friendlyName* | string | The name that is displayed in the app builder. |
| icon* | string | The name of the icon that is shown in the component tree. A full list of the available icons can be found here. Simply remove any spaces from the names, e.g. DeviceLaptop |
| settings* | array | The list of additional settings beyond the defaults. |
| context | array | A list of data bindings that are provided by the component. |
| styles | array | Shorthand for adding settings for styling. Includes: "margin", "padding", "size", "background", "border" |
| hasChildren | boolean | Determines if the component can be a container for other components or not. |
| showSettingsBar | boolean | Determines if the preview settings bar will float above a selected component. |
| info | string | An optional info message to display at the bottom of the component settings in the builder. |
Component schema examples
If you'd like to see some real examples of how components are configured, you can view the component schemas for each of Budibase's core components here.
Settings
The settings array defines which settings are rendered inside the builder for this component. If a settings object contains "section": true then it is expected to be a section with its own array of settings.
Required fields are marked by an asterisk.
| Property | Type | Description |
|---|---|---|
| type* | string | The type of the setting. A full list of setting types can be found in the componentMap |
| key* | string | A unique identifier for the setting |
| label* | string | The label to show in the builder for this setting |
| dependsOn | string | DependsOn | Specifies another setting which this one depends on. This setting will not be shown unless the other setting exists. If a string value is provided, a single setting key is expected. If an object, setting and value keys are expected, which will check against a specific value. |
| defaultValue | any | The default value for this setting for newly created components |
| options | array | A list of options for settings of type select |
| min | number | The minimum value of the setting |
| max | number | The maximum value of the setting |
| showInBar | boolean | Whether to show this setting in the preview settings bar, if enabled for this component |
| barStyle | BarStyle | The style of bar component to show for this setting |
| placeholder | string | The placeholder value to be passed to the rendered settings component |
| section | boolean | Indicates if a settings section is being defined Sections cannot be nested within another section |
| name [section only] | string | The name of the section |
Depends on
If a string value is provided, then the setting will only show if the specified field is present, i.e. not null, undefined, empty, false or 0.
Alternatively an object can be provided with the following properties. Required fields marked by an asterisk.
| Key | Type | Description |
|---|---|---|
| setting* | string | The name of the setting to depend on |
| value* | any | The value the 'depends on' setting must be for this setting to present |
| invert | boolean | If true, the 'depends on' setting must NOT match the specified value |
Select options
If a setting is of type select, then an options array must also be specified to control which options are available for the setting. The options passed in must have the following structure:
| Key | Type | Description |
|---|---|---|
| label | string | The readable label shown for this option |
| value | any | The option value |
| barIcon | string | If showing this setting in the settings bar and using a bar type of buttons, this key defines which spectrum icon to render in the bar A full list of the available icons can be found here. Simply remove any spaces from the names, e.g. DeviceLaptop |
| barTitle | string | If showing this setting in the settings bar and using a bar type of buttons, this key defines the title text to be shown when hovering over the icon |
Enumerations
A general table of the enumerated values that can be used throughout the component schema. Each enumeration value is comma separated and case sensitive.
| Name | Values |
|---|---|
| BarStyle | buttons, picker |
Updated about 1 year ago