Information display components

This article describes components in Components Library > Information Display.

Audio

The Audio component embeds an HTML5 audio player that streams audio from a specified URL. It renders the browser's native audio control bar, allowing users to play, pause, and adjust volume. In the App Designer, select an Audio 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 source property of the Audio.

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

Property	UI Control	Default	Description
Audio URL	Switch Setter (String setter / Audio setter / Variable input)	/editor/lowcode-assets/images/birds_chirping.mp3	Specifies the source URL or file path of the audio file to be played.

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

Binding an event

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

   • onPlay — Triggered when audio playback begins
   • onPause — Triggered when audio playback is paused
   • onEnded — Triggered when audio playback reaches the end of the file

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 onPlay handler is called when the audio starts playing:

onPlay(event) {
  // Handle audio play
}

The onPause handler is called when the audio is paused:

onPause(event) {
  // Handle audio pause
}

The onEnded handler is called when the audio finishes playing:

onEnded(event) {
  // Handle audio end
}

Advanced

For more information, refer to Advanced.

Best practices

1. Always Provide a Valid URL

   • Set the Audio URL to a publicly accessible or relative path to avoid playback errors
   • Use relative paths (e.g., /editor/lowcode-assets/...) for assets bundled with the application

2. Event Handling

   • Use onEnded to trigger follow-on actions such as advancing to the next track or updating a playback state variable
   • Use onPause and onPlay to synchronize UI elements such as play/pause button icons with the audio state

Avatar

The Avatar component displays a circular or square avatar that can show an image, an icon, or text initials. It is commonly used in user profiles, comment sections, and page headers to visually represent a person or entity. In the App Designer, select an Avatar 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 Avatar.

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

Property	UI Control	Default	Description
Icon	Icon selector	smile	Sets an icon to display inside the avatar. If Src is also set, the image takes precedence.
Content	i18n setter	-	Sets the text displayed inside the avatar, typically used for initials (e.g., AB). Supports internationalisation.
Size	Radio group (Small | Medium | Large)	medium	Controls the overall size of the avatar.
Shape	Radio group (Circle | Square)	circle	Controls the shape of the avatar container.
Src	Text input	-	Specifies the URL of an image to display as the avatar. When set, the image is shown in preference to Icon or Content.

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

Binding an event

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

   • onError — Triggered when the image specified by Src fails to load

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 onError handler is called when the avatar image fails to load:

onError(event) {
  // Handle image load failure, e.g., fall back to initials
}

Advanced

For more information, refer to Advanced.

Best practices

1. Content Fallback Priority

   • When Src is provided, it takes precedence over Icon and Content
   • Provide a fallback Icon or Content value so the avatar displays meaningfully if the image fails to load

2. Size Consistency

   • Use a consistent Size across all avatars within the same list or group for a uniform appearance
   • When an Avatar is placed inside a Form.Item, the size is automatically inherited from the parent

3. Shape Choice

   • Use circle (default) for user portraits and profile pictures
   • Use square for entity logos, product thumbnails, or brand icons

Badge

The Badge component displays a small numeric count or status indicator that overlays a child element, typically used to draw attention to unread notifications, pending items, or status changes. In the App Designer, select a Badge 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 display and behaviour properties of the Badge.

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

Property	UI Control	Default	Description
Count	Text input	-	Displays a numeric value on the badge. When the value exceeds Max count, a + suffix is appended (e.g., 99+).
Content	i18n setter	-	Sets custom content displayed within the badge, overriding the numeric Count. Supports internationalisation.
Max count	Switch Setter (Number setter / i18n setter / Variable input)	-	Sets the maximum numeric value displayed. When Count exceeds this threshold, the badge shows the threshold value followed by +. Supports internationalisation.
Show zero	Toggle switch	On	Controls whether the badge is displayed when Count is set to 0.
Show dot	Toggle switch	Off	When enabled, displays a small red dot instead of a numeric value. Useful for indicating activity without showing a count.

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

Binding an event

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

   • onClick — Triggered when the Badge 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 is called when the badge is clicked:

onClick(event) {
  // Handle badge click, e.g. navigate to notifications
}

Advanced

For more information, refer to Advanced.

