Array property definition

This API is under development. Do not rely on it. It may change or be removed in future versions.

The array definition property template can be used to add a custom property of array type. When defining a list property, the following fields can be used:

Field Description

This field is mandatory for array types and should always be defined as array.

label Used for defining the label that is displayed in the property panel.

This field should not be used for array types.

ref Name or Id used to reference a property.
itemTitleRef Used for defining the title of the section items.


true adds a button for adding new items.



true adds an Delete button.

addTranslation Used for defining a label of the button used to add new items.


true enables the ability to move the accordion item in the properties panel.

Note: Hypercubes and List objects cannot be added inside array property templates. You must initiate listItems in initialProperties.


Defining a custom array property

Defining a custom property of array type can look like below.


Note: Customization of properties always start with items:.
define( [
function ( ) {

	return {
		initialProperties: {
            listItems: []
		definition : {
			type : "items",
			component : "accordion",
			items: {
				settings: {
					uses: "settings",
					items: {
						MyList: {
							type: "array",
                            ref: "listItems",
                            label: "List Items",
                            itemTitleRef: "label",
                            allowAdd: true,
                            allowRemove: true,
                            addTranslation: "Add Item",
                            items: {
                                button: {
									label:"Click me",
									component: "button",
									action: function(data){
								label: {
									type: "string",
									ref: "label",
									label: "Label",
									expression: "optional"
								textarea: {
									label:"My textarea",
									component: "textarea",
									maxlength: 100,//you shouldn't write too much
									ref: "myTextarea"
		paint: function ($element) {
			//add your rendering code here
			$element.html( "props-list" );

} );

This is what it looks like in the property panel

This is what it looks like when an item has been added

Did this information help you?

Thanks for letting us know. Is there anything you'd like to tell us about this topic?

Can you tell us why it did not help you and how we can improve it?