Custom Native Component Property Types

   MaestroThe UI design product.  |   Form Builder |  All versions This feature is related to all versions.

The custom properties defined in a custom native component's JSON file can have different types (property types). A property's type determines the following:

  • The editor that is displayed to the Form Designer for setting the property
  • The data type that the property’s value will have when accessed from within the native component's code. A property's defaultValue element must also match this data type.

Properties of certain types can have additional settings within the property object. For example, properties of type option must specify a setting for options. This is done to indicate the value choices available to the Form Designer.

The table below identifies several of the property types associated with a native component's JSON file.

Type Editor Value Datatype Additional Settings

text

Text input

string

integer

Number picker with text entry and up and down buttons.

number

min, max – (Optional) restrict the range of the value entered.

boolean

Checkbox

boolean

option

Dropdown List. Maestro shows the list and the form designer selects a value from it. The selected value is stored in the item properties.

string (the chosen option)

options – (Required) an array of values to choose between. These can be strings. If the values are strings, then they can be used for both the text in the editor dropdown and the value assigned to the property. If separate labels and values are needed, the array can contain objects with label and value properties.

list

Selection property editor dialog. Maestro allows the list to be edited by adding and removing entries. The resulting array is stored in the item properties.

array of objects

value – the initial entries of the list as an object array. Each object requires value and label properties. The initial list may be an empty array.

color

Text input

string

url

Text input

string (must be valid URL)

image

Image picker. Uploads and/or selects a resource image.

object with fileName, width, height properties

value – an object with fileName, width and height properties. Image can be referenced in HTML by {{Resource.imagePath(item.properties.image.fileName)}}.