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.

Purpose

Common scenarios:

• 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

Input and Output

Input parameters:

• Message (required): Text to display
  • Type: String
  • Supports fixed text, page variable binding, and component data binding
  • Recommendation: Keep under ~50 characters for readability
• Display duration: How long the toast stays visible
  • Type: Number (milliseconds)
  • Default: System default (~2–3 seconds)
  • Note: Duration is system-controlled; not customizable per Action in most builds

Output:

• No output data
• Display-only; no data for downstream 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

Usage Examples

Scenario 1: Form submit success

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

Scenario 2: Dynamic status

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

Scenario 3: API error

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.

Purpose

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

Input and Output

Input parameters (default mode):

• Modal title (optional): Header text
  • Type: String
  • Supports fixed text and data binding
• Modal content (required): Body text
  • Type: String
  • Supports fixed text, data binding, and HTML
• Cancel button text (optional)
  • Type: String
  • Default: “Cancel”
• Confirm button text (optional)
  • Type: String
  • Default: “Confirm”
• Actions on confirm (optional): Action chain after confirm
  • Type: Action configuration
  • Supports any follow-up Actions

Input parameters (custom mode):

• Modal content: Custom component layout
  • Type: Component container
  • Drag components, set layout, configure interactions
• Modal size: Width and height (px or %)
• Modal position: Center, top, bottom, or custom
• Overlay: Show dimmed background; click overlay to close
• Close behavior: Button close, auto-close after timeout, or conditional close

Output:

• User choice: Button clicked
  • Type: String
  • Values: confirm / cancel
• Form data in modal: Inputs collected in custom modals
  • Type: Object
• Modal state: Open / closed
  • Type: Boolean

Select Action	Configure content	Live preview

Notes

• 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.

Usage Examples

Scenario 1: Confirm delete (default mode)

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

Scenario 2: Edit profile (custom mode)

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

Scenario 3: Filter dialog (custom mode)

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

Scenario 4: Multi-step wizard (custom mode)

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