Best practices

1. Use Show dot for Minimal Indicators

   • Enable Show dot when you only need to signal that new activity exists, without showing an exact count
   • Disable Show dot and use Count when the numeric value is meaningful to the user

2. Set an Appropriate Max count

   • Use the default 99 for most notification scenarios
   • Reduce Max count (e.g., to 9) for compact UI elements where a two-digit number would overflow

3. Bind Count Dynamically

   • Bind Count to a variable that is updated in real time (e.g., an unread message count from an API) to keep the badge current

Calendar

The Calendar component displays an interactive date grid for browsing and selecting dates. It supports three visual shapes, configurable default values, and custom rendering functions for individual date and month cells. In the App Designer, select a Calendar 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 display and behaviour properties of the Calendar.

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

Property	UI Control	Default	Description
Shape	Radio group (Card | Full screen | Panel)	card	Specifies the visual layout of the calendar. Card renders a compact card view. Full screen renders a full-width calendar. Panel renders a stand-alone panel without chrome.
Show other month	Toggle switch	Off	Controls whether dates from the previous and next months are shown in the current month's grid.
Default value	Date picker	-	Sets the initially selected date when the calendar first renders.
Date cell render	Function Binding	-	A custom rendering function that replaces the default content of each date cell. The function receives a Moment object and must return a React node.
Month cell render	Function Binding	-	A custom rendering function that replaces the default content of each month cell. The function receives a Moment object and must return a React node.
Disabled date	Function Binding	-	A function that determines which dates are non-selectable. Receives a date object and the current view type (year, month, or date) and must return a boolean.

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

Binding an event

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

   • onSelect — Triggered when a date cell is selected
   • onVisibleMonthChange — Triggered when the displayed month changes
   • onModeChange — Triggered when the calendar switches between date, month, and year panel modes

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 onSelect handler is called when a date is selected:

onSelect(value) {
  // value: Moment object of the selected date
}

The onVisibleMonthChange handler is called when the displayed month changes:

onVisibleMonthChange(value, reason) {
  // value: Moment object of the newly displayed month
  // reason: string describing what triggered the change
}

The onModeChange handler is called when the panel mode changes:

onModeChange(mode) {
  // mode: 'date' | 'month' | 'year'
}

Advanced

For more information, refer to Advanced.

Best practices

1. Choose the Right Shape

   • Use fullscreen for dedicated date-browsing pages
   • Use card to embed the calendar within a dashboard or side panel
   • Use panel when the calendar is part of a custom date picker or popup

2. Use Disabled date for Constraints

   • Use the Disabled date function to prevent users from selecting dates outside a valid range (e.g., no past dates for a booking form)

3. Custom Cell Rendering

   • Use Date cell render to display additional data within date cells, such as appointment counts or availability indicators

Carousel

The Carousel component displays a slideshow of content panels that cycle through one at a time. It supports configurable navigation arrows, dot indicators, autoplay, drag interaction, infinite looping, and both horizontal and vertical slide directions. In the App Designer, select a Carousel 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 display and interaction properties of the Carousel.

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

