Information input components

This article describes components in Components Library > Information Input.

Cascader Select

The Cascader Select component provides a cascading dropdown for selecting values from a hierarchical dataset. It supports searching, multiple selection, and configurable trigger behaviour. In the App Designer, select this component on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Cascader Select.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Label	i18n setter	-	Sets a label displayed alongside the component. Supports internationalisation.
Size	Radio group (Small | Medium | Large)	Medium	Sets the overall size of the component.
Placeholder	i18n setter	Please select	Sets the placeholder text shown when no value is selected. Supports internationalisation.
Default value	Switch Setter (Array setter / i18n setter / Variable input)	-	Sets the initial selected value for uncontrolled usage. Supports internationalisation.
Value	Switch Setter (Array setter/ i18n setter / Variable input)	-	Sets the current selected value for controlled usage. Supports internationalisation.
Datasource	Switch Setter (JSON setter / MasterCode setter / Variable input)	-	Defines the hierarchical data for the cascading options.
Disabled	Toggle switch	Off	Controls whether the component is in a disabled state, preventing user interaction.
Show arrow	Toggle switch	On	Controls whether the dropdown arrow indicator is displayed.
Show border	Toggle switch	On	Controls whether the component has a visible border.
Allow clearing	Toggle switch	Off	When enabled, displays a clear button to remove the current selection.
Read only	Toggle switch	Off	When enabled, prevents the user from changing the selection while still displaying it.
Allow multiple select	Toggle switch	Off	When enabled, allows the user to select multiple values.
Allow searching	Toggle switch	Off	When enabled, displays a search input for filtering options.
Preview mode	Toggle switch	Off	When enabled, the component switches from an interactive dropdown to a read-only preview state. Instead of the Cascader Select, the selected values are displayed as static text (labels separated by commas). Users cannot open the dropdown or change selections while this mode is active. This applies to both single and multiple selection modes.
Trigger type	Radio group (Click | Hover)	Click	Specifies whether the dropdown opens on click or on hover.
Empty value content	Switch Setter (i18n setter / Slot setter / Variable input)	No options	Sets the text displayed when no options match. Supports internationalisation.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Cascader Select without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Cascader Select's supported events:

   • onChange — Triggered when the selected value changes
   • onExpand — Triggered when a cascading panel is expanded
   • onVisibleChange — Triggered when the dropdown visibility changes

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the selected value:

onChange(value) {
  // value: the newly selected value
}

The onExpand handler receives the expanded value:

onExpand(value) {
  // value: the value of the expanded node
}

The onVisibleChange handler receives the new visibility state:

onVisibleChange(visible) {
  // visible: true when the dropdown opens, false when it closes
}

Advanced

For more information, refer to Advanced.

Cascader

The Cascader component displays an inline cascading panel set for selecting values from a multi-level data hierarchy. In the App Designer, select a Cascader on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Cascader.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Datasource	Switch Setter (JSON setter / MasterCode setter / Variable input)	-	Defines the hierarchical data for the cascading panels.
Trigger type	Radio group (Click | Hover)	Click	Specifies whether child panels expand on click or on hover.
Virtual scrolling	Toggle switch	Off	When enabled, uses virtual rendering for large datasets to improve performance. This needs to be used in conjunction with the width setting in List Style.
List style	JSON setter	-	Sets custom CSS style properties for the dropdown panels.
Allow multiple select	Toggle switch	Off	When enabled, allows the user to select multiple leaf-node values.
Can only select leaf node	Toggle switch	Off	When enabled, restricts selection to leaf nodes only.
Can only check leaf node	Toggle switch	Off	When enabled, restricts checkbox selection to leaf nodes only.
Check strictly	Toggle switch	Off	When enabled, checking a parent node does not automatically check or uncheck its children.
Allow load data	Toggle switch	Off	When enabled, allows dynamic loading of child nodes on demand.
Load data asynchronously	Function Binding	-	Defines a function to load child nodes asynchronously. Only visible when Allow load data is enabled.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Cascader without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Cascader's supported events:

   • onChange — Triggered when the selected value changes
   • onSelect — Triggered when a node is selected
   • onExpand — Triggered when a node is expanded to reveal its children
   • onBlur — Triggered when the component loses focus

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the selected value and data item:

onChange(value, data) {
  // value: the selected value path array
  // data: the selected data item
}

The onSelect and onExpand handlers receive the selected or expanded value:

onSelect(value, data) { }
onExpand(value) { }

The onBlur handler receives the blur event:

onBlur(event) { }

Advanced

For more information, refer to Advanced.

Checkbox

The Checkbox component is a single selectable toggle that allows the user to independently check or uncheck a value. It supports a half-selected (indeterminate) state and externally controlled selection. In the App Designer, select a Checkbox on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Checkbox.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Title	i18n setter	Check Option	Sets the label text displayed next to the checkbox. Supports internationalisation.
Half selected state	Toggle switch	Off	When enabled, renders the checkbox in an indeterminate (half-selected) state.
Disabled	Toggle switch	Off	Controls whether the checkbox is in a disabled state, preventing user interaction.
External control selected	Toggle switch	Off	When enabled, the checked state is controlled externally via the Selected status property.
Selected status	Toggle switch	-	Sets the checked state of the checkbox. Only visible when External control selected is enabled.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Checkbox without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Checkbox's supported events:

   • onChange — Triggered when the checked state changes
   • onMouseEnter — Triggered when the pointer enters the checkbox area
   • onMouseLeave — Triggered when the pointer leaves the checkbox area

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the new checked state:

onChange(checked) {
  // checked: true when checked, false when unchecked
}

The onMouseEnter and onMouseLeave handlers receive the corresponding DOM event:

onMouseEnter(event) { }
onMouseLeave(event) { }

Advanced

For more information, refer to Advanced.

Checkbox Group

The Checkbox Group component renders a set of related checkboxes that share a value array. It supports horizontal or vertical alignment, a datasource for option generation, and both controlled and uncontrolled value modes. In the App Designer, select a Checkbox Group on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Checkbox Group.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Change component type	Dropdown (Input | TextArea | Select | Upload | Number Input | DatePicker | Password Input | Checkbox Group | Radio Group)	Checkbox Group	Switches the component to a different input type. The current component is replaced with the selected type.
Disabled	Toggle switch	Off	Controls whether all checkboxes in the group are in a disabled state.
Alignment	Radio group (Horizontal | Vertical)	-	Sets the layout direction of the checkbox items.
Preview mode	Toggle switch	Off	When enabled, renders the checkbox group in a read-only preview state.
Default value	JSON setter	-	Sets the initially selected values for uncontrolled usage.
Value	JSON setter	-	Sets the current selected values for controlled usage.
Option	Switch Setter (MasterCode setter / Array setter / Variable input)	Auto-generated	Defines the list of checkbox options. See Option item configuration.

Option item configuration

Each option in the Option array editor has the following properties:

Property	UI Control	Default	Description
Label	i18n setter	Auto-generated	Sets the display text of the checkbox option. Supports internationalisation.
Value	Text input	Auto-generated	Sets the value associated with the checkbox option.
Disabled	Toggle switch	Off	Controls whether the individual checkbox option is in a disabled state.

You can click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove an option, or use the grip icon to reorder options. Click "Add an item +" to add a new option.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Checkbox Group without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Checkbox Group's supported events:

   • onChange — Triggered when the selected values change

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the new array of selected values:

onChange(value) {
  // value: array of currently selected values
}

Advanced

For more information, refer to Advanced.

DatePicker

The DatePicker component provides a date selection field with a calendar popup. It supports configurable date formats, validation states, optional time selection, and selectable date disabling. In the App Designer, select a DatePicker on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the DatePicker.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Change component type	Dropdown (Input | TextArea | Select | Upload | Number Input | DatePicker | Password Input | Checkbox Group | Radio Group)	DatePicker	Switches the component to a different input type. The current component is replaced with the selected type.
Label	i18n setter	-	Sets a label displayed alongside the date picker. Supports internationalisation.
State	Radio group (Success | Loading | Error)	-	Sets the validation state of the component, applying a corresponding visual indicator.
Placeholder	i18n setter	Select date	Sets the placeholder text shown when no date is selected. Supports internationalisation.
Date value	Date setter	-	Sets the current selected date for controlled usage.
Default value	Date setter	-	Sets the initial selected date for uncontrolled usage.
Date format	Text input	YYYY-MM-DD	Sets the display format for the selected date.
Date output format	Text input	-	Sets the format of the date value returned by the component.
Size	Radio group (Small | Medium | Large)	Medium	Sets the overall size of the date picker.
Disabled	Toggle switch	Off	Controls whether the date picker is in a disabled state.
Disabled date	Function Binding	-	Defines a function to disable specific dates in the calendar. Refer to Disabled date function.
Show time	Toggle switch	Off	When enabled, adds a time selector to the date picker and reveals the Time settings subsection. Part of the Time configuration collapsible section.
Allow clearing	Toggle switch	Off	When enabled, displays a clear button to remove the selected date. Part of the Time configuration collapsible section.
Auto open	Toggle switch	Off	When enabled, the calendar popup opens automatically when the component mounts. Part of the Time configuration collapsible section.

Time settings

When the Show time toggle is switched on, a Time settings subsection appears with the following properties:

Property	UI Control	Default	Description
Time format	Dropdown (HH:mm:ss | HH:mm | HH:ss | mm:ss | HH | mm | ss)	HH:mm:ss	Sets the display format of the time selector.
Time default value	Time setter	-	Sets the default time value in the time selector.
Time hour step	Number input	-	Sets the interval between selectable hour values.
Time minute step	Number input	-	Sets the interval between selectable minute values.
Time seconds step	Number input	-	Sets the interval between selectable second values.

Disabled date function

The Disabled date function accepts the following signature:

disabledDate(date, mode) {
  return false;
}

Return true to disable a specific date.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the DatePicker without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the DatePicker's supported events:

   • onChange — Triggered when the selected date changes
   • onOk — Triggered when the user confirms the selection

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the selected date value:

onChange(value) {
  // value: the selected date as a Dayjs object or string
}

The onOk handler receives the confirmed date value:

onOk(value) {
  // value: the confirmed date
}

Advanced

For more information, refer to Advanced.

RangePicker

