Build Frontend Interactions

This document explains the fundamental operations for configuring frontend interactions on the Momen platform, helping you quickly master action configuration and build interaction logic efficiently.

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 asynchronous actions (such as database operations, Call Actionflow, or API requests) produce different execution results. You need to define follow-up actions based on success or failure.

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).
Note: Nesting actions under these branches is the standard way to achieve sequential execution. The result of the parent action is stored in Context data and can be referenced by subsequent actions.

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

Other Operations

Drag to reorder

Actions at the same level can be dragged to adjust execution order. See Sequential execution for how ordering affects behavior.

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 Flow Editor

When interaction logic becomes complex and deeply nested, the sidebar view may feel cramped.

Click Open flow editor at the top of the action panel to enter a standalone full-screen canvas.
Here you can see all action nodes bound to the current Trigger at a glance.
The wider view makes it easier to trace complex logic, verify deep data bindings, and debug heavy business logic.