The widget configuration mechanism enables you to configure widget elements via a JSON based schema. To add configuration to your widget, add the following files to your directory structure:
widget/ <widget-name>/ config/ config.json locales/ en.json
The configuration resources are stored in locale files within the config directory and are not read from the widget localization resources. The structure of these locale files is identical; please refer to Localize a widget for example resources.
The structure of a sample configuration schema looks like this:
{
"widgetDescriptorName": "QuoteWidget",
"properties": [
{
"id": "quoteText",
"type": "stringType",
"name": "quoteText",
"helpTextResourceId": "quoteTextHelpText",
"labelResourceId": "quoteTextLabel",
"defaultValue": "",
"required": true,
"maxLength": 50,
"minLength": 3,
"pattern": "regex"
},
{
"id": "quoteSource",
"type": "stringType",
"name": "quoteSource",
"helpTextResourceId": "quoteSourceHelpText",
"labelResourceId": "quoteSourceLabel",
"defaultValue": ""
},
{
"id": "quoteStyle",
"type": "booleanType",
"name": "quoteStyle",
"helpTextResourceId": "quoteStyleHelpText",
"labelResourceId": "quoteStyleLabel",
"defaultValue": true
},
{
"id": "quoteSize",
"type": "optionType",
"name": "quoteSize",
"helpTextResourceId": "quoteSizeHelpText",
"labelResourceId": "quoteSizeLabel",
"defaultValue": "medium",
"options": [
{
"id": "quoteSizeSmall",
"value": "small",
"labelResourceId": "quoteSizeSmallLabel"
},
{
"id": "quoteSizeMedium",
"value": "medium",
"labelResourceId": "quoteSizeMediumLabel"
},
{
"id": "quoteSizeLarge",
"value": "large",
"labelResourceId": "quoteSizeLargeLabel"
}
]
}
]
}For each property, the following standard keys are supported:
id - the unique name of the property, which you also use in the HTML template to bind a configurable property.
name – a property name which is meaningful to end users.
type - the data-type stored in the property.
helpTextResourceId - the name of the resource key (in locales) to use to describe the property’s help text.
labelResourceId - the resource key to use to display a label for the property on the widget configuration dialog.
defaultValue - the property’s default value, which must be a valid value for the data-type specified by
type.required - Boolean flag to determine if the config property requires a value.
