Toast and Modal

Momen provides toast and modal Actions for user feedback and complex interactions. This reference covers configuration and usage for Web and Native App.

Show Toast

Display a brief message on the page to confirm actions or report errors.

Use cases

• Form feedback: “Submitted successfully” after save
• Auth feedback: Login or registration failure messages
• Operation confirmation: Status after user actions
• Error messages: Friendly validation or system errors
• Status updates: Save, delete, or sync results

Parameters

Results

• No output data
• Display-only; no data for downstream Actions

How it works

Momen displays the message as a temporary, non-blocking notification for 3 seconds. The duration cannot be changed. The action completes without producing data for later actions.

Platform notes:

• Web: Standard style (light background, dark text); style is not customizable
• Native App: Platform-native toast styling; not customizable

Select Action	Enter message	Live preview

Errors

• Empty message: The bound message resolves to an empty value, so the toast has no useful content.
• Duplicate feedback: A preceding action already displays an automatic error toast. Add another toast only when you want to replace or supplement that feedback.

Examples

Trigger: After submit button succeeds
Message: Fixed text "Submitted successfully"
Location: Under mutation Action → On success

Trigger: After operation completes
Message: Page variable, e.g. "Saved {username}'s profile"
Source: Username from page variable

Trigger: API request fails
Message: Bound error message from response
Location: Under request Action → On failure

Show Modal

Open a modal dialog in default or custom mode for confirmations, forms, and multi-step UI.

Use cases

On component interaction, open a modal window for:

• Confirmation: Delete or other destructive actions
• Information: Details, help, terms
• Data input: Quick forms and settings
• Selection: Lists, filters, options
• Complex flows: Wizards and composite UIs

Modal modes:

• Default mode: Standard dialog with title, body, and confirm/cancel buttons
• Custom mode: Fully custom layout with any components and interactions

Parameters

Default modal

Custom modal

Results

How it works

• When triggering a modal from a List item, use Set Variable to copy list item data to a page variable first, then bind that variable inside the modal.
• Components inside the modal can have their own Actions.
• Custom modals support responsive sizing across breakpoints.
• Multiple modals can stack; the system manages z-order.
• Close with Hide Modal, overlay click (if enabled), or in-modal buttons.

Errors

• List item data is unavailable: A modal opened from a list cannot read the item after the original list context is lost. Copy the item to a page variable before opening the modal.
• Modal cannot close as expected: No close action or permitted overlay-close behavior is configured.

Examples

Trigger: Delete button
Modal type: Default
Title: Confirm delete
Content: Are you sure? This cannot be undone.
Cancel: Cancel
Confirm: Delete
On confirm: Delete record → Show Toast "Deleted" → Refresh data source

Trigger: Edit button
Modal type: Custom
Size: 400px × 300px, centered
Content:
  - Name input (bound to user name)
  - Email input (bound to user email)
  - Save button (update user Action)
  - Cancel button (Hide Modal)
Close: Save/Cancel buttons or overlay click
On success: Show Toast and Hide Modal

Trigger: Filter button
Content: Category picker, price range, sort options, Apply button
Close: After apply or Cancel
Output: Filter criteria stored in page variables
Follow-up: Refresh list data source with new filters

Trigger: Setup wizard button
Content: Step indicator, dynamic step area, Previous/Next/Finish
Data: Each step writes to page variables; final step submits
Close: Finish all steps or user cancels