Property	UI Control	Default	Description
Slides to show	Number input	1	Sets the number of slides visible at one time.
Slides to scroll	Number input	-	Sets the number of slides to advance per navigation action.
Speed	Number input	600	Sets the transition animation duration in milliseconds.
Slide index	Number input	-	Sets the currently active slide by its zero-based index.
Auto height	Toggle switch	Off	When enabled, the carousel adjusts its height to match the active slide's content height.
Animation	Dropdown (None | Fade | Slide)	Slide	Sets the transition animation style between slides.
Show arrow	Toggle switch	On	Controls whether the previous and next navigation arrows are displayed.
Arrow size	Radio group (Medium | Large)	Medium	Sets the size of the navigation arrows. Only available when Show arrow is enabled.
Arrow position	Radio group (Inner | Outer)	Inner	Controls whether the navigation arrows are rendered inside or outside the carousel bounds. Only available when Show arrow is enabled.
Arrow direction	Radio group (Horizontal | Vertical)	Horizontal	Sets the axis along which the navigation arrows are positioned. Only available when Show arrow is enabled.
Auto play	Toggle switch	Off	When enabled, the carousel advances slides automatically.
Auto playback speed (ms)	Number input	3000	Sets the interval in milliseconds between automatic slide transitions. Only available when Auto play is enabled.
Next arrow	Toggle switch (Disable)	Off	When enabled, it customises the appearance of the next (forward) arrow button.
Prev arrow	Toggle switch (Disable)	Off	When enabled, it customises the appearance of the prev (previous) arrow button.
Center mode	Toggle switch	Off	When enabled, the active slide is centred with partial views of the adjacent slides on either side.
Show navigation dots	Toggle switch	On	Controls whether the dot indicators below the carousel are displayed.
Navigation dots direction	Radio group (Horizontal | Vertical)	Horizontal	Controls the layout direction of the dot indicators. Only available when Show navigation dots is enabled.
Allow dragging	Toggle switch	On	When enabled, users can drag slides left or right to navigate.
Infinite loop	Toggle switch	On	When enabled, the carousel wraps around from the last slide back to the first (and vice versa).
Default slide index	Number input	0	Sets the zero-based index of the slide shown when the carousel first renders.
Lazy loading	Toggle switch	Off	When enabled, slide content is loaded only when the slide is about to become visible, reducing initial load time.
Slide direction	Radio group (Horizontal | Vertical)	Horizontal	Sets the axis along which slides transition. Horizontal slides left and right. Vertical slides up and down.
Trigger type	Radio group (Click | Hover)	Click	Controls what user action triggers slide navigation when clicking dot indicators or arrows.
Focus onSelect	Toggle switch	Off	When enabled, the carousel receives focus when a slide is selected.

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

Binding an event

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

   • onChange — Triggered after the active slide changes
   • onBeforeChange — Triggered immediately before the active slide 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 is called after the slide transition completes:

onChange(currentIndex) {
  // currentIndex: zero-based index of the now-active slide
}

The onBeforeChange handler is called before the slide transition begins:

onBeforeChange(currentIndex, nextIndex) {
  // currentIndex: index of the current slide
  // nextIndex: index of the slide about to become active
}

Advanced

For more information, refer to Advanced.

Best practices

1. Navigation Controls

   • Keep Show arrow and Show navigation dots enabled together for the most accessible experience, giving users two independent ways to navigate slides
   • Use Next arrow and Prev arrow disable toggles to hide individual arrows when the carousel is at its first or last slide and Infinite loop is off

2. Autoplay

   • Set Auto playback speed (ms) to at least 3000 to give users enough time to read slide content before it advances
   • Provide a visible pause control or disable Auto play for carousels containing text-heavy or interactive content

3. Performance

   • Enable Lazy loading when the carousel contains many slides with large images to reduce the initial page load time

4. Direction

   • Use Vertical slide direction only when the carousel is placed in a fixed-height container, as vertical scrolling can conflict with page scroll behaviour

Tag

The Tag component is a compact label element used to categorise, annotate, or describe content. Tags support color customisation, size variants, and an optional appearance animation. In the App Designer, select a Tag 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 Tag.

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

Property	UI Control	Default	Description
Tag type	Radio group (Normal | Primary)	Normal	Specifies the visual style variant of the tag. Normal renders a standard outline style. Primary renders a filled, prominent style.
Tag size	Radio group (Small | Medium | Large)	Medium	Sets the size of the tag. In form contexts, the large size is treated as equivalent to medium.
Tag color	Color picker	-	Sets a custom background or border color for the tag.
Animate loading	Toggle switch	-	Controls the loading of the widget.
Label	i18n setter	Tag	Sets the text displayed inside the tag. Supports internationalisation.
Title	i18n setter	-	Sets the HTML title attribute of the tag, displayed as a tooltip on hover. 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 Tag 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 Tag without writing boilerplate code.

Binding an event

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

   • afterAppear — Triggered after the tag's appearance animation completes
   • onClick — Triggered when the tag 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 is called when the tag is clicked:

onClick(event) {
  // Handle tag click
}

The afterAppear handler is called after the appearance animation finishes:

afterAppear(node) {
  // Handle post-animation state
}

Advanced

For more information, refer to Advanced.

Best practices

1. Use Type and Color Together

   • Combine Tag type and Tag color to create a consistent color-coded taxonomy (e.g., green for active, red for error)
   • Reserve primary type for the most important or active tags in a set

2. Keep Label Text Concise

   • Tag labels should be short — ideally one or two words — to maintain readability at small sizes

3. Use Closeable Tag for Dismissible Labels

   • If users need to remove tags (e.g., applied filters), use Closeable Tag instead

Closeable Tag

The Closeable Tag component is a tag variant with a built-in close mechanism, allowing users to dismiss or remove the tag from the interface. The close action can be triggered either by clicking the tag body or by clicking a dedicated close button. In the App Designer, select a Closeable Tag 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 Closeable Tag.

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

Property	UI Control	Default	Description
Close area	Radio group (Text | Close button)	Close button	Defines the clickable area that triggers the close action. Text closes the tag when the tag body is clicked. Close button closes the tag only when the dedicated close icon is clicked.
Tag size	Radio group (Small | Medium | Large)	Medium	Sets the size of the tag. In form contexts, the large size is treated as equivalent to medium.
Label	i18n setter	Tag	Sets the text displayed inside the tag. 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 Closeable Tag 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 Closeable Tag without writing boilerplate code.

Binding an event

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

   • onClose — Triggered when the close action is initiated; returning false prevents the tag from closing
   • onClick — Triggered when the tag body is clicked
   • afterClose — Triggered after the tag has fully closed and its exit animation has completed

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 onClose handler is called when the close action is triggered:

onClose(event) {
  // Return false to prevent the tag from closing
}

The onClick handler is called when the tag is clicked:

onClick(event) {
  // Handle tag body click
}

The afterClose handler is called after the tag has closed:

afterClose() {
  // Handle post-close cleanup, e.g. update a list of active filters
}

Advanced

For more information, refer to Advanced.

Best practices

1. Choose the Right Close Area

   • Use Close button (tail) when clicking the tag body should have a separate action (e.g., viewing details)
   • Use Text when the entire tag is purely a dismissible label and clicking anywhere should remove it

2. Use afterClose for State Updates

   • Use the afterClose event (rather than onClose) to update application state after the tag has fully disappeared, ensuring UI consistency

Selectable Tag

The Selectable Tag component is a tag variant that toggles between a selected and deselected state when clicked, functioning similarly to a checkbox. It is commonly used for multi-select filter options or toggle groups. In the App Designer, select a Selectable Tag 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 selection and display properties of the Selectable Tag.

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

Property	UI Control	Default	Description
Checked	Toggle switch / Expression	-	Controls the selected state of the tag in controlled mode. When set, the component is fully controlled and the state must be managed externally.
Default checked	Toggle switch	-	Sets the initial selected state of the tag in uncontrolled mode. Has no effect when Checked is also set.
Disabled	Toggle switch	-	When enabled, prevents the user from toggling the tag's selected state.
Label	i18n setter	Tag	Sets the text displayed inside the tag. 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 Selectable Tag 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 Selectable Tag without writing boilerplate code.

Binding an event

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

   • onChange — Triggered when the selected state of the tag 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 is called when the selected state changes:

onChange(checked, event) {
  // checked: boolean indicating the new selected state
}

Advanced

For more information, refer to Advanced.

Best practices

1. Controlled vs. Uncontrolled Mode

   • Use Default checked for simple, self-contained toggle tags that manage their own state
   • Use Checked with a bound variable and an onChange handler when the tag's state must be synchronized with external data or other components

2. Group Multiple Selectable Tags

   • When building a filter panel, align multiple Selectable Tags in a row using a Box component with Direction set to Row

Timeline

The Timeline component displays a vertical sequence of events or milestones, each with a title, timestamp, status indicator, icon, and content. It is used to represent process flows, activity histories, or step-by-step progress. In the App Designer, select a Timeline 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 data properties of the Timeline.

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

Timeline data

The Timeline data property is an array editor that allows you to add, remove, and reorder timeline items. Each item displays a Title field and a State selector. 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 timeline item.

Each item has the following fields:

Field	UI Control	Default	Description
Title	i18n setter	Auto-generated	Sets the heading text for the timeline node. Required. Supports internationalisation.
State	Radio group (Done | Process | Error | Success)	-	Sets the visual status indicator for the timeline node.
Time (right)	i18n setter	-	Displays a formatted timestamp on the right side of the timeline node. Supports internationalisation.
Time (left)	i18n setter	-	Displays a formatted timestamp on the left side of the timeline node. Supports internationalisation.
Icon	Icon selector	-	Sets a custom icon for the timeline node marker. Required.
Content (right)	Text area	-	Sets the descriptive text or detail content displayed on the right side of the timeline node.

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

Binding an event

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

   • onClick — Triggered when a timeline node 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 is called when a timeline node is clicked:

onClick(event) {
  // Handle timeline node click
}

Advanced

For more information, refer to Advanced.

Best practices

1. Use State to Communicate Progress

   • Apply done or success to completed steps, process to the current step, and error to failed steps to give users a clear visual overview of a workflow

2. Timestamps

   • Use Time (right) for the primary timestamp (e.g., date and time of the event)
   • Use Time (left) for a secondary label (e.g., elapsed time or a relative date) when both are needed simultaneously

3. Keep Content Concise

   • Limit Content (right) to a brief description; use a Dialog or Drawer for detailed information when more context is required

Tree

The Tree component displays hierarchical data as an expandable and collapsible node tree. It supports single and multiple selection, checkbox mode, node editing, drag-and-drop reordering, and virtual scrolling for large datasets. In the App Designer, select a Tree 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 structure and interaction properties of the Tree.

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

Property	UI Control	Default	Description
Datasource	JSON setter	-	Opens the tree data editor, where you can define the hierarchical node data (labels, keys, and child nodes) in a structured format.
Show line	Toggle switch	Off	When enabled, renders the tree with vertical and horizontal lines connecting parent and child nodes.
Allow multiple select	Toggle switch	Off	When enabled, users can select more than one node at a time.
Allow checkbox	Toggle switch	Off	When enabled, each tree node displays a checkbox, allowing users to check or uncheck nodes independently of selection.
Allow editing	Toggle switch	Off	When enabled, users can edit the label text of tree nodes inline.
Allow dragging	Toggle switch	Off	When enabled, users can drag and drop nodes to reorder or re-parent them within the tree.
Allow selection	Toggle switch	On	Controls whether nodes can be selected by clicking.
Auto expand	Toggle switch	On	When enabled, all tree nodes are expanded by default when the component first renders.
Default expanded nodes	JSON setter	-	A function that returns an array of node keys to be expanded when the tree first renders.
Default selected nodes	JSON setter	-	A function that returns an array of node keys to be selected when the tree first renders.

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

Binding an event

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

   • onSelect — Triggered when a node is selected or deselected
   • onCheck — Triggered when a node's checkbox is checked or unchecked (only when Allow checkbox is enabled)
   • onExpand — Triggered when a node is expanded or collapsed
   • _onEditFinish — Triggered when inline editing of a node label is completed (only when Allow editing is enabled)
   • onDragStart — Triggered when a drag operation begins on a node (only when Allow dragging is enabled)
   • _onDrop — Triggered when a dragged node is dropped onto a new position (only when Allow dragging is enabled)
   • onRightClick — Triggered when a node is right-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 onSelect handler is called when a node is selected or deselected:

onSelect(selectedKeys, extra) {
  // selectedKeys: array of selected node keys
  // extra.node: the node that was clicked
  // extra.selected: whether the node is now selected
}

The onCheck handler is called when a checkbox changes state:

onCheck(checkedKeys, extra) {
  // checkedKeys: array of checked node keys
  // extra.node: the node whose checkbox changed
  // extra.checked: whether the node is now checked
}

The onExpand handler is called when a node is expanded or collapsed:

onExpand(expandedKeys, extra) {
  // expandedKeys: array of currently expanded node keys
  // extra.node: the node that was toggled
  // extra.expanded: whether the node is now expanded
}

The _onEditFinish handler is called when inline editing of a node label is completed:

_onEditFinish(key, label, node) {
  // key: the key of the edited node
  // label: the new label text
  // node: the node data object
}

