Ask AI
Skip to main content

Show a dialog

Function: Show a dialog​

This action allows you to display any existing "Template" as an overlaying dialog window on the user's screen. This is useful for showing additional information, collecting user input, or confirming actions without navigating away from the current page. You can customize the dialog's size, how it can be closed, and even specify another action to run once the dialog is dismissed.

Input​

  • Template: The specific "Template" you want to display in the dialog. This is a required input.
  • Template parameters: If your chosen "Template" requires specific information to display correctly (like a customer ID or an order number), you can provide those values here. This input only appears if you have selected a "Template".
  • Width: Defines the width of the dialog. For example, "500px" or "70vw" (70% of the viewport width). If left blank, the dialog will try to use the default width defined in the template.
  • Height: Defines the height of the dialog. For example, "300px" or "60vh" (60% of the viewport height). If left blank, the dialog will try to use the default height defined in the template.
  • Minimum width: Sets the smallest allowed width for the dialog, e.g., "200px".
  • Minimum height: Sets the smallest allowed height for the dialog, e.g., "150px".
  • Maximum width: Sets the largest allowed width for the dialog, e.g., "800px".
  • Maximum height: Sets the largest allowed height for the dialog, e.g., "90vh".
  • Close dialog by outside click: Choose whether the user can close the dialog by clicking anywhere outside its boundaries. By default, this is set to True.
  • After close action: An "Action" that will automatically run once the dialog is closed by the user.
  • After close action parameters: If the "After close action" requires specific information, you can provide those values here. This input only appears if you have selected an "After close action".

Output​

No direct output is returned by this function. Its primary effect is to display a dialog on the user interface.

Execution Flow​

Real-Life Examples​

Example 1: Displaying a simple confirmation dialog​

A user clicks a "Delete Item" button, and you want to ask for confirmation before proceeding.

  • Inputs:
    • Template: ConfirmationDialog (a pre-designed template with "Yes" and "No" buttons)
    • Width: 400px
    • Height: 200px
    • Close dialog by outside click: False (to force user interaction)
    • After close action: HandleConfirmationResult (an action that checks which button was clicked in the dialog)
  • Result: A small, fixed-size dialog appears in the center of the screen, asking the user to confirm the deletion. The user cannot close it by clicking outside. Once the user clicks "Yes" or "No" inside the dialog, the HandleConfirmationResult action will run to process their choice.

Example 2: Showing customer details in a resizable dialog​

When viewing a list of orders, a user clicks on a customer's name, and you want to show their full details in a pop-up.

  • Inputs:
    • Template: CustomerDetailsPage (a template designed to display customer information)
    • Template parameters:
      • customerId: 12345 (the ID of the customer whose details should be shown)
    • Width: 80vw
    • Height: 70vh
    • Minimum width: 500px
    • Minimum height: 400px
    • Maximum width: 1000px
    • Maximum height: 800px
    • Close dialog by outside click: True
  • Result: A large, resizable dialog appears, filling most of the screen. It displays the details for customer ID 12345. The user can close it by clicking outside the dialog or by using a close button within the CustomerDetailsPage template.

Example 3: Capturing feedback with a follow-up action​

After a user completes a task, you want to prompt them for feedback in a dialog, and then log that feedback.

  • Inputs:
    • Template: FeedbackForm (a template containing a text area for comments and a submit button)
    • Width: 500px
    • Height: 350px
    • Close dialog by outside click: True
    • After close action: LogFeedback (an action that saves the feedback to a database)
    • After close action parameters:
      • feedbackText: \{\{FeedbackForm.comments\}\} (assuming the FeedbackForm template has an output parameter named comments)
      • userId: \{\{CurrentUser.id\}\}
  • Result: A dialog appears with a feedback form. The user can enter their comments and submit them. If they close the dialog without submitting, the LogFeedback action will still run, but the feedbackText might be empty. If they submit, the LogFeedback action will run with their provided comments and user ID, saving the feedback.