There are a number of data types that are supported for widget settings. To specify the data type for a setting, you set the type key to one of the following values:
stringType: Produces a text entry field that allows the page designer to specify a free form text value.optionType: Produces a drop-down list of preset values. The values are specified using anoptionsarray, shown in the example above.booleanType: Produces a checkbox that allows the property to be enabled or disabled.mediaType: Produces a menu that allows you to select a media item (e.g. Image) from your library, or by uploading a new file.sectionTitleType: Produces a read-only Section Title, defined by thelabelResourceId, and an optional block of descriptive help text, defined by thehelpTextResourceId, to allow you to group widget settings together, for example:{
"id": "quoteWidgetTitle",
"type": "sectionTitleType",
"helpTextResourceId": "quoteWidgetTitle1HelpText",
"labelResourceId": "quoteWidgetTitle1Label"
},collectionType: Produces a picker that allows you to select from the collections defined in your catalog. You define the maximum number of collections that can be chosen using themaxLengthproperty. For example:{
"id": "collectionItem",
"type": "collectionType",
"name": "collectionPickerValue",
"helpTextResourceId": "collectionPickerValueHelpText",
"labelResourceId": "collectionPickerValueLabel",
"maxLength": 5
}multiSelectOptionType: Produces a list of preset values, as doesoptionType; however, you can select multiple values from this list. By default, the control created for this data type is a drop-down list; however, you can add thedisplayAsCheckboxesproperty to the setting definition and set it totrueto display a set of checkboxes instead. For example:{
"id": "paymentMethodTypes",
"type": "multiSelectOptionType",
"name": "paymentMethodTypes",
"required": true,
"helpTextResourceId": "paymentMethodsHelpText",
"labelResourceId": "paymentMethodsLabel",
"defaultValue": "card",
"displayAsCheckboxes": true,
"options": [
{
"id": "card",
"value": "card",
"labelResourceId": "cardLabel"
}
]
}
Depending on the data type it uses, a property will also support a number of data type-specific keys. For the stringType data type, you can add the following keys:
minLength: Minimum length of the string value.maxLength: Maximum length of the string value.pattern: A regex pattern to use for validating the string value.
For the numberType data type, you can add the following keys:
minimum: Minimum value.maximum: Maximum value.
For the optionType and multiSelectOptionType data types, you can add an options key that contains a list of objects that describe the entries in the drop-down list. Each option has the following keys:
id: Unique ID for the option.value: The value of the option.labelResourceId: The resource key used to display the option in the drop-down list.
As previously mentioned, the configurable settings you create are added to the widget’s view model and can be referenced from templates using a data-bind attribute, for example:
<div class="quoteContainer" data-bind="style : {fontSize : quoteSize}">
<!-- ko ifnot : quoteText() == '' -->
<blockquote data-bind="css : {quoted : quoteStyle}">
<p data-bind="text: quoteText"></p>
<!-- ko ifnot : quoteSource() == '' -->
<footer data-bind="text : quoteSource"></footer>
<!-- /ko -->
</blockquote>
<!-- /ko -->
</div>