The RangePicker component provides a pair of date fields for selecting a start and end date. It supports configurable date formats, date type granularity (date, month, or year), optional time selection, and selectable date disabling. In the App Designer, select a RangePicker on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the RangePicker.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Default value	Switch Setter (Object setter / Variable input)	-	Sets the initial start and end dates for uncontrolled usage. Each field uses a date setter.
Start time	Date setter	-	Sets the initial start date within the Default value object.
End time	Date setter	-	Sets the initial end date within the Default value object.
Date output format	Text input	-	Sets the format of the date values returned by the component.
Date type	Radio group (Date | Month | Year)	Date	Sets the granularity of date selection.
Label	i18n setter	-	Sets a label displayed alongside the range picker. Supports internationalisation.
Size	Radio group (Small | Medium | Large)	Medium	Sets the overall size of the range picker.
Disabled	Toggle switch	Off	Controls whether the range picker is in a disabled state.
Disabled date	Function Binding	-	Defines a function to disable specific dates in the calendars. Refer to Disabled date function.
Allow clearing	Toggle switch	Off	When enabled, displays a clear button to remove the selected date range.
Auto open	Toggle switch	Off	When enabled, the calendar popup opens automatically when the component mounts.
Show time	Toggle switch	Off	When enabled, adds time selectors to both date fields and reveals the Time settings subsection.

Time settings

When the Show time toggle is switched on, a Time settings subsection appears. The available properties are the same as those time settings under DatePicker.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the RangePicker without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the RangePicker's supported events:

   • onChange — Triggered when the selected date range changes
   • onOk — Triggered when the user confirms the selection
   • onVisibleMonthChange — Triggered when the visible calendar month changes
   • onVisibleChange — Triggered when the calendar popup visibility changes

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the formatted date strings and date objects:

onChange(value) {
  // value: array of [startDate, endDate]
}

The onOk handler receives the confirmed values:

onOk(value) {
  // value: array of confirmed [startDate, endDate]
}

The onVisibleMonthChange and onVisibleChange handlers each receive the relevant value:

onVisibleMonthChange(value, reason) { }
onVisibleChange(visible) { }

Advanced

For more information, refer to Advanced.

Download

The Download component renders a button that triggers a file download when clicked. It supports optional confirmation prompts before the download is initiated. In the App Designer, select a Download on the canvas to configure it through three tab pages in the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Download.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
URL	Text input	-	Sets the URL of the file to download.
File name	Text input	-	Sets the name of the downloaded file.
Icon	Icon selector	-	Sets an icon displayed on the download button.
Label	i18n setter	Download	Sets the text displayed on the download button. Supports internationalisation.
Text	Toggle switch	Off	When enabled, renders the button as a text-only button with no border or background.
Enable confirmation	Toggle switch	Off	When enabled, displays a confirmation dialogue before triggering the download.
Confirmation title	i18n setter	Confirm	Sets the title of the confirmation dialogue. Only visible when Enable confirmation is enabled. Supports internationalisation.
Confirmation content	i18n setter	Are you sure you want to export?	Sets the body text of the confirmation dialogue. Only visible when Enable confirmation is enabled. Supports internationalisation.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

Form Template

The Form Template component is a container for form fields. It manages field layout, value binding, form submission, and validation. In the App Designer, select a Form Template on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the structural and behavioural properties of the Form Template.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Inline	Toggle switch	Off	When enabled, renders form fields in a horizontal inline layout.
Full width	Toggle switch	Off	When enabled, makes the form occupy the full width of its container.
Preview mode	Toggle switch	Off	When enabled, renders all child form fields in read-only preview mode.
Action	Text input	-	Sets the form action URL, equivalent to the HTML action attribute.
Method	Dropdown (Get | Post)	-	Sets the HTTP method used when the form is submitted.
Field	Expression	-	Binds an external Field instance for programmatic form control.
Value	JSON setter	-	Sets the current values of the form fields as a key-value object.
Size	Radio group (Large | Medium | Small)	Medium	Sets the size inherited by all child form components.
Alignment	Radio group (Top | Inset | Left)	Left	Sets the position of labels relative to their input fields.
Text alignment	Radio group (Right | Left)	-	Sets the horizontal alignment of label text.
preventDefault	Toggle switch	Off	When enabled, prevents the default browser form submission behaviour.
Responsive	Toggle switch	Off	When enabled, the form layout adapts to the available container width. Part of the Layout collapsible section.
Label column	Switch Setter (Object setter / Variable input)	{"span":4,"offset":0}	Sets the label column width. In Object setter mode, configures grid span and offset values, where each sub-field supports variable binding. In Variable input mode, accepts a bound expression. Part of the Layout collapsible section.
Wrapper column	Switch Setter (Object setter / Variable input)	{"span":14,"offset":0}	Sets the input wrapper column width. In Object setter mode, configures grid span and offset values, where each sub-field supports variable binding. In Variable input mode, accepts a bound expression. Part of the Layout collapsible section.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Form Template without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Form Template's supported events:

   • saveField — Triggered when the form mounts, providing access to the Field instance
   • onChange — Triggered when any form field value changes
   • onSubmit — Triggered when the form is submitted

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The saveField handler receives the Field instance:

saveField(field) {
  // field: the Field instance for programmatic access to form values and validation
}

The onChange handler receives the updated values and the changed field descriptor:

onChange(value, item) {
  // value: the updated form values object
  // item: the changed field descriptor
}

The onSubmit handler receives the submit event:

onSubmit(event) {
  // Handle form submission
}

Advanced

For more information, refer to Advanced.

Form Item

The Form Item component wraps a single form field, providing the field label, validation rules, layout control, and an optional tooltip. It supports comprehensive validation including mandatory fields, value ranges, string lengths, format patterns, and custom logic. In the App Designer, select a Form Item on the canvas to configure it through three tab pages in the Settings panel: Props, Styles, and Advanced.

Props

The Props tab contains the structural and validation properties of the Form Item.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Label	i18n setter	Form Item:	Sets the label text displayed alongside the form field. Supports internationalisation.
Help info	i18n setter	-	Sets additional hint text displayed below the form field. If not set, hint text is generated automatically from validation rules. Supports internationalisation.
Extra info	i18n setter	-	Sets supplementary text displayed below the field and help text. Supports internationalisation.
Value name	i18n setter	-	Sets the prop name used to read the value from the child element. Supports internationalisation.
Trigger	i18n setter	-	Sets the event name that triggers validation on the child element. Supports internationalisation.
Validation state	Radio group (Error | Success | Loading | Warning | Default)	-	Manually sets the validation state. If not set, the state is derived automatically from validation rules.
Has feedback	Toggle switch	Off	When enabled, displays success or loading state icons alongside the field.
Size	Radio group (Small | Medium | Large)	-	Sets the size applied to the child form component. Also propagates to child components when changed.
Label position	Radio group (Top | Left | Inset)	Left	Sets the position of the label relative to the input field.
Label alignment	Radio group (Left | Right)	Left	Sets the horizontal alignment of the label text.
Full width	Toggle switch	Off	When enabled, the child form component stretches to 100% of the Form Item width.
Preview mode	Toggle switch	Off	When enabled, renders the child component in read-only preview mode.
Auto validate	Toggle switch	Off	When enabled, validation is triggered automatically whenever the field value changes.
Have tooltip	Toggle switch	Off	When enabled, displays a tooltip icon next to the label and reveals the Tooltip subsection.

Tooltip

When the Have tooltip toggle is switched on, a Tooltip subsection appears with the following properties:

Property	UI Control	Default	Description
Icon	Icon selector	iconic_error2	Sets the icon displayed in the tooltip.
Icon size	Dropdown (XXS | XS | Small | Medium | Large | XL | XXL | XXXL | Inherit)	Small	Sets the size of the tooltip icon.
Value	i18n setter	-	Sets the text content of the tooltip. Supports internationalisation.
Placement	Dropdown (Top | Right | Bottom | Left | Top-left | Top-right | Bottom-left | Bottom-right | ...)	-	Sets the position of the tooltip popup relative to the icon.
Trigger type	Radio group (Hover | Click)	-	Sets whether the tooltip appears on hover or click.
Follow trigger	Toggle switch	On	When enabled, the tooltip popup follows the trigger element on scroll.

Validation

For more information on the Validation collapsible section, refer to Validation section.

Layout

The Layout collapsible section configures column span within a responsive grid:

Property	UI Control	Default	Description
Col span	Number input	12	Sets how many grid columns this Form Item occupies.
Label column	Switch Setter (Object setter / Variable input)	{"span":4,"offset":0}	Sets the label column layout within this Form Item. When using the Object setter, the Span and Offset sub-properties are displayed as number inputs. When using Variable input, you can bind the entire label column configuration to a variable.
Wrapper column	Switch Setter (Object setter / Variable input)	{"span":14,"offset":0}	Sets the input wrapper column layout within this Form Item. When using the Object setter, the Span and Offset sub-properties are displayed as number inputs. When using Variable input, you can bind the entire wrapper column configuration to a variable.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Advanced

For more information, refer to Advanced.

Submit button

The Submit button is a form-specific variant of the Button component, designed to submit and validate form data. It is typically placed inside a Form.Item within a Form. In the App Designer, select a Submit button on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the main visual and behavioural properties of the Submit button.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Disabled	Toggle switch	Off	Controls whether the button is in a disabled state, preventing user interaction.
Icon	Icon selector	-	Sets an icon for the button. Click the selector to browse and choose an icon from the icon library. Click the clear (X) button to remove the selected icon.
Icon position	Radio group (Left | Right)	-	Controls the position of the icon relative to the button text.
Label	i18n setter	Submit	Sets the text displayed on the button. Supports internationalisation.
Type	Dropdown (Primary | Secondary | Normal)	Primary	Determines the button's visual style and hierarchy.
Size	Radio group (Small | Medium | Large)	Medium	Controls the overall size of this button. When it is used in a form, this property does not appear; meanwhile, it will follow the form size.
Icon size	Dropdown (XXS | XS | Small | Medium | Large | XL | XXL | XXXL)	-	Controls the size of the icon displayed in the button.
Theme	Dropdown (Ghost | Normal | Light | Dark)	Normal	Sets the visual theme of the button. Ghost creates a transparent outline style. Light and Dark are ghost variants for different backgrounds.
Validate	Toggle switch	On	When turned on, clicking the button triggers form field validation before executing the onClick handler. The handler then receives (value, errors, field) instead of just the click event.
Loading	Toggle switch	Off	Shows a loading spinner and disables user interaction while an operation is in progress.
Text	Toggle switch	Off	Renders the button as a text-only button with no border or background.
Warning	Toggle switch	Off	Applies warning styling (typically red) to indicate a destructive or cautious action.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element (e.g., Form_Submit61). Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. When the button is inside a Form.Item, the name is inherited from the parent. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Submit button. The available component native events are onMouseUp and onClick. Refer to Button Events for the general event binding workflow.

