Navigation Actions

Action	Description
Navigate to page	Move between pages or return to the previous page within the app.
Open URL	Open an external web link from within the app.

Navigation actions control how users move between pages, both inside and outside the application.

Navigate to page

Move between in-app pages or return to the previous page, with optional parameter passing.

Use cases

Click a product list item to open its details page, passing along the product ID.
Tap a back button to return to the previous page and refresh its data.

Parameters

Parameter	Type	Required	Description
Method	Enum	Yes	The core navigation behavior: `Go to new page` or `Go back`.
Target	Text (page id)	Yes	Only applies when Method is `Go to new page`. The in-app page to navigate to.
Transition	Enum	Yes	Only applies when Method is `Go to new page`: `Current tab` or `New tab`.
Path parameters	Text / BigInt / Decimal / Boolean	No	Appends dynamic values to the URL path (e.g., `/product/123`).
Query parameters	Text / BigInt / Decimal / Boolean	No	Appends values to the URL query string (e.g., `?id=123`). Recommended over path parameters for the broadest compatibility.

Results

None.

How it works

Momen apps are Single Page Applications (SPAs), so all navigation is handled by the SPA’s virtual routing layer.
- Go back: Calls the browser’s native back API (equivalent to history.go(-1)), popping the history stack — exactly as if the user clicked the browser’s top-left ”← (Back)” button.
- Open new page (Current tab): Calls history.pushState to push a brand-new URL entry onto the current tab’s history stack. The page navigates and the browser’s ”←” button becomes active, allowing the user to go back.
- Open new page (New tab): Calls the native window.open. The original tab’s history stack is left untouched, and the browser opens a fully independent tab with an empty, brand-new history stack — so the back button cannot return to the original tab.

Edge Cases

On Go back, the browser restores the full URL of the previous step (including path parameters /123 and query parameters ?id=123), so the page re-parses them automatically. However, because the DOM tree was unmounted, all data sources, page variables, and component state are reset.
In the editor’s live preview, New tab navigation is intercepted and shows a system prompt; it only takes effect in a real environment or after publishing.

Special Notes

Lifecycle behavior varies by method. Go back and Current tab fire the old page’s “On Page Unload” and the new page’s “On Page Load”, but not “On App Launch”. New tab fires no lifecycle triggers on the old page, while the new page fires both “On Page Load” and “On App Launch”.
If a required path parameter on the target page is left empty during navigation, the page will not transition, the browser console will throw an error, but the action sequence continues without interruption.
If a query parameter is left empty, it will simply not be included in the URL, and the action sequence continues without interruption. (When configuring query parameters on the target page, you can use “Parameter are omitted from the web link if not configured” to control whether an empty query parameter appears in the URL.)

Errors

Target page missing a parameter definition: If the target page defines no path or query parameter, the parameter-binding section never appears and no data can be passed.
New tab does nothing in preview: A New tab navigation clicked in the editor’s live preview is intercepted; verify it in a published or real environment.

Examples

1. Navigate from a product list to its details page (Go to new page + pass product ID)

Requirement: When a user clicks a product card on the Product List page, the app navigates to the Product Details page and passes the unique product id, so the details page automatically renders the matching product — completing the “list → details” browsing loop.
Configuration Flow:
1. Prerequisites:
  - Create a Product List page and a Product Details page;
  - On Product List, add a list component (named Product List) that displays products;
  - In the Product Details page settings, create a page query parameter named id of type BigInt.
2. Select Component: On the Product List canvas, select the list item container inside the Product List component.
3. Add Action: In the right-hand configuration panel, open the Action tab, in the On Click event, add action.
4. Configure Action Parameters:
  - In the action dropdown, search for and select Navigate to page;
  - Set Method to Go to new page, Transition to Current tab, and Target to Product Details.
5. Bind Parameter:
  - In the query parameters section, locate the id parameter;
  - Click the + button to its right and follow the path: List item -> Product List -> Current item -> select id.
Runtime Result: When the user clicks a product card, the current tab’s URL updates to /product-details?id=[product_id], and the product details page loads with that specific product’s information.

2. Continue a multi-step form (Go to new page + pass form data)

Requirement: After a user finishes the first step of a registration form and clicks “Next Step”, the app navigates to the second step and passes the entered email so the next form is pre-filled.
Configuration Flow:
1. Prerequisites:
  - Create a Step One page and a Step Two page;
  - On Step One, add an input component named Email Input;
  - In the Step Two page settings, create a page query parameter named email of type Text.
2. Select Component: On the Step One canvas, select the button component named Next Step Button.
3. Add Action: In the right-hand configuration panel, open the Action tab, in the On Click event, add action.
4. Configure Action Parameters:
  - Search for and select Navigate to page;
  - Set Method to Go to new page, Transition to Current tab, and Target to Step Two.
5. Bind Parameter:
  - In the query parameters section, locate the email parameter;
  - Click the + button to its right and follow the path: Component -> Email Input -> select value.
