Advance input components

This article describes components in Components Library > Advance Input.

Text

The Text component renders a styled inline text element with configurable typographic scale, formatting options (bold, italic, underline, strikethrough, code, highlight), and support for internationalized content. In the App Designer, select a Text 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 and formatting properties of the Text component.

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

Property	UI Control	Default	Description
Text	i18n setter	-	Sets the text content to display. Supports internationalisation.
Font size	Dropdown (Default | h1 | h2 | h3 | h4 | h5 | h6 | body1 | body2 | Caption | Overline)	Default	Sets the typographic style and size of the text. Default (inherit) uses the inherited font size from the parent element.
Highlight	Toggle switch	Off	Applies a highlight (mark) style to the text.
Code inline	Toggle switch	Off	Applies inline code formatting to the text.
Strikethrough	Toggle switch	Off	Applies a strikethrough line through the text.
Underline	Toggle switch	Off	Applies an underline to the text.
Strong	Toggle switch	Off	Applies bold formatting to the text.

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 Text 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 Text component without writing boilerplate code.

Binding an event

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

   • onClick — Triggered when the text 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.

Event Binding window

Click the settings (gear) icon on an existing event to open the Event Binding window. This window contains:

• Select event — A left panel with two tabs:

  • Built-in function — Built-in event handlers provided by the platform
  • Event — A searchable list of all available event handlers in the current page, including custom ones. Click New Event at the top to create a new handler. Select an existing handler to bind it to this event.

• Event name — A text input displaying the name of the selected handler. You can rename it here.

• Advanced params settings — A toggle switch (default: Disable). The extended parameters are appended as a separate input parameter in JSON format after the original transparent transmission parameters. When enabled, a JSON code editor appears where you can define the extra parameters.

• Click Confirm to save the binding, or Cancel to discard changes.

Handler signatures

The onClick handler receives the click event:

onClick(event) {
  // Handle text click
}

Advanced

For more information, refer to Advanced.

FullCalendar

The FullCalendar component provides a full-featured interactive calendar with support for multiple view types (month, week, day), event management, date selection, and custom view configuration. In the App Designer, select a FullCalendar 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 view, toolbar, event, and display properties of the FullCalendar.

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

Property	UI Control	Default	Description
Initial view	Switch Setter (Radio group (Day | Week | Month) / String setter / Variable input)	Month	Sets the calendar view displayed on initial render.

Header toolbar

The Header toolbar group configures the navigation controls displayed at the top of the calendar:

Property	UI Control	Default	Description
Left	Text input	prev,next today	Sets the controls displayed on the left side of the toolbar.
Center	Text input	title	Sets the content displayed in the center of the toolbar.
Right	Text area	dayGridMonth,timeGridWeek,timeGridDay	Sets the controls displayed on the right side of the toolbar.

Events

The Events section is an array editor that allows you to add, remove, and reorder calendar events. Click "Add an item +" to add a new event. Each event item has:

Property	UI Control	Default	Description
Title	Text input	event	Sets the title text displayed on the event.
Start	Date setter	Auto-generated	Sets the start date and time of the event (ISO 8601 format).
End	Date setter	Auto-generated	Sets the end date and time of the event (ISO 8601 format).
Display	Dropdown (Auto | Background)	Auto	Sets the rendering style. Use background to render the event as a background highlight.
Color	Color picker	#5aaeb6	Sets the color of the event.
Description	Text input	Description	Sets a description for the event.
Editable	Toggle switch	On	Allows this event to be dragged and resized in the calendar.
All day	Toggle switch	Off	Marks the event as an all-day event, hiding the time portion.

DayMaxEvents and Weekends

Property	UI Control	Default	Description
DayMaxEvents	Number input or Toggle switch	5	Limits the number of events displayed per day in month view. Set a number to set a specific limit.
Weekends	Toggle switch	On	Controls whether weekend days (Saturday and Sunday) are displayed in the calendar.

Views

The Views section is an array editor that allows you to define custom named views. Click "Add an item +" to add a new view definition. Each view item has:

Property	UI Control	Default	Description
Name	Text input	-	Sets the unique identifier for this view, used in the toolbar configuration.
Type	Radio group (Day | Time)	-	Sets the base view type. Accessible by clicking the pencil icon on a view item.
ButtonText	i18n setter	-	Sets the label displayed for this view in the toolbar. 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 FullCalendar without writing boilerplate code.

Binding an event

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

   • dateClick — Triggered when the user clicks a date or time slot
   • select — Triggered when the user selects a date range
   • eventClick — Triggered when the user clicks a calendar event
   • eventMouseEnter — Triggered when the mouse pointer enters a calendar event
   • eventMouseLeave — Triggered when the mouse pointer leaves a calendar event

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 dateClick handler receives date click information:

dateClick(info) {
  // info.date: the clicked date
  // info.dateStr: ISO string of the clicked date
  // info.allDay: whether the click was on an all-day slot
}

The select handler receives the selected date range:

select(info) {
  // info.start: selection start date
  // info.end: selection end date
  // info.allDay: whether the selection is all-day
}

The eventClick handler receives the clicked event:

eventClick(info) {
  // info.event: the FullCalendar event object
}

The eventMouseEnter handler is called when the mouse enters an event:

eventMouseEnter(info) {
  // info.event: the FullCalendar event object
}

The eventMouseLeave handler is called when the mouse leaves an event:

eventMouseLeave(info) {
  // info.event: the FullCalendar event object
}

Advanced

For more information, refer to Advanced.

MceEditor

The MceEditor component provides a rich text editor supporting a configurable toolbar, inline editing mode, character limits, and rollback behavior. In the App Designer, select a MceEditor 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 editor configuration properties of the MceEditor.

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

