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