Skip to main content Skip to complementary content

Array property definition

Warning noteEXPERIMENTAL.

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.

Information noteHypercubes 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:  

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

An interface with "Appearance" at the top. There are three hide and show buttons called "General", "Alternate states", and "List Items". Inside the "List Items" show and hide button, there is an "Add item" button.

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

An interface with "Appearance" at the top. There are three hide and show buttons called "General", "Alternate states", and "List Items". Inside the "List Items" show and hide button, there is a "Click me" button. Inside of the "Click me" button section, there are two text fields. The first text field allows you to definte a function, as there is an "fx" button on the right side of the text box. The second text box is labelled as "My textarea", which allows any plain, arbitrary text.

Did this page help you?

If you find any issues with this page or its content – a typo, a missing step, or a technical error – let us know how we can improve!