Build Frontend Interactions

This guide explains how to add frontend actions to pages and components, handle their results, and reuse or organize action configurations.

Basic operations

In the Momen editor, most frontend interactions are configured in the Action tab of the component properties panel (right sidebar). The core workflow is as follows:

Add an action

Select the page or component that needs the action.
In the Action tab of the properties panel, locate the target Trigger (e.g., On click, On value change).
Click the ”+” button next to the Trigger.
From the action list, select the action you need (e.g., Navigation, Call Actionflow).

Configure action properties

Click the added action card to expand its property form.
Configure the input parameters required for that action type (e.g., target page, input parameters to pass).
All changes are saved automatically.

Configure On success / On failure branches

Some actions produce a success or failure result after they finish, including database operations, Call Actionflow, and Call API. Add follow-up actions according to that result.

Expand the card for such an action. Inside, you will find On success and On failure branches.
Click ”+” under the corresponding branch to configure follow-up actions for each outcome (e.g., navigate to a page on success, show a Toast with an error message on failure).
Actions under On success or On failure run only after the current action has produced a result. Its result is stored in Context and is available to actions in the corresponding branch.

Example: call an Actionflow from a button

Add Call Actionflow under the button’s On click Trigger, then select the Actionflow and bind its inputs.
Under On success, add Toast & modal → Show toast and display a confirmation message.
Under On failure, add Toast & modal → Show toast and display an error message.
When a follow-up action needs an Actionflow output, bind it from Context → Action result → Call Actionflow → output field.

The success or failure branch runs after the Actionflow finishes and returns its result.

Note: To build on app launch interactions, go to Settings → General → On app launch.

Other operations

Drag to reorder

Actions at the same level start in their configured order, which you can change by dragging. An asynchronous action does not wait for the previous action at the same level to finish, so completion order can differ. If one action depends on another, place it under the previous action’s On success branch. See Sequential execution.

How to: Hover over the card title bar, press and hold the left mouse button, then drag.

Copy and paste actions

To reuse logic across different components or Triggers:

Copy: Hover over the action card, click the ”···” icon on the right, and select Copy action.
Paste: At the target Trigger or branch, click the Paste icon to insert the copied action.

💡

Tip: Copying an action duplicates the entire action tree, including all nested child actions under its On success and On failure branches.

Delete an action

Hover over the action card and click the Delete icon.

⚠️

Note: Deleting an action also removes all nested child actions (i.e., all actions under its success/failure branches). If deleted by mistake, use Undo (Ctrl/Cmd + Z) to restore.

Open the flow editor

Use the Flow Editor when the action tree is too large to inspect comfortably in the sidebar.

Click Open flow editor at the top of the action panel to enter a standalone full-screen canvas.
The canvas shows all actions bound to the current Trigger.
Use it to trace branches and inspect nested data bindings.