Component Actions

This reference covers component-level Actions: inputs, lists, images, audio, video, Lottie animation, views, and conditional views.

Component Action Types

1. Input — Set input value
2. List — Scroll list / Load more
3. Image — Fullscreen preview / Download image
4. Video — Play, pause, stop
5. Audio — Play, pause, stop
6. Animation — Lottie vector animation
7. View — Screenshot, print
8. Conditional container — Switch view, recalculate condition

Set Input Value

Dynamically set text on an input component — hot search terms, autofill, clear after send.

Purpose

Set or clear a target input’s value from Actions. Common cases: tap search suggestion, one-tap user info fill, prefilled forms, clear message box after send. Supports static text or bound data.

Configuration and Output

Parameters:

Output:

No direct output. On success, the input shows the new value.

Usage Examples

Hot search term

// Tap a suggestion to fill the search box
Target input: "SearchInput"
Value: "Popular picks" // or bind: {{hot_terms.selected.keyword}}

Autofill user info

// Tap "Use default address"
Target input: "RecipientNameInput"
Value: {{current user.display_name}}

Clear after send

// After message sent successfully
Target input: "MessageInput"
Value: ""

List Actions

Control list scroll position and pagination.

Purpose

• Scroll list: Jump to previous, next, top, bottom, or a specific index
• Load more: Fetch the next page for pagination or infinite scroll

Use for long lists, paged data, and infinite scroll.

Configuration and Output

Parameters:

Output:

No direct output. List scrolls or loads more data on success.

Usage Examples

Scroll to top

Target list: "ProductList"
Operation: "Top"

Load more

Target list: "NewsList"
Operation: "Load more"

Jump to index

Target list: "ProductList"
Operation: "Specified index"
Target index: 10 // 11th item (0-based index depends on product UI)

Image Actions

Fullscreen preview and download for single or multiple images.

Purpose

• Fullscreen preview: Full-screen view; supports single image or carousel array
• Download image: Save image to the device (primarily Web)

Use for product galleries, albums, avatars, and documents.

Configuration and Output

Parameters:

Output:

No direct output. Opens preview or starts download.

Notes:

• Platform: Download is primarily supported on Web; bind image data when required.
• Multi-image: Fullscreen mode accepts an array for carousel viewing.
• Native App: Long-press save may be available in fullscreen preview depending on platform.

Usage Examples

Product gallery

Target image: "ProductHero"
Operation: "Fullscreen preview"
Image data: {{product_detail.image_list}}

Download avatar (Web)

Target image: "Avatar"
Operation: "Download image"
Image data: {{current user.avatar_url}}

Video Actions

Control video playback: play, pause, stop.

Purpose

Start, pause, or stop video components — tutorials, product demos, media players.

Configuration and Output

Parameters:

Output:

No direct output. Video state changes per operation.

Notes:

• Name multiple video components for precise control.
• Stopping other audio/video before starting a new clip avoids overlap.

Audio Actions

Control audio by URL: play (with optional loop), pause, stop.

Purpose

Playback control for background music, notifications, and voice content.

Configuration and Output

Parameters:

Source options:

1. Static URL string
2. Bound text field containing a URL
3. File field from database — bind the field’s url

Output:

No direct output. Audio state changes per operation.

Notes:

• Native App: Background audio may be supported depending on platform and audio session settings.
• File-type bindings use the file field’s url.

Lottie Animation Actions

Control Lottie vector animation playback.

Purpose

Play, pause, or stop Lottie components — loading indicators, micro-interactions, onboarding, decoration.

Configuration and Output

Parameters:

Output:

No direct output. Animation state updates on success.

Notes:

• Free animations: LottieFiles 

Usage Examples

Loading indicator

// On load start
Operation: "Play"
Target animation: "LoadingSpinner"
 
// On load complete
Operation: "Stop"
Target animation: "LoadingSpinner"

View Actions

Capture a view as an image or print a region (print: Web only).

Purpose

• Convert to image: Rasterize a view for sharing posters, certificates, snapshots
• Print view: Print a page region (Web only)

Configuration and Output

Parameters:

Output:

• Convert to image — On success: Image data; chain Download image or upload Actions as needed.

Notes:

• Print: Web only.
• After convert to image, add download or save Actions under On success.
• Ensure images inside the view are fully loaded before capture.

Usage Examples

Share poster

Target view: "ProductPoster"
Operation: "Convert to image"
Image quality: 0.9
// On success: Download image Action

Print report (Web)

Target view: "ReportContainer"
Operation: "Print"

Certificate export

Target view: "CertificateTemplate"
Operation: "Convert to image"
Image quality: 1.0

Conditional View Actions

Switch the active sub-view or force condition re-evaluation.

Purpose

• Switch view: Manually show a sub-view without waiting for data-driven conditions

Use for password visibility toggle, verification countdown UI, cart states, login states.

Configuration and Output

Parameters:

Output:

No direct output. Container shows the selected view or re-evaluates rules.

Usage Examples

Password visibility

Target container: "PasswordFieldContainer"
Operation: "Switch view"
Target view: "PasswordVisible" // or "PasswordHidden"

Verification countdown state

Target container: "VerifyCodeButtonContainer"
Operation: "Switch view"
Target view: "CountdownState"