Property	UI Control	Default	Description
Inline	Toggle switch	Off	Enables inline editing mode, rendering the editor directly within the surrounding content rather than as a standalone editor container.
Initial value	Switch Setter (String setter / Code setter / Variable input)	<p>This is the initial <b>content</b> of the editor</p>	Sets the initial HTML content of the editor on first render. Subsequent re-renders do not reset this value.
Value	Switch Setter (String setter / Code setter / Variable input)	-	Sets the controlled HTML content of the editor.
Limit character count	Number input (min: 1)	-	Sets the maximum number of characters allowed in the editor. When the limit is reached, the onLimitError event fires.
Tag name	Text input	-	Sets the HTML element used to wrap the inline editor. Only available when Inline is enabled.
Toolbar	Switch Setter (String setter / Bool setter / Array setter / Select setter / Variable input)	undo redo | styles | bold italic underline backcolor forecolor | lineheight | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | removeformat | table | print preview media fullscreen | emoticons code help	Configures the editor toolbar. Accepts a space-separated string of button names, a boolean to show or hide the default toolbar, or a multi-select list of toolbar items.
Disabled	Toggle switch	Off	Sets the editor to read-only mode, preventing any editing.
Textarea name	Text input	-	Sets the name attribute of the underlying <textarea> element.
Rollback	Switch Setter (Radio group setter / Number setter / Variable input)	False	Configures undo/redo rollback behaviour.

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 MceEditor without writing boilerplate code.

Binding an event

1. Click "Component native event" to select from the MceEditor's supported events. The following commonly used events are available:

   Editor lifecycle:

   • onInit — Triggered when the editor has fully initialized
   • onEditorChange — Triggered when the editor content changes (custom handler)
   • onLimitError — Triggered when the character limit is exceeded

   Content events:

   • onChange — Triggered when the editor content is committed (dirty state)
   • onGetContent — Triggered when content is retrieved from the editor
   • onBeforeSetContent — Triggered before content is set
   • onSaveContent — Triggered when the editor content is saved
   • onBeforeGetContent — Triggered before content is retrieved

   Focus and keyboard events:

   • onFocus / onFocusIn / onFocusOut / onBlur — Focus-related events
   • onKeyDown / onKeyPress / onKeyUp — Keyboard events

   Mouse and interaction events:

   • onClick / onDblclick — Click events
   • onMouseDown / onMouseUp / onMouseMove / onMouseOver / onMouseOut / onMouseEnter / onMouseLeave — Mouse events
   • onDrag / onDragEnd / onDragOver — Drag events
   • onContextMenu / onCopy / onCut / onPaste — Clipboard and context events

   Undo/redo events:

   • onAddUndo / onBeforeAddUndo / onUndo / onRedo — Undo history events
   • onDirty — Triggered when the editor enters a dirty (modified) state

   Object events:

   • onObjectResizeStart / onObjectResized / onObjectSelected — Events for embedded objects (images, media)

   Command events:

   • onExecCommand / onBeforeExecCommand — Triggered when an editor command is executed
   • onSelectionChange — Triggered when the selection changes
   • onSubmit — Triggered when the form containing the editor 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 onEditorChange handler is called when the content changes:

onEditorChange(newValue, editor) {
  // newValue: the current HTML string
  // editor: the editor instance
}

The onLimitError handler is called when the character limit is exceeded:

onLimitError() {
  // Handle character limit exceeded
}

Advanced

For more information, refer to Advanced.

QuillEditor

The QuillEditor component provides a rich text editor with support for tables, a configurable toolbar, character limits, placeholder text, and read-only mode. In the App Designer, select a QuillEditor 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 editor configuration properties of the QuillEditor.

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

Property	UI Control	Default	Description
Placeholder	Text input	-	Sets the placeholder text displayed when the editor is empty.
Read only	Toggle switch	Off	Disables editing, rendering the editor content as read-only.
Limit character count	Number input (min: 1)	10000	Sets the maximum number of characters allowed in the editor.
Default value	Switch Setter (String setter / Code setter / Variable input)	-	Sets the initial HTML content of the editor.
Toolbar	Switch Setter (Select setter / Bool setter / Variable input)	Bold, Italic, Underline, Strike, Blockquote, Code block, Header dropdown, Size dropdown, Ordered list, Bullet list, Indent 1, Indent +1, Color, Background, Align, Link, Image, Video, Font dropdown, Subscript, Superscript, Direction rtl, Table, Clean	Configures the editor toolbar. Use the multi-select list to choose specific formatting options, or toggle to false to hide the toolbar entirely.

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 QuillEditor without writing boilerplate code.

Binding an event

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

   • onChange — Triggered when the editor HTML content changes
   • onTextChange — Triggered when the document text changes, providing the change delta
   • onSelectionChange — Triggered when the user selection changes
   • onEditorChange — Triggered for both text changes and 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 updated HTML content:

onChange(html) {
  // html: the current editor content as an HTML string
}

The onTextChange handler receives the change delta and updated HTML:

onTextChange(delta, oldDelta, source, html) {
  // delta: the change delta
  // oldDelta: the previous content delta
  // source: 'user' or 'api'
  // html: the updated HTML string
}

The onSelectionChange handler receives the selection range:

onSelectionChange(range, oldRange, source) {
  // range: the new selection range (null if editor lost focus)
  // oldRange: the previous selection range
  // source: 'user' or 'api'
}

The onEditorChange handler is called for both text and selection changes:

onEditorChange(eventName, args, source) {
  // eventName: 'text-change' or 'selection-change'
  // args: event-specific arguments array
  // source: 'user' or 'api'
}

Advanced

For more information, refer to Advanced.

Last updated on 20 May 2026