Build Frontend Interactions

This document explains the fundamental operations for building frontend interactions on the Momen platform.

Basic Operations

In the Momen editor, the majority of frontend interactions are built within the Action tab of the component/page/modal properties panel(right-side bar). The workflow follows these core steps:

Add an action

Select the target page or component on the canvas.
Navigate to the Action tab in the properties panel and locate the required trigger (e.g., On click, On value change).
Click the ”+” button next to the trigger.
From the dropdown menu, select the desired action (e.g., Navigation, Call Actionflow).

Configure action properties

Click on the added action card to expand its property form.
Configure the specific parameters required for that action (e.g., selecting the target page for a Navigation action, or binding data to API inputs).
All modifications are saved automatically.

Configure On success / On failure branches

Many asynchronous operations (such as database operations, call actionflow, or API requests) will yield different execution results.

Expand the card for an asynchronous action. Inside, you will find dedicated On success and On failure branches.
Under the respective branch, click ”+” to define the subsequent action (e.g., execute page navigation upon success, or trigger a Toast warning upon failure).
Crucial Concept: Nesting actions under these branches is the standard Momen architecture for achieving sequential execution. The output results of the parent action are securely stored in the Context and can be dynamically referenced by these nested follow-up actions.

Note: To build on app launch interaction, go to “Settings” -> “General” -> “On app launch”.

Advanced Operations

Adjust action execution order

Copy and paste actions

To efficiently reuse logic across different components or triggers:

Copy: Hover over the action card, click the More (”···”) icon on the right, and select Copy action.
Paste: Navigate to the target trigger or branch, and click the Paste icon to insert the copied action.

💡

Tip: Copying an action will duplicate 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 a parent action strictly removes all nested child actions bound to its branches. If an action is deleted by mistake, use the Undo shortcut (Ctrl/Cmd + Z) to restore the logic tree.

Open Flow Editor

As interaction logic grows in complexity and nesting depth, the standard properties panel may become visually restrictive.

Click Open flow editor at the top of the action panel to launch a standalone, immersive workspace.
This dedicated editor provides a comprehensive, at-a-glance view of all actions bound to the current trigger.