Drop-down list properties
The drop-down list definition property template can be used to add a custom property of drop-down list type. When defining a drop-down list property, the following fields can be used:
Definition properties
Field | Description |
---|---|
type | Used for all custom property type definitions. Can be either string , integer , number , array , or boolean .This field is mandatory and should always be string for a drop-down list property type definition.Note: The drop-down list effect is achieved by setting the component field to dropdown ; see below. |
component | Used for defining how the property is visualized in the property panel. Used to override the default component that comes with the type setting. This field is mandatory for a drop-down list property and should always be dropdown . |
label | Used for defining the label that is displayed in the property panel. |
ref | Name or ID used to reference a property. |
defaultValue | Used for defining the default value of your custom property. |
options | Array of options. Can be value , label , or function .Example: options: [{ value: "v", label: "Vertical" }, { value: "h", label: "Horizontal" }], |
Examples
Fetching options from an external resource
Note: This example is using jQuery. Make sure to have jQuery included as a require-dependency.
return { type: "items", component: "accordion", items: { settings: { uses: "settings", items: { MyDropdownProp: { type: "string", component: "dropdown", label: "Data source", ref: "myproperties.datasource", options: () => { return $.get("datasource.php").then((items) => { return items.map((item) => { return { value:item.toLowerCase(), label:item }; }); }); }
Note: Options will be fetched every time a property is changed. It is up to the developer to cache the result from the web service if you want to avoid repeating reloads.
Defining a custom drop down list
Defining a custom property of drop down list type can look like below.
Example: Add custom drop down list property to Appearance accordion
Note: Customization of properties always starts with
items
.
return { type: "items", component: "accordion", items: { settings: { uses: "settings", items: { MyDropdownProp: { type: "string", component: "dropdown", label: "Orientation", ref: "myproperties.orientation", options: [{ value: "v", label: "Vertical" }, { value: "h", label: "Horizontal" }], defaultValue: "v" } } }
This is what it looks like in the property panel

You can also define a new accordion item as a drop down property.
Example: Add custom drop down property as a new accordion item
return { type: "items", component: "accordion", items: { MyAccordion: { type: "string", component: "dropdown", label: "Orientation", ref: "myproperties.orientation", options: [{ value: "v", label: "Vertical" }, { value: "h", label: "Horizontal" }], defaultValue: "v" }
This is what it looks like in the property panel
