App and Page Actions

Set Variable

Update page variables or client variables, including append and remove for array variables.

Common Use Cases

• Store temporary form input between steps.
• Toggle component visibility dynamically.

Parameter Configuration

Results and Output

None.

Execution Mechanism

• Uses built-in state management to locate and update the target variable.
• After update, components bound to the variable re-render.
• Add appends to the end of an array.
• Remove filters the array by the provided value:
  1. Object match: If the value is a plain object with an id property (model row or local object), removal matches by id.
  2. Strict equality: Primitives or objects without id are removed by strict equality.

Common Errors

• Type mismatch: Editor shows an error when the value type does not match the variable type.

Usage Examples

Record user input (Web)

• Requirement: In a multi-step form, save step-one name to a page variable for final submit.

• Configuration:

  1. Prerequisites:
     • Create Form page with an input.
     • Under Data → Variables, create a text page variable.
  2. Select component: Button on the form page.
  3. Add Action: Action tab → On click → add Action.
  4. Configure:
     • Select Set Variable.
     • Scope: Page and components; choose the page variable.
  5. Bind value:
     • Component → Input → Component output.

• Result: Clicking the button stores the input text in the page variable.

Refresh Data Source

Force target components to re-fetch remote data and re-render.

Common Use Cases

• Refresh a list after form submit.
• Refresh charts or lists after filter changes.
• Periodic refresh of dashboard data.

Parameter Configuration

Results and Output

None.

Execution Mechanism

• Iterates refresh targets and triggers each component’s query to fetch latest server data.
• Skips components whose data comes from variables or local arrays only.
• For paginated lists or tables, refresh resets to page 1 and clears current page position.

Notes

• Hidden or unloaded targets are skipped; stale data may appear when shown again. Re-refresh on show, or sync via global variables.
• Selecting the page as target refreshes page-level data sources only, not every component.

Common Errors

None.

Usage Examples

Refresh list after submit (Native App)

• Requirement: After submitting feedback in a modal, refresh the underlying feedback list.

• Configuration:

  1. Prerequisites:
     • Feedback page with a list and a modal form with submit button.
  2. Select component: Submit Button in the modal.
  3. Add Action: Under the add-data Action’s On success, add Refresh data source.
  4. Configure: Add the list as refresh target.

• Result: After submit, the list re-queries and shows the new row.

Refresh products after category change (Web)

• Requirement: When the user picks a category, refresh the product list for that category.

• Configuration:

  1. Prerequisites:
     • Store page with integer page variable category.
     • Category list and product list; product query filters by category.
  2. On category list item click:
     • Set Variable: category = List item → Category → Current item → id.
     • Refresh data source: product list.

• Result: Product list reloads page 1 for the selected category.

Scroll Page

Scroll the active page to the top or to a specified component.

Common Use Cases

• Return to top after long list pagination or load more.
• Anchor navigation to content sections.

Parameter Configuration

Results and Output

None.

Execution Mechanism

• Controls the viewport scroll offset of the active page container, not component CSS position.
• Page top: Sets the scroll container’s scrollTop to 0.
• Specified component: Reads target offsetTop relative to its positioned ancestor and sets scrollTop so the component top aligns with the viewport top.

Notes

• Scroll animation and final position are system-controlled; manual offset tuning is not supported.
• Hidden targets cannot be scrolled to.
• Warning: With a fixed top navigation bar, scrolling to a component may place its top under the bar.

Common Errors

• Missing target: Deleted or invalid component — operation is ignored; no crash.

Usage Examples

Back to top (Native App)

• Requirement: On a long article page, tap a floating button to scroll to the top.

• Configuration:

  1. Prerequisites: Article detail page with long content and fixed Button.
  2. Action: Scroll page → Page top.

• Result: Page viewport jumps to the title area.

Scroll to comments (Web)

• Requirement: Tap “View comments” at the top to scroll to the comments container.

• Configuration:

  1. Prerequisites: Blog post page with text link and comments Container at bottom.
  2. Action: Scroll page → Specified component → comments container.

• Result: Viewport scrolls until the container is at the top of the visible area.

Control Scheduled Job

Start or pause a page-level scheduled job. Create the job first under the page’s Action tab → Scheduled jobs, with interval and Trigger configuration. See Scheduled Job in the trigger reference for setup details.

Common Use Cases

• Carousel auto-play and pause on hover.
• Verification code countdown start and reset.
• Start/stop periodic dashboard refresh.

Parameter Configuration

Results and Output

None.

Execution Mechanism

• Start:
  • Idempotent start: Only the first start within a short window creates a timer; duplicate starts are ignored.
  • Rapid start/pause: Alternating start and pause quickly can reset the first-fire timer and prevent the first tick from ever firing.
• Pause: Immediately clears the interval, removes the job id from memory, and stops timing.
• When the interval elapses, the job’s bound Actionflow or frontend Actions run (e.g., set variable, refresh data source).

Notes

Built on the browser/native setInterval API:

1. Overlapping async work: setInterval does not wait for prior callbacks. Long async Actions (e.g., refresh) can overlap if intervals are too short — increase interval or add debouncing.
2. Background throttling: Browsers and mobile OSes throttle or suspend timers when the app is backgrounded.
3. Main-thread drift: Heavy rendering delays timer callbacks; do not use for high-precision timing.
4. Lifecycle on navigation:
   • Web: Navigating away unloads the page and destroys its timers.
   • Native App: Push to page may keep the previous page in memory; timers may be frozen in background and resume when returning. Redirect or Back that destroys the page clears timers.

Common Errors

None.

Usage Examples

Start verification countdown (Web / Native App)

• Requirement: After sending a verification code, start a 1-second job to decrement a countdown from 60 to 0 on the button label.

• Configuration:

  1. Prerequisites:
     • Login page with send-code Button.
     • Long integer variable countdown_sec default 60; bind button text to it.
     • Scheduled job interval 1000 ms, Run immediately off; job Action: Set Variable countdown_sec = formula countdown_sec - 1.
  2. On send-code success:
     • Control scheduled job → select countdown job → Start.

• Result: Countdown decrements each second after a successful send.