# Drop down list property definition

Information noteSTABLE.   
  
This API is reliable and breaking changes are unlikely.

## Fields

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:

### type

This field is mandatory and should always be "string" for a drop down list property type definition.

Information noteThe drop down list effect is achieved by defining 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 and function.

Example:

```
options: [{
	value: "v",
	label: "Vertical"
}, {
	value: "h",
	label: "Horizontal"
}],
```

## Examples

### Fetching options from an external resource

Information noteThis 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: function() {
						return $.get("datasource.php").then(function(items){
							return items.map(function(item){
								return {
									value:item.toLowerCase(),
									label:item
								};
							});
						});
					}
```

Information noteOptions 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

Information noteCustomization of properties always start 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

![](https://help.qlik.com/en-US/sense-developer/May2026/Subsystems/APIs/Content/Resources/Images/ex_ExtensionPropertiesCustomDrpdwnProp.png)

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

![An interface titled "MyNewExtension" with the subtitle "Orientation". There is a drop-down menu for the following options: "Vertical" and "Horizontal".](https://help.qlik.com/en-US/sense-developer/May2026/Subsystems/APIs/Content/Resources/Images/ex_ExtensionPropertiesCustomDrpdwnProp2.png)