Array properties

Note: This feature is considered EXPERIMENTAL and may be subject to change or be removed in future releases.

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:

Definition properties

Field	Description
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 a 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.

Note: Customization of properties always starts with items.

define( [
],
( ) => {

  return {
    initialProperties: {
      listItems: []
    },
    definition : {
      type : "items",
      component : "accordion",
      items: {
        settings: {
          uses: "settings",
          items: {
            MyList: {
               "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: {
                   "string",
                  ref: "label",
                  label: "Label",
                  expression: "optional"
                },
                textarea: {
                  label:"My textarea",
                  component: "textarea",
                  maxlength: 100,//you shouldn't write too much
                  ref: "myTextarea"
                }
              }
            }
          }
        }
      }
    },
    paint: ($element) => {
      //add your rendering code here
      $element.html( "props-list" );
    }
  };
} );

This is what it looks like in the property panel Custom array/list object in extension, with Add Item button:

This is what it looks like when an item has been added Custom array/list object in extension, with Add Item button clicked and fields/data entry available: