Ask AI
Skip to main content

Show a dialog

Function: Show a dialog​

This function allows you to display a "Template" as an overlaying dialog window on your application screen. It's perfect for showing important messages, forms, or additional information without navigating away from the current page. You can customize the dialog's size, how it closes, and even trigger another action once it's dismissed.

Input​

  • Template (TEMPLATE, Required): The specific "Template" you want to display inside the dialog. This is the content that will appear in the pop-up window.
  • Template parameters (TEMPLATE_PARAMS): If your chosen "Template" requires specific information to display its content (like a user ID or a product name), you can provide those details here. This option only appears after you've selected a "Template".
  • Width (STRING): Sets the width of the dialog. For example, you can enter "500px" for a fixed width or "80vw" to make it 80% of the screen's width. If left blank, the dialog will use the default width defined in the template itself.
  • Height (STRING): Sets the height of the dialog. Similar to width, you can use "300px" or "60vh". If left blank, the dialog will use the default height defined in the template.
  • Minimum width (STRING): Defines the smallest width the dialog can be. Useful for ensuring content remains readable on smaller screens or when resizing. Example: "200px".
  • Minimum height (STRING): Defines the smallest height the dialog can be. Example: "150px".
  • Maximum width (STRING): Defines the largest width the dialog can be. Useful for preventing the dialog from becoming too wide on very large screens. Example: "1000px".
  • Maximum height (STRING): Defines the largest height the dialog can be. Example: "800px".
  • Close dialog by outside click (BOOLEAN, Default: True): Choose whether users can close the dialog by clicking anywhere outside of its boundaries. If set to False, the dialog can only be closed by specific actions within the template (like a "Close" button).
  • After close action (ACTION): Select an "Action" that should automatically run once this dialog is closed. This is useful for updating data, refreshing a list, or showing another message after the user interacts with the dialog.
  • After close action parameters (ACTION_PARAMS): If the "After close action" you selected requires specific inputs, you can provide them here. This option only appears after you've selected an "After close action".

Output​

This function does not return any direct data. Its output is the visual display of the specified "Template" as an overlaying dialog on the user's screen.

Execution Flow​

Real-Life Examples​

Example 1: Displaying a Simple Welcome Message​

Imagine you want to show a welcome message to new users when they first log in.

  • Inputs:
    • Template: WelcomeMessageTemplate
    • Close dialog by outside click: True
  • Result: A dialog box appears on the screen, displaying the content of the WelcomeMessageTemplate. Users can click outside the dialog to close it.

Example 2: Showing Product Details with Custom Dimensions​

You have a list of products, and when a user clicks on a product, you want to show its details in a dialog with a specific size.

  • Inputs:
    • Template: ProductDetailsTemplate
    • Template parameters:
      • productId: \{\{SelectedProduct.ID\}\} (assuming SelectedProduct is a variable holding the clicked product's data)
    • Width: 600px
    • Height: 400px
    • Close dialog by outside click: False
  • Result: A dialog box appears, exactly 600 pixels wide and 400 pixels high, showing the details of the selected product. The user must use a "Close" button within the ProductDetailsTemplate to dismiss it.

Example 3: Confirming an Action and Updating Status​

After a user submits an order, you want to show a confirmation message in a dialog, and once they close it, update the order's status in your database.

  • Inputs:
    • Template: OrderConfirmationTemplate
    • Template parameters:
      • orderNumber: \{\{CurrentOrder.Number\}\}
      • totalAmount: \{\{CurrentOrder.Total\}\}
    • After close action: UpdateOrderStatusAction
    • After close action parameters:
      • orderId: \{\{CurrentOrder.ID\}\}
      • newStatus: Confirmed
  • Result: A dialog appears, showing the order confirmation. Once the user closes this dialog (either by clicking outside or using an internal close button), the UpdateOrderStatusAction automatically runs, changing the CurrentOrder's status to "Confirmed" in your application's database.