Array property definition
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.
Example
Defining a custom array property
Defining a custom property of array type can look like below.
Example:
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" );
}
};
} );
