Array property definition

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

Fields

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:

type

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.

component

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.

allowAdd

Boolean.

true adds a button for adding new items.

allowRemove

Boolean.

true adds an Delete button.

addTranslation

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

allowMove

Boolean.

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.

Example

Defining a custom array property

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

Example:  

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){
										alert("click!");
									}
								},
								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?