Runtime Result: When the user clicks “Next Step”, the current tab navigates to /step-two?email=[user_email], and the second step reads and displays the email address.

3. Open an in-app help page in a new tab

Requirement: When a user clicks the “Help Center” button in the navigation bar, the app opens the help document in a new browser tab so they can read it without losing their current workspace state.
Configuration Flow:
1. Prerequisites: Create a Workspace page and a Help Center page.
2. Select Component: On the Workspace canvas, select the button component named Help Center Button in the navigation bar.
3. Add Action: In the right-hand configuration panel, open the Action tab, in the On Click event, add action.
4. Configure Action Parameters:
  - Search for and select Navigate to page;
  - Set Method to Go to new page, Transition to New tab, and Target to Help Center.
Runtime Result: When the user clicks “Help Center”, the browser opens a new tab at /help-center, while the original workspace tab stays completely intact.

Open URL

Open an external web link or invoke a URL-based system capability.

Use cases

Click a help document button to open an external help center in a new browser tab.
Click an ad banner to open an external partner’s campaign page in the current window.
Open the default calling or email application from a contact page.

Parameters

Parameter	Type	Required	Description
Open in new tab	Boolean	Yes	Whether to open the link in a new browser tab.
URL	Text	Yes	The address of the external web page to open. Supports data binding.

For websites, enter a complete URL such as https://example.com. The URL parameter also supports these common protocols:

Purpose	URL example
Call a phone number	`tel:+12025550100`
Compose an email	`mailto:support@example.com?subject=Feedback`

The browser passes these URLs to the user’s configured calling or email application. Whether the application opens depends on the browser and operating-system settings.

Results

None.

How it works

The system first reads the configured URL and runs a safety check on its format. If the link contains no // and does not use a supported protocol such as mailto or tel, it automatically prepends // to treat it as an external resource link.
When Open in new tab is enabled, the underlying call is window.open(url, '_blank', 'noopener'), which loads the external page in a fully independent tab; the original tab’s state and history are unaffected.
When Open in new tab is disabled, the underlying call is window.location.href = url, which overwrites the running Momen app in the current tab and navigates to the external page.

Edge Cases

Either way, no lifecycle triggers fire on the original page — it is either isolated in a separate tab or destroyed outright.

Special Note — single-action shortcut (<a> tag)

When Open URL is the only click action on a Button or Text component (no other actions, no success/error follow-ups), it is not run through the JavaScript mechanism above. Instead it is compiled to a native HTML anchor: <a href="{url}" target="{_blank | _self}" rel="noreferrer">, where target is _blank when Open in new tab is on and _self when off.

Benefits — why this shortcut exists
- SEO / crawlability: A real <a href> is a link search-engine crawlers can discover and follow; a JavaScript-only click handler is invisible to them.
- Native link affordances: Middle-click and Ctrl/Cmd-click open the link in a background tab, and the browser’s right-click menu (“Open in new tab”, “Copy link address”, “Open in new window”) works as users expect.
- Accessibility: The element is keyboard-focusable and announced as a link by screen readers; hovering shows the destination URL in the browser status bar.
- Security & privacy: rel="noreferrer" prevents the opened page from accessing window.opener and stops the referrer URL from leaking.
- No JavaScript round-trip: Navigation is a native browser action, so it works without invoking the app’s action engine.
Consequence 1 — no // coercion: The URL is used exactly as written. A bare domain such as example.com is therefore treated as a relative path and resolves against the current app origin (a broken link), instead of being auto-corrected to //example.com. Always enter a full URL (e.g. https://example.com) on Button/Text components.
Consequence 2 — native link behavior: Because it is a real anchor, the referrer policy is noreferrer and the browser, not the app, handles the click.
When the JavaScript mechanism (above) is used instead: Any non-Button/Text component (e.g. an Image), multiple click actions, an Open URL placed inside a Condition or Loop, or an Open URL that has success/error follow-up actions. In those cases the // coercion and window.open / window.location.href calls apply as described.

Errors

Link gets auto-corrected unexpectedly: A relative path or non-standard link is prefixed with //, producing an unintended destination.
Empty URL: The URL is left blank or resolves to empty through data binding, so nothing happens on click.

Examples

Open a third-party partner website

Requirement: When a user clicks a partner’s logo banner, the app opens the partner’s website in a new browser tab so the user’s current session is not interrupted.
Configuration Flow:
1. Prerequisites: Create a Home page.
2. Select Component: On the Home canvas, select the image component named Partner Logo Banner.
3. Add Action: In the right-hand configuration panel, open the Action tab, in the On Click event, add action.
4. Configure Action Parameters:
  - Search for and select Open URL;
  - Set Open in new tab to true;
  - Set URL to https://www.partnerwebsite.com.
Runtime Result: Clicking the partner logo opens a new browser tab at https://www.partnerwebsite.com, while the original application tab stays open and active.