The onMouseUp handler receives the form field values:

onMouseUp(value) {
  console.log(value)
}

When Validate is enabled, the onClick handler signature changes to receive form data:

onClick(value, errors, field) {
  // value: form field values
  // errors: validation error object (null if no errors)
  // field: the form field instance
}

When Validate is disabled, the onClick handler receives the standard click event:

onClick(event) {
  // Handle button click
}

Advanced

For more information, refer to Advanced.

Reset button

The Reset button is a form-specific component that resets form fields to their default or initial values when clicked. It is typically placed inside a Form Item within a Form Template. In the App Designer, select a Reset button on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Reset button.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Label	i18n setter	Reset	Sets the text displayed on the button. Supports internationalisation.
Icon	Icon selector	-	Sets an icon for the button.
Icon position	Radio group (Left | Right)	-	Sets the position of the icon relative to the button text.
Type	Dropdown (Primary | Secondary | Normal)	Normal	Determines the button's visual style and hierarchy.
Size	Dropdown (Small | Medium | Large)	Medium	Sets the size of the button.
Icon size	Dropdown (Xxs | Xs | Small | Medium | Large | Xl | Xxl | Xxxl)	-	Controls the size of the icon displayed in the button.
Theme	Dropdown (Normal | Light | Dark)	Normal	Sets the visual theme of the button. Light and Dark are ghost variants for different backgrounds.
To default	Toggle switch	Off	When enabled, clicking the button restores fields to their default values rather than clearing them.
Loading	Toggle switch	Off	Shows a loading spinner and disables user interaction while an operation is in progress.
Text	Toggle switch	Off	When enabled, renders the button as a text-only button with no border or background.
Warning	Toggle switch	Off	When enabled, applies warning styling to the button.
Disabled	Toggle switch	Off	Controls whether the button is in a disabled state, preventing user interaction.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. When the button is inside a Form Item, the name is inherited from the parent. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Reset button without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Reset button's supported events:

   • onClick — Triggered when the button is clicked
   • onMouseUp — Triggered when the mouse button is released over the button

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onClick and onMouseUp handlers receive the corresponding DOM event:

onClick(event) { }
onMouseUp(event) { }

Advanced

For more information, refer to Advanced.

HTML

The HTML component allows you to embed raw HTML markup directly into the application canvas. It renders the provided HTML string as live DOM content. In the App Designer, select an HTML on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the content property of the HTML component.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Data	Code editor (Edit Code button)	-	Sets the raw HTML content to render inside the component.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the HTML component without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the HTML component's supported events:

   • onClick — Triggered when the rendered HTML content is clicked

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onClick handler receives the click event:

onClick(event) {
  // Handle click on the HTML content
}

Advanced

For more information, refer to Advanced.

Icon Selector

The Icon Selector component displays a scalable icon from the icon library. In the App Designer, select an Icon Selector on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual properties of the Icon Selector.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Icon list	JSON setter	-	Sets the list of icons to display.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Icon Selector without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Icon Selector's supported events:

   • onChange — Triggered when the selected icon changes

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the new icon value:

onChange(value) {
  console.log(value)
}

Advanced

For more information, refer to Advanced.

Input

The Input component is a single-line text field for user input. It supports labels, placeholder text, value binding, validation states, character limits, and add-on content around the field. In the App Designer, select an Input on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Input.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Change component type	Dropdown (Input | TextArea | Select | Upload | Number Input | DatePicker | Password Input | Checkbox Group| Radio Group)	Input	Switches the component to a different input type. The current component is replaced with the selected type.
Label	i18n setter	-	Sets a label displayed alongside the input field. Supports internationalisation.
Default value	i18n setter	-	Sets the initial value for uncontrolled usage.
Value	i18n setter	-	Sets the current value for controlled usage.
Placeholder	i18n setter	Please enter	Sets the placeholder text displayed when the input is empty. Supports internationalisation.
State	Radio group (Error | Loading | Success | Warning | Default)	-	Sets the validation state of the input, applying a corresponding visual indicator.
Size	Radio group (Small | Medium | Large)	Medium	Controls the overall size of the input field.
Max length	Number input	-	Sets the maximum number of characters allowed in the input.
Allow clearing	Toggle switch	Off	When enabled, displays a clear (×) button inside the input to remove the current value.
Allow clearing on Hover	Toggle switch	Off	When enabled, displays the clear button only when the user hovers over the input.
Disabled	Toggle switch	Off	Controls whether the input is in a disabled state, preventing user interaction.
Show copy clipboard	Toggle switch	Off	When enabled, displays a copy-to-clipboard button alongside the input.
Show limit	Toggle switch	Off	When enabled, displays a character count indicator relative to the Max length value.
Cut string	Toggle switch	Off	When enabled, automatically truncates input that exceeds the Max length value.
Read only	Toggle switch	Off	When enabled, prevents the user from editing the input value while still displaying it.
Trim	Toggle switch	Off	When enabled, automatically removes leading and trailing whitespace from the value returned by onChange.
Show border	Toggle switch	On	Controls whether the input field has a visible border.
Auto complete	Dropdown (On | Off)	Off	Controls the browser's autocomplete behaviour for this input.
Auto focus	Toggle switch	Off	When enabled, automatically places focus on this input when the page loads.
Icon hint	Icon selector	-	Sets an icon displayed inside the input field as a visual hint.
Inner before	i18n setter	-	Adds content inside the input field, before the text area. Supports internationalisation.
Inner after	i18n setter	-	Adds content inside the input field, after the text area. Supports internationalisation.
Addon before	i18n setter	-	Adds content outside the input field, immediately before it. Supports internationalisation.
Addon after	i18n setter	-	Adds content outside the input field, immediately after it. Supports internationalisation.
Text before	i18n setter	-	Adds plain text before the input field. Supports internationalisation.
Text after	i18n setter	-	Adds plain text after the input field. Supports internationalisation.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. When the Input is inside a Form.Item, the name is inherited from the parent. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Input without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Input's supported events:

   • onPressEnter — Triggered when the Enter key is pressed
   • onChange — Triggered when the input value changes
   • onKeyDown — Triggered when a key is pressed down
   • onFocus — Triggered when the input receives focus
   • onBlur — Triggered when the input loses focus

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onPressEnter handler receives the keyboard event:

onPressEnter(event) {
  // Handle Enter key press
}

The onChange handler receives the new value:

onChange(value) {
  // value: the updated input string
}

The onKeyDown, onFocus, and onBlur handlers each receive the corresponding DOM event:

onKeyDown(event) { }
onFocus(event) { }
onBlur(event) { }

Advanced

For more information, refer to Advanced.

Password Input

The Password Input component is a single-line text field for entering passwords. It supports an optional toggle to show or hide the entered text, as well as labels, placeholder text, value binding, validation states, character limits, and add-on content around the field. In the App Designer, select a Password Input on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Password Input.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Change component type	Dropdown (Input | TextArea | Select | Upload | Number Input | DatePicker | Password Input | Checkbox Group| Radio Group)	Password Input	Switches the component to a different input type. The current component is replaced with the selected type.
Label	i18n setter	-	Sets a label displayed alongside the input field. Supports internationalisation.
Max length	Number input	-	Sets the maximum number of characters allowed in the input.
Placeholder	i18n setter	-	Sets the placeholder text displayed when the input is empty. Supports internationalisation.
State	Radio group (Error | Loading | Success | Warning)	-	Sets the validation state of the input, applying a corresponding visual indicator.
Size	Radio group (Small | Medium | Large)	Medium	Controls the overall size of the input field.
Show toggle	Toggle switch	Off	When enabled, displays a toggle icon that allows the user to show or hide the password text.
Allow clearing	Toggle switch	Off	When enabled, displays a clear (×) button inside the input to remove the current value.
Disabled	Toggle switch	Off	Controls whether the input is in a disabled state, preventing user interaction.
Show limit	Toggle switch	Off	When enabled, displays a character count indicator relative to the Max length value.
Cut string	Toggle switch	Off	When enabled, automatically truncates input that exceeds the Max length value.
Read only	Toggle switch	Off	When enabled, prevents the user from editing the input value while still displaying it.
Trim	Toggle switch	Off	When enabled, automatically removes leading and trailing whitespace from the value returned by onChange.
Show border	Toggle switch	On	Controls whether the input field has a visible border.
Auto focus	Toggle switch	Off	When enabled, automatically places focus on this input when the page loads.
Icon hint	Icon selector	-	Sets an icon displayed inside the input field as a visual hint.
Inner before	i18n setter	-	Adds content inside the input field, before the text area. Supports internationalisation.
Inner after	i18n setter	-	Adds content inside the input field, after the text area. Supports internationalisation.
Addon before	i18n setter	-	Adds content outside the input field, immediately before it. Supports internationalisation.
Addon after	i18n setter	-	Adds content outside the input field, immediately after it. Supports internationalisation.
Text before	i18n setter	-	Adds plain text before the input field. Supports internationalisation.
Text after	i18n setter	-	Adds plain text after the input field. Supports internationalisation.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. When the Password Input is inside a Form.Item, the name is inherited from the parent. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Password Input without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Password Input's supported events:

   • onPressEnter — Triggered when the Enter key is pressed
   • onClear — Triggered when the clear button is clicked
   • onChange — Triggered when the input value changes
   • onKeyDown — Triggered when a key is pressed down
   • onFocus — Triggered when the input receives focus
   • onBlur — Triggered when the input loses focus

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onPressEnter handler receives the keyboard event:

onPressEnter(event) {
  // Handle Enter key press
}

The onClear handler receives the clear event:

onClear(event) {
  // Handle clear button click
}

The onChange handler receives the new value:

onChange(value) {
  // value: the updated input string
}

The onKeyDown, onFocus, and onBlur handlers each receive the corresponding DOM event:

onKeyDown(event) { }
onFocus(event) { }
onBlur(event) { }

Advanced

For more information, refer to Advanced.

TextArea

The TextArea component is a multi-line text field for user input. It supports configurable row height, automatic height adjustment, placeholder text, value binding, validation states, character limits, and clipboard controls. In the App Designer, select a TextArea on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the TextArea.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Change component type	Dropdown (Input | TextArea | Select | Upload | Number Input | DatePicker | Password Input | Checkbox Group| Radio Group)	TextArea	Switches the component to a different input type. The current component is replaced with the selected type.
Rows	Number input	4	Sets the number of visible rows in the textarea.
Default value	i18n setter	-	Sets the initial value for uncontrolled usage.
Value	i18n setter	-	Sets the current value for controlled usage.
Size	Radio group (Small | Medium | Large)	Medium	Controls the overall size of the textarea. Please note that the Small and Medium values do not function in the source code.
Max length	Number input	-	Sets the maximum number of characters allowed in the textarea.
Placeholder	i18n setter	-	Sets the placeholder text displayed when the textarea is empty. Supports internationalisation.
State	Radio group (Error | Warning)	-	Sets the validation state of the textarea, applying a corresponding visual indicator.
Auto height	Radio group (None | Auto | Custom)	None	Controls automatic height adjustment. None uses a fixed row height. Auto expands the textarea as content grows. Custom enables manual minimum and maximum row configuration.
Min row	Number input	2	Sets the minimum number of rows when Auto height is Custom. Only visible when Auto height is set to Custom.
Max row	Number input	5	Sets the maximum number of rows when Auto height is Custom. Only visible when Auto height is set to Custom.
Allow clearing	Toggle switch	Off	When enabled, displays a clear (×) button to remove the current value.
Preview mode	Toggle switch	Off	When enabled, renders the textarea content as read-only preview text.
Disabled	Toggle switch	Off	Controls whether the textarea is in a disabled state, preventing user interaction.
Show copy clipboard	Toggle switch	Off	When enabled, displays a copy-to-clipboard button alongside the textarea.
Show limit	Toggle switch	Off	When enabled, displays a character count indicator relative to the Max length value.
Cut string	Toggle switch	On	When enabled, automatically truncates input that exceeds the Max length value.
Read only	Toggle switch	Off	When enabled, prevents the user from editing the textarea value while still displaying it.
Trim	Toggle switch	Off	When enabled, automatically removes leading and trailing whitespace from the value returned by onChange.
Show border	Toggle switch	On	Controls whether the textarea has a visible border.
Auto focus	Toggle switch	Off	When enabled, automatically places focus on this textarea when the page loads.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. When the TextArea is inside a Form.Item, the name is inherited from the parent. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the TextArea without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the TextArea's supported events:

   • onChange — Triggered when the textarea value changes
   • onKeyDown — Triggered when a key is pressed down
   • onFocus — Triggered when the textarea receives focus
   • onBlur — Triggered when the textarea loses focus

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the new value:

onChange(value) {
  // value: the updated textarea string
}

The onKeyDown, onFocus, and onBlur handlers each receive the corresponding DOM event:

onKeyDown(event) { }
onFocus(event) { }
onBlur(event) { }

Advanced

For more information, refer to Advanced.

Table

The Table component displays data in a structured grid with rows and columns. It supports fixed headers, row selection, tree data, virtual scrolling, and row and cell customisation. In the App Designer, select a Table on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Table.

If a property displays the Variable Binding icon , that means it supports variable binding.

Custom toolbar rendering configuration

Property	UI Control	Default	Description
Custom rendering	Toggle switch	Disable	When enabled, provides a custom render function for the entire toolbar.
Top-right rendering	Toggle switch	Disable	When enabled, renders custom content in the top-right area of the table.
Top rendering	Toggle switch	Disable	When enabled, renders custom content above the table.

Style and theme

Property	UI Control	Default	Description
Theme	Radio group (Zebra | Split | Border)	-	Sets the visual theme of the table.
Show header	Toggle switch	On	Controls whether the table header row is displayed.
Fixed header	Toggle switch	Off	When enabled, the table header remains visible when scrolling vertically.
Max body height	Text input	-	Sets the maximum height of the table body. When the content exceeds this height, vertical scrolling is enabled. Only visible when Fixed header is enabled.
Sticky header	Toggle switch	Off	When enabled, the header sticks to the top of the viewport on scroll.
Use virtual	Toggle switch	Off	When enabled, uses virtual scrolling to improve performance with large datasets.
Empty value content	Toggle switch	On	When enabled, displays the Empty content text when the datasource has no rows.
Empty content	i18n setter	No Data	Sets the text displayed when the datasource is empty. Supports internationalisation.
Responsive table type	Radio group (Default | Collapse row)	Default	Sets the responsive behaviour of the table on smaller screens.
Responsive break point (px)	Number input	500	Sets the viewport width threshold (in pixels) at which the table switches to collapsed row layout. Only visible when Responsive table type is set to Collapse row.

Row selector

Property	UI Control	Default	Description
Enable row selection	Toggle switch	Off	When enabled, allows rows to be selected.
Select mode	Radio group (Checkbox selector | Radio selector)	-	Sets whether rows are selected using checkboxes (multiple) or radio buttons (single). Only visible when Enable row selection is enabled.
Customise selection	Function Binding	-	Provides a custom function to control row selection behaviour.
Primary key	i18n setter	id	Sets the field name used as the unique row identifier.
Selected row keys	Array setter	-	Sets the currently selected row key values.

Pagination configuration

Property	UI Control	Default	Description
Show pagination	Toggle switch	Off	When enabled, the Pagination settings sub-section takes effect.

Pagination settings

The Pagination settings sub-section is available within the Pagination configuration section. These properties only take effect when Show pagination is enabled.

Property	UI Control	Default	Description
Alignment	Radio group (Left | Right)	Right	Sets the horizontal alignment of the pagination control.
Type	Radio group (Normal | Simple | Mini)	Normal	Sets the visual style of the pagination control.
Navigation button style	Dropdown (Normal | Arrow only | Arrow prev only | No border)	Arrow only	Sets the style of the previous/next navigation buttons.
Size	Radio group (Small | Medium | Large)	Medium	Sets the size of the pagination control.
Current page	Number input	1	Sets the current page number.
Total records	Number input	100	Sets the total number of records used to calculate the page count.
Total text	i18n setter	Total	Sets the total number of rendering functions. Supports internationalisation.
Show page size	Number input	10	Sets the number of rows displayed per page.
Selector type	Radio group (None | Filter | Dropdown)	None	Sets the style of the page-size selector control.
Page size list	Text input	5,10,20	Sets the available page-size options as a comma-separated list.
Page size alignment	Radio group (Start | End)	End	Sets the alignment of the page-size selector.
Single page hide	Toggle switch	Off	When enabled, hides the pagination control when there is only one page.
Show jump	Toggle switch	On	When enabled, displays a page jump input.
Jump link	Text input	-	Sets a URL template for page-number links.
OnChange	Function Binding	-	Defines a callback function triggered when the page changes.
OnPageSizeChange	Function Binding	-	Defines a callback function triggered when the page size changes.

Tree table

Property	UI Control	Default	Description
Open Row Keys	Switch Setter (Array setter / Variable input)	-	Sets the keys of rows that are expanded in tree mode. Click "Add an item +" to add a row key entry. You can click the delete (trash) icon to remove an entry, or use the grip icon to reorder entries.
Enable tree	Toggle switch	Off	When enabled, renders the table as a tree table with expandable rows.

Action bar

Defines action items displayed in the table toolbar. Each item in the Action bar array editor has the following properties:

Property	UI Control	Default	Description
Title	i18n setter	Auto-generated (for example, Add, Edit)	Sets the display text of the action item. Supports internationalisation.
Callback	Function Binding	-	Binds a function to be called when the action item is clicked.

You can click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove an item, or use the grip icon to reorder items. Click "Add an item +" to add a new action item.

Link bar

Defines link items displayed alongside action bar items. Each item in the Link bar array setter has the following properties:

Property	UI Control	Default	Description
Title	i18n setter	Title	Sets the display text of the link item. Supports internationalisation.
Callback	Function Binding	-	Binds a function to be called when the link item is clicked.

You can click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove an item, or use the grip icon to reorder items. Click "Add an item +" to add a new link item.

Top actions

Property	UI Control	Default	Description
Show mini pagination	Toggle switch	Off	Controls the visibility of a compact or 'mini' version of the pagination interface, conserving space while providing navigation controls.
Show action bar	Toggle switch	On	Controls the visibility of an action toolbar within the table, providing users with convenient access to various actions and interactions related to the displayed data.
Show links	Toggle switch	Off	Determines whether link items are displayed within the table.
Allow searching	Toggle switch	Off	When enabled, displays a search box in the toolbar.
Search box placeholder	i18n setter	-	Sets the placeholder text for the toolbar search box. Only visible when Allow searching is enabled. Supports internationalisation.
Allow hide columns	Toggle switch	Off	Grants users the ability to hide or show individual columns within the table, providing them with control over the visibility of specific data fields.

Data column

Property	UI Control	Default	Description
Data column	Switch Setter (Array setter / Variable input)	-	Defines the table columns. See Data column item configuration.
Datasource	JSON setter	See code sample	Sets the data array to display. Each array item represents a row.
Row props	Function Binding	-	Provides a custom function to apply props to each table row element.
Cell props	Function Binding	-	Provides a custom function to apply props to each table cell element.
Sort icons desc	Icon selector	descending	Sets the icon used for the descending sort indicator.
Sort icons asc	Icon selector	ascending	Sets the icon used for the ascending sort indicator.

Datasource default code sample

[{
    "name": "Wang Xiao",
    "id": "1",
    "age": 15000,
    "role": "develop"
}, 
{
    "name": "Wang Zhong",
    "id": "2",
    "age": 25000,
    "role": "product"
}, 
{
    "name": "Wang Da",
    "id": "3",
    "age": 35000,
    "role": "design"
}]

Data column item configuration

Each item in the Data column array editor has the following properties:

Property	UI Control	Default	Description
Title	i18n setter	Auto-generated (for example, Name, Age)	Sets the column header text. Supports internationalisation.
Align	Radio group (Left | Center | Right)	Center	Sets the horizontal alignment of the column content.
Data key	Text input	Auto-generated (for example, name)	Sets the data field key that this column maps to.
Width	Number input (px)	200	Sets the column width in pixels.
Data type	Dropdown (Text | Timestamp | Cascade timestamp | Employee | Money | Money range)	Text	Sets the data type of the column.
Lock	Radio group (Left | Right | None)	None	Locks the column to the left or right side of the table.
Allow sorting	Toggle switch	Off	When enabled, allows the user to sort the table by this column.
Cell	Function Binding	-	Binds a custom function to render the cell content.
Render	Toggle switch + Params setter	On	When enabled, activates a custom render function for the column. The Params field displays the function parameters (value,index,record). You can click the clear (X) icon to reset the parameters.
ColSpan	Text input	-	Sets the number of columns this cell should span.