The onDragStart handler is called when a drag operation begins:

onDragStart(info) {
  // info.event: the drag event
  // info.node: the node being dragged
}

The _onDrop handler is called when a dragged node is dropped:

_onDrop(info) {
  // info.dragNode: the node that was dragged
  // info.node: the node it was dropped onto
  // info.dropPosition: the drop position relative to the target node
}

The onRightClick handler is called when a node is right-clicked:

onRightClick(info) {
  // info.event: the right-click event
  // info.node: the node that was right-clicked
}

Advanced

For more information, refer to Advanced.

Best practices

1. Enable Check box for Multi-Select Workflows

   • Use Check box mode when users need to select multiple items for batch operations (e.g., bulk delete or export)
   • In checkbox mode, parent and child node check states are linked by default; enable checkStrictly via variable binding to manage them independently

2. Use Node Block Mode for Clearer Selection

   • Set Selection mode to Node when adding inline actions (e.g., edit or delete buttons) to each row, so the entire row is a consistent click target

3. Drag and Drop

   • Enable Allow dragging only when users genuinely need to reorganise the hierarchy, as it adds interaction complexity
   • Bind the onDrop event (via variable binding) to persist the new order to your datasource

Video

The Video component embeds an HTML5 video player that streams video from a specified URL. It supports autoplay, looping, muted playback, a browser-native control bar, and a poster image displayed before playback begins. In the App Designer, select a Video 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 source and playback properties of the Video.

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

Property	UI Control	Default	Description
Video address	Text input	/editor/lowcode-assets/images/page-1.mp4	Specifies the source URL or file path of the video file.
Auto play	Toggle switch	Off	When enabled, the video starts playing automatically when the component loads. Enabling this property also forces Muted to be enabled, as browsers require muted video for autoplay.
Loop	Toggle switch	Off	When enabled, the video restarts automatically when it reaches the end.
Muted	Toggle switch	Off	When enabled, the video plays without audio. This property is not shown when Auto play is enabled, as autoplay requires muted playback.
Controls	Toggle switch	On	When enabled, the browser's native video control bar (play, pause, volume, progress, full screen) is displayed to the user.
Thumbnail	Text input	-	Specifies the URL or file path of an image to display as a placeholder before playback begins.

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

Binding an event

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

   • onLoadStart — Triggered when the browser begins loading the video
   • onLoadedMetadata — Triggered when the video's metadata (duration, dimensions) has been loaded
   • onLoadedData — Triggered when the current frame has been loaded
   • onCanPlay — Triggered when the browser can start playing the video
   • onPlay — Triggered when playback begins
   • onPause — Triggered when playback is paused
   • onEnded — Triggered when playback reaches the end of the video
   • onError — Triggered when an error occurs during loading or playback
   • onTimeUpdate — Triggered repeatedly as the playback position changes
   • onVolumeChange — Triggered when the volume or muted state 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 onPlay handler is called when video playback starts:

onPlay(event) {
  // Handle video play
}

The onPause handler is called when video playback is paused:

onPause(event) {
  // Handle video pause
}

The onEnded handler is called when the video finishes playing:

onEnded(event) {
  // Handle video end, e.g. show a replay button
}

The onError handler is called when a loading or playback error occurs:

onError(event) {
  // Handle video error, e.g. display a fallback message
}

The onTimeUpdate handler is called as the playback position changes:

onTimeUpdate(event) {
  // event.target.currentTime: current playback position in seconds
}

Advanced

For more information, refer to Advanced.

Best practices

1. Autoplay and Muted

   • Always enable Muted when using Auto play, as browsers block unmuted autoplay by default. The App Designer enforces this automatically when Auto play is toggled on

2. Always Set a Thumbnail

   • Provide a Thumbnail image so users see a meaningful preview frame before they interact with the video, rather than a blank player

3. Use Controls for User-Initiated Playback

   • Enable Controls whenever users should be able to pause, seek, or adjust volume
   • Disable Controls only for decorative background videos where autoplay and loop are enabled and user interaction is not intended

4. Handle Errors Gracefully

   • Bind onError to display a user-friendly message or fallback content when the video source cannot be loaded

Last updated on 20 May 2026