You can click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove a column, or use the grip icon to reorder columns. Click "Add an item +" to add a new column.

Action column

Property	UI Control	Default	Description
Action column	Switch Setter (Array setter / Variable input)	Auto-generated	Defines action items (for example, Edit, Preserve) displayed in the action column. Refer to Action column items.
Action position	Radio group (Left | Right)	Right	Sets whether the action column appears on the left or right side of the table.
Column title	i18n setter	Operation	Sets the header text of the action column. Supports internationalisation.
Column align	Radio group (Left | Center | Right)	-	Sets the horizontal alignment of content in the action column.
Column width	Number input	180	Sets the width of the action column in pixels.
Action type	Radio group (Link | Button)	Link	Sets whether action items render as links or buttons.
Action hidden	Toggle switch	Off	When enabled, hides the entire action column.
None action hidden	Toggle switch	Off	When enabled, hides the action column cell for rows where no actions are available.
Button visibility	Number input	3	Sets the maximum number of action buttons visible before the remainder are collapsed into a dropdown.
Dropdown menu	Toggle switch	Off	When enabled, collapses all action items into a dropdown menu.
Action column trigger type	Radio group (Click | Hover)	-	Sets whether the dropdown menu opens on click or hover.

Action column items

Each item in the Action column array has the following properties:

Property	UI Control	Default	Description
Title	i18n setter	Auto-generated	Sets the display text of the action item. Supports internationalisation.
Icon	Icon setter	-	Sets an icon displayed alongside the action item.
Width	Number input (px)	-	Sets the width of the action item in pixels.
Callback	Function Binding	-	Binds a custom function (callback) to be called when the action item is clicked.
Filter	Function Binding	-	Binds a custom function (filterFunc) to conditionally control the visibility of the action item per row.

You can click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove an action item, or use the grip icon to reorder items. Click "Add an item +" to add a new action item.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Table without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Table's supported events:

   • onFetchData — Triggered when the table requests data, for example on sort or page change
   • onSelect — Triggered when a row is selected or deselected
   • onSelectAll — Triggered when the select-all checkbox is toggled
   • onSort — Triggered when a column sort is applied
   • onRowClick — Triggered when a row is clicked
   • onRowMouseEnter — Triggered when the pointer enters a row
   • onRowMouseLeave — Triggered when the pointer leaves a row
   • onRowOpen — Triggered when a row is expanded

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onFetchData handler receives the current pagination and sort state:

onFetchData(params) {
  // params: object containing current page, page size, and sort info
}

The onSelect handler receives the selection and the record(s) that changed:

onSelect(selected, record, records) {}

The onSelectAll handler receives the selection and the records:

onSelectAll(selected, records) {}

The onSort handler receives the sort field and sort order:

onSort(field, order) {
  // field: the column key being sorted
  // order: 'asc' | 'desc'
}

The onRowClick handler receives the row record and row index:

onRowClick(record, index) {
  // record: the row data object
  // index: the zero-based row index
}

The onRowMouseEnter and onRowMouseLeave handlers each receive the row record and index:

onRowMouseEnter(record, index) { }
onRowMouseLeave(record, index) { }

The onRowOpen handler receives the currently expanded row keys, the key of the toggled row, a flag indicating whether the row was expanded or collapsed, and the data record of the toggled row:

onRowOpen(openRowKeys, currentRowKey, expanded, currentRecord) {
  // openRowKeys: array of currently expanded row keys
  // currentRowKey: the key of the row that was toggled
  // expanded: true when expanding, false when collapsing
  // currentRecord: the data object of the toggled row
}

Advanced

For more information, refer to Advanced.

Number Input

The Number Input component provides a numeric text field with increment and decrement controls. It supports configurable range, step, precision, display format, and inline or standard layout. In the App Designer, select a Number Input on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Number Input.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Change component type	Dropdown (Input | TextArea | Select | Upload | Number Input | DatePicker | Password Input | Checkbox Group| Radio Group)	Number Input	Switches the component to a different input type. The current component is replaced with the selected type.
Label	i18n setter	-	Sets a label displayed alongside the number input. Supports internationalisation.
Current value	Number input	-	Sets the current value for controlled usage.
Default value	Number input	-	Sets the initial value for uncontrolled usage.
Size	Radio group (Small | Medium | Large)	Medium	Sets the overall size of the component.
Type	Radio group (Ordinary | Inline)	Ordinary	Sets the layout of the increment and decrement controls. Ordinary places controls to the right. Inline places them within the field.
Inner after	i18n setter	-	Adds content displayed inside the field after the numeric value. Supports internationalisation.
Step	Number input	1	Sets the increment or decrement amount applied per control click or arrow key press.
Precision	Number input	0	Sets the number of decimal places to display and round to.
Max value	Number input	-	Sets the maximum allowed value.
Min value	Number input	-	Sets the minimum allowed value.
Editable	Toggle switch	On	When enabled, allows the user to type directly into the input field.
Disabled	Toggle switch	Off	Controls whether the input is in a disabled state, preventing user interaction.
String mode	Toggle switch	Off	When enabled, the value is handled as a string to preserve precision for very large numbers.
Format	Function Binding	-	Defines a custom function to format the displayed value. Refer to Format function.

Format function

The Format function accepts the following signature:

format(value) {
  return value;
}

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. When the Number Input is inside a Form Item, the name is inherited from the parent. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Number Input without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Number Input's supported events:

   • onChange — Triggered when the value changes
   • onKeyDown — Triggered when a key is pressed down
   • onFocus — Triggered when the input receives focus
   • onBlur — Triggered when the input loses focus
   • onCorrect — Triggered when the value is automatically corrected to fit within the min/max range

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the new numeric value:

onChange(value) {
  // value: the updated number
}

The onCorrect handler receives the corrected value:

onCorrect(value) {
  // value: the value after correction to min/max bounds
}

The onKeyDown, onFocus, and onBlur handlers each receive the corresponding DOM event:

onKeyDown(event) { }
onFocus(event) { }
onBlur(event) { }

Advanced

For more information, refer to Advanced.

Phone Input

The Phone Input component provides an international telephone number field with a country code selector. It supports phone number formatting, country filtering, search functionality, and configurable validation. In the App Designer, select a Phone Input on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Phone Input.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Default country code	Switch Setter (i18n setter / Number setter / Variable input)	-	Sets the initial country dial code. Supports internationalisation.
Default value	i18n setter	-	Sets the initial phone number value. Supports internationalisation.
Selected countries	Switch Setter (MasterCode setter / Array setter / Variable input)	-	Restricts the country list to only the specified countries. Click "Add an item +" to add a country entry. Each entry supports internationalisation. You can click the delete (trash) icon to remove an entry, or use the grip icon to reorder entries.
Preferred countries	Switch Setter (MasterCode setter / Array setter / Variable input)	-	Places the specified countries at the top of the country dropdown. Click "Add an item +" to add a country entry. Each entry supports internationalisation. You can click the delete (trash) icon to remove an entry, or use the grip icon to reorder entries.
Excluded countries	Switch Setter (MasterCode setter / Array setter / Variable input)	-	Removes the specified countries from the country dropdown. Click "Add an item +" to add a country entry. Each entry supports internationalisation. You can click the delete (trash) icon to remove an entry, or use the grip icon to reorder entries.
Placeholder	i18n setter	1 (702) 123-4567	Sets the placeholder text in the phone number field. Supports internationalisation.
Search placeholder	i18n setter	search	Sets the placeholder text in the country search box. Supports internationalisation.
Empty value content	i18n setter	No entries to show	Sets the message displayed when no countries match the search. Supports internationalisation.
Disabled	Toggle switch	Off	Controls whether the phone input is in a disabled state.
Auto format	Toggle switch	Off	When enabled, automatically formats the phone number as the user types.
Show area code	Toggle switch	Off	When enabled, displays the area code in the country selector.
Show territory	Toggle switch	Off	When enabled, displays the territory name in the country selector.
Disable country code	Toggle switch	Off	When enabled, prevents the user from changing the country code. Only visible when Country code editable is disabled.
Disable dropdown	Toggle switch	Off	When enabled, prevents the user from opening the country selector dropdown.
Allow long numbers	Switch Setter (Number setter / Bool setter / Variable input)	-	When set, allows phone numbers up to the specified length beyond the standard format.
Country code editable	Toggle switch	Off	When enabled, allows the user to modify the country code portion of the field directly.
Enable search	Toggle switch	Off	When enabled, displays a search box within the country dropdown.
Disable search icon	Toggle switch	Off	When enabled, hides the search icon in the country search box.

Regions

Property	UI Control	Default	Description
Regions	Switch Setter (i18n setter / Array setter / Variable input)	-	Restricts the country list to countries within the specified region or regions. Click "Add an item +" to add a region entry. Each entry supports internationalisation. You can click the delete (trash) icon to remove an entry, or use the grip icon to reorder entries.
Input props	JSON setter	-	Passes additional props to the underlying input element.
Default mask	i18n setter	... ... ... ... ..	Sets the default format mask applied when no country-specific mask is available.
Always default mask	Toggle switch	Off	When enabled, always applies the default mask regardless of the selected country.
Prefix	i18n setter	+	Sets the prefix character displayed before the country code.
Copy numbers only	Toggle switch	Off	When enabled, copying the value to clipboard includes only the digits, without formatting characters.
Render string as flag	i18n setter	-	When set, renders the country code string in the flag selector area instead of a flag image.
Enable area code stretch	Toggle switch	Off	When enabled, the area code selector stretches to fill available space.
Enable click outside	Toggle switch	Off	When enabled, clicking outside the dropdown closes it.
Show dropdown	Toggle switch	Off	Controls the visibility of the country dropdown programmatically.
Default error message	i18n setter	-	Sets the default validation error message. Supports internationalisation.
Disable initial country guess	Toggle switch	Off	When enabled, prevents the component from automatically detecting the country from the initial value.
Disable country guess	Toggle switch	Off	When enabled, prevents the component from guessing the country as the user types.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. When the Phone Input is inside a Form Item, the name is inherited from the parent. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Phone Input without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Phone Input's supported events:

   • onChange — Triggered when the phone number value changes
   • onFocus — Triggered when the input receives focus
   • onBlur — Triggered when the input loses focus
   • onClick — Triggered when the input is clicked
   • onKeyDown — Triggered when a key is pressed down
   • isValid — A validation function that returns a boolean or string to indicate whether the current value is valid
   • onMount — Triggered when the component mounts

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the phone number value and selected country data:

onChange(value, countryData) {
  // value: the current phone number string
  // countryData: object containing country name, dial code, and country code
}

The isValid handler receives the value and country context, and must return true (valid) or an error string:

isValid(value, selectedCountry, onlyCountries, hiddenAreaCodes) {
  // return true if valid, or an error string if invalid
}

The onFocus, onBlur, onClick, and onKeyDown handlers each receive the corresponding DOM event:

onFocus(event) { }
onBlur(event) { }
onClick(event) { }
onKeyDown(event) { }

The onMount handler is called once when the component is first rendered:

onMount() {
  // Component has mounted
}

Advanced

For more information, refer to Advanced.

Radio

The Radio component is a single radio button that can be used independently or within a Radio Group. It supports checked state binding, label text, disabled state, and preview mode. In the App Designer, select a Radio on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Radio.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Default checked	Toggle switch	Off	Sets the initial checked state for uncontrolled usage.
Checked	Toggle switch	Off	Sets the current checked state for controlled usage.
Label	i18n setter	Option 1	Sets the label text displayed next to the radio button. Supports internationalisation.
Disabled	Toggle switch	Off	Controls whether the radio button is in a disabled state, preventing user interaction.
Value	Switch Setter (String setter / Number setter / Bool setter / Variable input)	1	Sets the value associated with this radio button when it is selected.
Preview mode	Toggle switch	Off	When enabled, renders the component in a read-only preview state.
Render preview	Bind Function	-	Opens the Event Binding window with the renderPreview event name. Defines a custom render function for the preview state.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Radio without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Radio's supported events:

   • onChange — Triggered when the checked state changes
   • onMouseEnter — Triggered when the pointer enters the radio area
   • onMouseLeave — Triggered when the pointer leaves the radio area

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler is triggered when the selected state changes:

onChange(checked, event) {
  // checked: boolean indicating whether the radio is selected
  // event: the DOM change event object
}

The onMouseEnter and onMouseLeave handlers receive the corresponding DOM event:

onMouseEnter(event) { }
onMouseLeave(event) { }

Advanced

For more information, refer to Advanced.

Radio Group

The Radio Group component renders a set of mutually exclusive radio buttons. It supports normal and button display shapes, horizontal or vertical layout, and both controlled and uncontrolled value modes. In the App Designer, select a Radio Group on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Radio Group.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Change component type	Dropdown (Input | TextArea | Select | Upload | Number Input | DatePicker | Password Input | Checkbox Group| Radio Group)	Radio Group	Switches the component to a different input type. The current component is replaced with the selected type.
Shape	Radio group (Normal | Button)	-	Sets the visual style of the radio options. Normal shows standard radio inputs. Button shows toggle button-style options.
Disabled	Toggle switch	Off	Controls whether all radio options in the group are in a disabled state.
Size	Radio group (Small | Medium | Large)	-	Sets the overall size of the radio group.
Direction	Radio group (Horizontal | Vertical)	-	Sets the layout direction of the radio options.
Preview mode	Toggle switch	Off	When enabled, renders the radio group in a read-only preview state.
Normal value	i18n setter	-	Sets the initial selected value for uncontrolled usage.
Value	i18n setter	-	Sets the current selected value for controlled usage.
DataSource	Switch Setter (MasterCode setter / Array editor / Variable input)	-	Defines the list of radio options. Refer to DataSource.

DataSource

The DataSource section defines the list of radio options. Each item in the array has the following properties:

Property	UI Control	Default	Description
Label	i18n setter	Auto-generated	Sets the display text of the radio option. Supports internationalisation.
Value	i18n setter	Auto-generated	Sets the underlying value of the radio option. Supports internationalisation.

You can click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove an option, or use the grip icon to reorder options. Click "Add an item +" to add a new option.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Radio Group without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Radio Group's supported events:

   • onChange — Triggered when the selected value changes

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the new selected value:

onChange(value) {
  // value: the value of the newly selected radio option
}

Advanced

For more information, refer to Advanced.

Range

The Range component (Slider) provides a slider control for selecting a numeric value or range within defined bounds. It supports dual knobs for range selection, customisable tick marks, and tooltip display. In the App Designer, select a Range on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Range.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Current value	Switch Setter (Number input / Expression input / Variable input)	-	Sets the current value for controlled usage.
Default value	Switch Setter (Number input / Expression input / Variable input)	-	Sets the initial value for uncontrolled usage.
Min value	Number input	0	Sets the minimum selectable value.
Max value	Number input	100	Sets the maximum selectable value.
Step	Number input	1	Sets the increment between selectable values.
Knob count	Radio group (Single | Double)	Single	Sets the number of slider knobs. Single selects a single value. Double selects a range between two values.
Disabled	Toggle switch	Off	Controls whether the slider is in a disabled state, preventing user interaction.
Show tooltip	Toggle switch	On	When enabled, displays the current value in a tooltip above the knob during interaction.
Fixed width	Toggle switch	Off	When enabled, the distance between the two knobs is locked to a fixed interval. Only applicable when Knob count is Double.
Indicator marks	Switch Setter (Array setter / Variable input)	-	Defines custom tick marks along the slider track. Each mark specifies a value and an optional label.
Label position	Radio group (Above | Below)	Above	Sets the position of mark labels relative to the slider track. Only visible when Indicator marks are configured.
Auto show tooltip	Toggle switch	Off	When enabled, the tooltip is always visible rather than only during interaction.
Reverse	Toggle switch	Off	When enabled, reverses the direction of the slider track.
Preview mode	Toggle switch	Off	When enabled, renders the slider in a non-interactive preview state.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Range without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Range's supported events:

   • onChange — Triggered when the slider value changes

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the new value:

onChange(value) {
  // value: the new slider value (or [start, end] when Knob count is Double)
}

Advanced

For more information, refer to Advanced.

Rating

The Rating component allows users to provide a star-based rating. It supports a configurable maximum star count, half-star precision, score display, and a custom display value function. In the App Designer, select a Rating on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Rating.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Current value	Number input	-	Sets the current rating value for controlled usage.
Default value	Number input	-	Sets the initial rating value for uncontrolled usage.
Size	Radio group (Small | Medium | Large)	Medium	Sets the overall size of the rating stars.
Max rating	Number input	5	Sets the maximum number of stars to display (up to 10).
Allow half stars	Toggle switch	Off	When enabled, allows half-star selections for finer granularity.
Show rating	Toggle switch	Off	When enabled, displays the numeric rating value alongside the stars.
Customise rating display value	Function Binding	-	Defines a custom function to format the displayed rating value.

Customise rating display value function

The Customise rating display value function accepts the following signature:

readAs(val) {
  // val: the current numeric rating value
}

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Rating without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Rating's supported events:

   • onChange — Triggered when the selected rating value changes
   • onHoverChange — Triggered when the pointer hovers over a different star

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the new rating value:

onChange(value) {
  // value: the newly selected numeric rating
}

The onHoverChange handler receives the hovered rating value:

onHoverChange(value) {
  // value: the rating value currently under the pointer
}

Advanced

For more information, refer to Advanced.

Search

The Search component is a search input field with an integrated search button. It supports placeholder text, datasource suggestions, filter selectors, and configurable size, shape, and type styles. In the App Designer, select a Search on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the Search.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Placeholder	i18n setter	Please enter	Sets the placeholder text displayed when the input is empty. Supports internationalisation.
Default value	i18n setter	-	Sets the initial value of the search input.
Search text	i18n setter	search	Sets the label text displayed on the search button. Supports internationalisation.
Size	Radio group (Large | Medium)	Medium	Controls the overall size of the search field.
Shape	Radio group (Normal | Simple)	Normal	Sets the visual shape of the search component. Normal displays the full search field with a button. Simple displays a compact style.
Type	Radio group (Primary | Secondary | Normal | Dark)	Normal	Determines the visual style of the search button.
Allow clearing	Toggle switch	Off	When enabled, displays a clear (×) button to remove the current value.
Show icon	Toggle switch	On	Controls whether the search icon is displayed on the search button.
Disabled	Toggle switch	Off	Controls whether the search input is in a disabled state, preventing user interaction.
Datasource	JSON setter	See the code example	Provides a list of suggestion items for the search input.
Filter selector	JSON setter	-	Defines filter options that users can apply to narrow search results.
Filter default value	i18n setter	-	Sets the default selected value of the filter selector.

Code example for Datasource default value

[{
    "label": "Recent",
    "value": "Recent"
}, 
{
    "label": "dress",
    "value": "dress"
}, 
{
    "label": "sunglasses",
    "value": "sunglasses"
}, 
{
    "label": "t-shirt",
    "value": "t-shirt"
}]

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. When the Search is inside a Form.Item, the name is inherited from the parent. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Search without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Search's supported events:

   • onChange — Triggered when the search input value changes
   • onSearch — Triggered when the user submits the search
   • onFilterChange — Triggered when the filter selection changes

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the current input value:

onChange(value) {
  // value: the current search input string
}

The onSearch handler receives the submitted search value:

onSearch(value) {
  // value: the search string submitted by the user
}

The onFilterChange handler receives the selected filter value:

onFilterChange(value) {
  // value: the newly selected filter value
}

Advanced

For more information, refer to Advanced.

Select

The Select component displays a dropdown input for selecting one or more values from a predefined list. It supports single, multiple, and tag selection modes, optional search, and a configurable datasource. In the App Designer, select a Select on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the structural and behavioural properties of the Select.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Change component type	Dropdown (Input | TextArea | Select | Upload | Number Input | DatePicker | Password Input | Checkbox Group| Radio Group)	Select	Switches the component to a different input type. The current component is replaced with the selected type.
Placeholder	i18n setter	Please select	Sets the placeholder text displayed when no value is selected. Supports internationalisation.
Default value	i18n setter	-	Sets the initial selected value when the component first renders (uncontrolled mode).
Value	i18n setter	-	Sets the current selected value (controlled mode).
Size	Radio group (Small | Medium | Large)	-	Sets the size of the Select component.
Mode	Radio group (Single | Multiple | Tag)	Single	Controls the selection mode. Single allows one option. Multiple allows many. Tag allows free-form tag entry.
Allow clearing	Toggle switch	Off	When enabled, shows a clear button to remove the selected value.
Allow searching	Toggle switch	Off	When enabled, shows a search box within the dropdown.
FollowTrigger	Toggle switch	Off	When enabled, the dropdown scrolls with the trigger element.
Disabled	Toggle switch	Off	When enabled, prevents user interaction with the Select.
DataSource	Switch Setter (MasterCode setter / Array editor / Variable input)	-	Defines the list of radio options. Refer to DataSource.

DataSource

The DataSource section defines the list of radio options. Each item in the array has the following properties:

Property	UI Control	Default	Description
Label	i18n setter	Auto-generated	Sets the display text of the radio option. Supports internationalisation.
Value	i18n setter	Auto-generated	Sets the underlying value of the radio option.

You can click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove an option, or use the grip icon to reorder options. Click "Add an item +" to add a new option.

Other configurations

The Other configurations collapsible section provides additional display settings:

Property	UI Control	Default	Description
Empty value content	i18n setter	No options	Sets the text displayed when no options match. Supports internationalisation.
Show border	Toggle switch	On	Controls whether the Select input has a visible border.
Auto width	Toggle switch	On	When enabled, automatically adjusts the dropdown width to match the trigger element.
Show arrow	Toggle switch	On	Controls the visibility of the dropdown arrow.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Select without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Select's supported events:

   • onChange — Triggered when the selected value changes
   • onVisibleChange — Triggered when the dropdown visibility changes
   • onRemove — Triggered when a tag is removed (in Tag mode)
   • onSearch — Triggered when text is entered in the search box
   • valueRender — Customises the rendering of the selected value display

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the new selected value:

onChange(value) {
  // value: the newly selected value
}

The onVisibleChange handler receives the visibility state:

onVisibleChange(visible) {
  // visible: true when the dropdown opens, false when it closes
}

The onRemove handler receives the removed item:

onRemove(item) {
  // item: the tag item that was removed
}

The onSearch handler receives the search keyword:

onSearch(value) {
  // value: the current search input text
}

The valueRender function customises how the selected value is displayed:

valueRender(item) {
}

Advanced

For more information, refer to Advanced.

Switch

The Switch component displays a toggle control for switching between on and off states. It supports controlled and uncontrolled modes, custom checked and unchecked labels, and configurable size. In the App Designer, select a Switch on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the structural and behavioural properties of the Switch.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Checked	Toggle switch	Off	Sets the checked state of the Switch (controlled mode).
DefaultChecked	Toggle switch	Off	Sets the initial checked state when the component first renders (uncontrolled mode).
Disabled	Toggle switch	Off	When enabled, prevents user interaction with the Switch.
Size	Radio group (Medium | Small)	Medium	Sets the size of the Switch.
Checked label	i18n setter	-	Sets the label displayed inside the Switch when it is in the checked (on) state. Supports internationalisation.
Unchecked label	i18n setter	-	Sets the label displayed inside the Switch when it is in the unchecked (off) state. Supports internationalisation.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Switch without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Switch's supported events:

   • onChange — Triggered when the switch state changes
   • onClick — Triggered when the switch is clicked
   • onKeyDown — Triggered when a keyboard key is pressed while the switch has focus

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the new checked state and the event:

onChange(checked, e) {
  // checked: true when switched on, false when switched off
  // e: DOM event object
}

The onClick handler receives the event:

onClick(e) {
  // e: DOM event object
}

The onKeyDown handler receives the event:

onKeyDown(e) {
  // e: DOM event object
}

Advanced

For more information, refer to Advanced.

Tab

The Tab component displays a set of tabbed panels for organising content into switchable sections. Each tab item has a title, optional icon, and a unique key. In the App Designer, select a Tab on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the structural and behavioural properties of the Tab.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Tab items	Array editor	-	Defines the list of tab items. See Tab item configuration.
Active key	i18n setter	-	Sets the key of the currently active tab (controlled mode). When set, the Tab is a controlled component and cannot be switched by the user without this value updating.
Default active key	i18n setter	-	Sets the key of the tab that is active on first render (uncontrolled mode).
Lazy load	Toggle switch	Off	When enabled, tab content is not rendered until the tab is first selected by the user.
Label style	Dropdown (Pure | Wrapped | Text | Capsule)	Pure	Defines the visual style of the tab labels.
Size	Radio group (Small | Medium)	Medium	Sets the size of the Tab component.

Tab item configuration

Each item in the Tab items array editor has the following properties:

Property	UI Control	Default	Description
Name	i18n setter	Auto-generated	Sets the display title of the tab. Supports internationalisation.
key	i18n setter	Auto-generated	Sets a unique key for the tab item, used to identify the active tab.
Icon	Icon selector	-	Sets an optional icon displayed in the tab label.
Icon size	Dropdown (XXS | XS | Small | Medium | Large | XL | XXL | XXXL)	Medium	Sets the size of the tab icon.
Disabled	Toggle switch	Off	When enabled, the tab is visible but cannot be selected.

You can click the edit (pencil) icon to open the item editor, click the delete (trash) icon to remove an item, or use the grip icon to reorder items. Click "Add an item +" to add a new tab item.

Advanced settings

The Advanced settings collapsible section provides additional options:

Property	UI Control	Default	Description
Unmount inactive tab	Toggle switch	Off	When enabled, inactive tab panels are removed from the DOM when not displayed, freeing memory.
Add icon	Toggle switch	Off	When enabled, displays an add icon in the tab navigation bar.
Render badge	Toggle switch	Off	When enabled, shows a badge on the tab label.
Count	Text input	-	Sets the count value displayed in the badge. Only visible when Render badge is enabled.
Dot	Toggle switch	On	When enabled, displays the badge as a dot rather than a count number. Only visible when Render badge is enabled.
Custom badge rendering	Function Binding	-	Binds a custom function (renderBadge) for rendering the badge. Only visible when Render badge is enabled.
Custom rendering	Function Binding	-	Binds a custom render function (tabRender) for individual tab items. This will take effect when the Render badge option is disabled.
Additional rendering in navigation	Switch Setter (String setter / Slot setter / Variable input)	-	Renders additional content in the tab navigation bar.

Tab.Item

The Tab.Item sub-component represents a single panel within a Tab component. Each Tab.Item corresponds to one tab and its associated content area. Select a Tab.Item on the canvas or in the Component Tree to configure its properties.

Its Props tab contains the properties of the Tab.Item.

Property	UI Control	Default	Description
Title	Text input	Auto-generated	Sets the display title shown on the tab label.
Key	Text input	Auto-generated	Sets a unique key for the tab item, used to identify it within the parent Tab component.
Closeable	Toggle switch	Off	When enabled, a close icon is displayed on the tab label, allowing the user to remove the tab.
Disabled	Toggle switch	Off	When enabled, the tab is visible but cannot be selected by the user.

Events

The Events tab allows you to bind event handlers to the Tab without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Tab's supported events:

   • onClick — Triggered when a tab label is clicked
   • onChange — Triggered when the active tab changes

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onClick handler receives the key of the clicked tab:

onClick(key) {
  // key: the key of the tab that was clicked
}

The onChange handler receives the key of the newly active tab:

onChange(key) {
  // key: the key of the newly active tab
}

Advanced

For more information, refer to Advanced.

TimePicker

The TimePicker component displays an input for selecting a time value via a time selection panel. It supports configurable formats, step sizes for hours, minutes, and seconds, and the ability to disable specific time values. In the App Designer, select a TimePicker on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the visual and behavioural properties of the TimePicker.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Default value	Time setter	-	Sets the initial time value when the component first renders (uncontrolled mode).
Time value	Time setter	-	Sets the current time value (controlled mode).
Size	Radio group (Small | Medium | Large)	Medium	Sets the size of the TimePicker input.
Format	Radio group (Hh:mm:ss | Hh:mm | Mm:ss)	Hh:mm:ss	Sets the time format displayed in the input and picker panel.
Hourly step	Number input	1	Sets the step interval for hour selection in the picker panel.
Minutely step	Number input	1	Sets the step interval for minute selection in the picker panel.
Secondly step	Number input	1	Sets the step interval for second selection in the picker panel.
Allow clearing	Toggle switch	On	When enabled, shows a clear button to remove the selected time.
Disabled hours	Function Binding	-	Specifies a function that returns whether a given hour index should be disabled in the picker.
Disabled minutes	Function Binding	-	Specifies a function that returns whether a given minute index should be disabled in the picker.
Disabled seconds	Function Binding	-	Specifies a function that returns whether a given second index should be disabled in the picker.

Disabled hours

The Disabled hours property accepts a function with the following signature:

disabledHours(index) {
  return [1, 5, 10, 15, 20].indexOf(index) >= 0;
}

Disabled minutes

The Disabled minutes property accepts a function with the following signature:

disabledMinutes(index) {
  return [10, 20, 30, 40, 50].indexOf(index) >= 0;
}

Disabled seconds

The Disabled seconds property accepts a function with the following signature:

disabledSeconds(index) {
  return [10, 20, 30, 40, 50].indexOf(index) >= 0;
}

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the TimePicker without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the TimePicker's supported events:

   • onChange — Triggered when the selected time value changes
   • onVisibleChange — Triggered when the time picker panel opens or closes

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler receives the new time value:

onChange(value) {
  // value: the newly selected time value (moment object or time string)
}

The onVisibleChange handler receives the visibility state:

onVisibleChange(visible) {
  // visible: true when the panel opens, false when it closes
}

Advanced

For more information, refer to Advanced.

Transfer

The Transfer component displays two panels — a source list and a target list — allowing users to move items between them. It supports normal and simple modes, optional search, drag-and-drop sorting, and a configurable datasource. In the App Designer, select a Transfer on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the structural and behavioural properties of the Transfer.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Current value	Text input	-	Sets the current value of the Transfer component.
Default value	Text input	-	Sets the default value of the Transfer component.
Mode	Radio group (Normal | Simple)	Normal	Controls the transfer layout. Normal shows two panels with move buttons. Simple shows a simplified layout.
Allow multiple select	Toggle switch	Off	When enabled, shows a select-all checkbox for each panel.
Allow searching	Toggle switch	Off	When enabled, shows a search box above each panel.
Search box placeholder	i18n setter	-	Sets the placeholder text for the search input. Only visible when Allow searching is enabled. Supports internationalisation.
Custom search function	Function Binding	-	Binds a custom function (filter) to filter items in the search results. Only visible when Allow searching is enabled.
Allow sorting	Toggle switch	Off	When enabled, allows items in the target panel to be reordered by dragging.
Datasource	JSON setter	-	Specifies the list of all available items. Each item has a label, value, and optional disabled property.
Default checked values on the left	JSON setter	-	Sets the item values that are pre-checked in the left (source) panel on first render.
Default checked values on the right	JSON setter	-	Sets the item values that are pre-checked in the right (target) panel on first render.
Panel title	JSON setter	["TitleLeft", "TitleRight"]	Sets the titles displayed above the left and right panels. Click "Edit data" to open the JSON editor.
Empty value content	i18n setter	Not Found	Sets the text displayed when a panel has no items. Supports internationalisation.
Item rendering	Function Binding	-	Binds a custom render function (itemRender) for each item in the list.

Item rendering

The Item rendering property accepts a function with the following signature:

itemRender(data) {
  return <button>{data.label}</button>;
}

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Transfer without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Transfer's supported events:

   • onChange — Triggered when items are moved between panels
   • onSearch — Triggered when text is entered in a search box
   • onSort — Triggered when items are reordered by dragging

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onChange handler is triggered when the value changes:

onChange(value, data, extra) {
  // value: array of item values currently in the right panel
  // data: array of TransferDataItem objects in the right panel
  // extra: additional parameters
}

The onSearch handler is triggered when the search input value changes:

onSearch(searchedValue, position) {
  // searchedValue: the current search input text
  // position: the panel position being searched
}

The onSort handler is triggered when items are reordered by dragging:

onSort(value, position) {
  // value: the reordered array of item values in the right panel
  // position: the panel position being sorted, either 'left' or 'right'
}

Advanced

For more information, refer to Advanced.

TreeSelect

The TreeSelect component displays a dropdown input for selecting one or more values from a hierarchical tree structure. It supports single and multiple selection, optional search, and a configurable datasource. In the App Designer, select a TreeSelect on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the structural and behavioural properties of the TreeSelect.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Default value	Switch setter (Array setter / i18n setter / Variable input)	-	Sets the initial selected value(s) when the component first renders (uncontrolled mode). Supports internationalisation.
Value	Switch setter (Array setter / i18n setter / Variable input)	-	Sets the current selected value(s) (controlled mode). Supports internationalisation.
Datasource	Switch Setter (JSON setter / MasterCode setter / Variable input)	-	Specifies the tree data.
Size	Radio group (Small | Medium | Large)	Medium	Sets the size of the TreeSelect input.
Placeholder	i18n setter	Please select	Sets the placeholder text displayed when no value is selected. Supports internationalisation.
Label	i18n setter	-	Sets a custom inline label displayed inside the select input. Supports internationalisation.
Empty value content	i18n setter	Not Found	Sets the text displayed when no matching tree nodes are found. Supports internationalisation.
Disabled	Toggle switch	Off	When enabled, prevents user interaction with the TreeSelect.
Show arrow	Toggle switch	On	Controls the visibility of the dropdown arrow.
Show border	Toggle switch	On	Controls whether the input has a visible border.
Allow clearing	Toggle switch	Off	When enabled, shows a clear button to remove the selected value.
Read only	Toggle switch	Off	When enabled, the component is in read-only mode and cannot be edited.
Follow Trigger	Toggle switch	Off	When enabled, the dropdown scrolls with the trigger element.
Auto width	Toggle switch	On	When enabled, the dropdown width is aligned with the trigger element.
Allow searching	Toggle switch	Off	When enabled, shows a search box within the dropdown.
Allow multiple select	Toggle switch	Off	When enabled, allows more than one tree node to be selected.
Auto open	Toggle switch	Off	When enabled, the dropdown opens automatically on first render.
Preview mode	Toggle switch	Off	When enabled, displays the component in a read-only preview state.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the TreeSelect without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the TreeSelect's supported events:

   • onVisibleChange — Triggered when the dropdown opens or closes
   • onSearchClear — Triggered when the search input is cleared
   • onSearch — Triggered when text is entered in the search box
   • onChange — Triggered when the selected value changes

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onVisibleChange handler receives the visibility state and trigger type:

onVisibleChange(visible, type) {
  // visible: true when the dropdown opens, false when it closes
  // type: the type of action that triggered the visibility change
}

The onSearchClear handler is called when the search box is cleared:

onSearchClear() {
  // Called when the search input is cleared
}

The onSearch handler receives the search keyword:

onSearch(keyword) {
  // keyword: the current search input text
}

The onChange handler receives the new selected value:

onChange(value, data) {
  // value: the newly selected value 
  // data: the full data object of the selected item 
}

Advanced

For more information, refer to Advanced.

Upload

The Upload component provides a file upload interface. It supports button and card upload shapes, multiple list display types, auto-upload, drag-and-drop, multiple file selection, and configurable file type and count limits. In the App Designer, select an Upload on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the structural and behavioural properties of the Upload.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
Change component type	Dropdown (Input | TextArea | Select | Upload | Number Input | DatePicker | Password Input | Checkbox Group| Radio Group)	Upload	Switches the component to a different input type. The current component is replaced with the selected type.
Default value	JSON setter	-	Sets the initial list of uploaded files when the component first renders.
Value	JSON setter	-	Sets the current list of uploaded files (controlled mode).
Auto upload	Toggle switch	On	When enabled, files are automatically uploaded to the server as soon as they are selected.
Draggable	Toggle switch	Off	When enabled, users can drag and drop files onto the component to upload them.
Multiple	Toggle switch	Off	When enabled, multiple files can be selected in the file picker simultaneously.
useDataURL	Toggle switch	Off	When enabled, selected files are previewed locally using a data URL before uploading.
Shape	Radio group (Button | Card)	Card	Sets the visual shape of the upload trigger. Button shows a button. Card shows a card-style drop zone.
List type	Radio group (Text | Image | Card)	-	Sets the display style of the uploaded file list.
Target URL	Text input	-	Sets the server URL to which files are uploaded.
File type	Text input	-	Restricts the types of files that can be selected, based on MIME type or file extension (for example, .jpg,.png).
Max number of files	Number input	-	Sets the maximum number of files that can be uploaded in a single operation.
Disabled	Toggle switch	Off	When enabled, disables the upload component and prevents file selection.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Upload without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Upload's supported events:

   • beforeUpload — Triggered before an upload begins; return false to cancel
   • onProgress — Triggered during an upload as the file is being sent to the server
   • onSuccess — Triggered when a file upload completes successfully
   • onError — Triggered when a file upload fails
   • onSelect — Triggered when the user selects files in the file picker
   • onDrop — Triggered when files are dropped onto the component
   • onChange — Triggered when the upload status or file list changes
   • afterSelect — Triggered after file selection, used for file validation
   • onRemove — Triggered when a file is removed from the list
   • onPreview — Triggered when a file in the list is previewed

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The beforeUpload handler receives the file and options; return false to prevent the upload:

beforeUpload(file, options) {
  // file: the file object about to be uploaded
  // options: upload options
  // Return false to cancel the upload
}

The onProgress handler receives the file with current progress information:

onProgress(file) {
  // file: the file object with current upload progress
}

The onSuccess handler receives the uploaded file and current file list:

onSuccess(file, value) {
  // file: the successfully uploaded file object
  // value: the current file list
}

The onError handler receives the file with error details and the current file list:

onError(file, value) {
  // file: the file object with error information
  // value: the current file list
}

The onSelect handler receives the selected files:

onSelect(files) {
  // files: the array of files selected by the user
}

The onDrop handler receives the dropped files:

onDrop(files) {
  // files: the array of files dropped onto the component
}

The onChange handler receives the file event object:

onChange(info) {
  // info: file event object containing the updated file list and status
}

The afterSelect handler receives the file; return false to prevent uploading:

afterSelect(file) {
  // file: the selected file object
  // Return false to prevent the file from being uploaded
}

The onRemove handler receives the file to be removed; return false to block deletion:

onRemove(file) {
  // file: the file object to be removed
  // Return false or Promise.resolve(false) to prevent deletion
}

The onPreview handler receives the file to be previewed:

onPreview(file) {
  // file: the file object to preview
}

Advanced

For more information, refer to Advanced.

Collapse

The Collapse component displays a set of collapsible panels that can be expanded or collapsed by the user. It supports accordion mode (where only one panel is open at a time), configurable datasource, and controlled or default expanded keys. In the App Designer, select a Collapse on the canvas to configure it through four tab pages in the Settings panel: Props, Styles, Events, and Advanced.

Props

The Props tab contains the structural and behavioural properties of the Collapse.

If a property displays the Variable Binding icon , that means it supports variable binding.

Property	UI Control	Default	Description
DataSource	Switch Setter (JSON setter / Expression input / Variable input)	-	Specifies the list of collapse panels. Each item defines a panel's content and key.
Default expanded keys	JSON setter	["1"]	Sets the keys of panels that are expanded on first render (uncontrolled mode).
Expanded keys	JSON setter	-	Sets the keys of currently expanded panels (controlled mode).
Disabled	Toggle switch	Off	When enabled, prevents all panels from being expanded or collapsed.
Accordion	Toggle switch	Off	When enabled, only one panel can be expanded at a time; expanding one panel collapses all others.

Collapse.Panel

The Collapse.Panel sub-component represents a single collapsible panel within a Collapse component. Select a Collapse.Panel on the canvas or in the Component Tree to configure its properties.

Its Props tab contains the properties of the Collapse.Panel.

Property	UI Control	Default	Description
Title	i18n setter	Auto-generated (for example, Panel1, Panel2)	Sets the display title shown on the panel header. Supports internationalisation.
Disabled	Toggle switch	Off	When enabled, the panel cannot be expanded or collapsed by the user.
Is Expanded	Toggle switch	Off	When enabled, the panel is expanded by default.
Key	i18n setter	Auto-generated	Sets a unique key for the panel, used to identify it within the parent Collapse component. Supports internationalisation.

Advanced (Props sub-section)

Within the Props tab, an Advanced collapsible section provides:

Property	UI Control	Default	Description
ID	Text input	Auto-generated	Unique HTML identifier for the element. Auto-generated from the component title (non-alphanumeric characters are replaced by underscores). You can override this value manually.
Name	Text input	Auto-generated	HTML name attribute for form identification. Auto-generated from the component title. You can override this value manually.

Styles

For more information, refer to Styles.

Events

The Events tab allows you to bind event handlers to the Collapse without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the Collapse's supported events:

   • onExpand — Triggered when a panel is expanded or collapsed

2. The Event Binding window opens, allowing you to select an event and apply parameter settings.

3. After selecting an event, it appears in the Existing event table.

   You can click the gear icon to edit the action, or click the trash bin icon to delete the binding.

Handler signatures

The onExpand handler receives the expanded keys and the triggering panel key:

onExpand(expandedKeys, key) {
  // expandedKeys: array of keys for all currently expanded panels
  // key: the key of the panel that was expanded or collapsed
}

Advanced

For more information, refer to Advanced.

Last updated on 20 May 2026