`dialog`

This action displays a pop-up message to the user. It can be used in response to a submit to display feedback (e.g., success messages).

Overview

action ("dialog"): Action to be executed.
payload (DialogActionPayload): Object that describes the appearance and content of the message.

DialogActionPayload

icon (Font Awesome string): Icon for the message to be displayed. A Font Awesome CSS class can be specified directly as a string. (See Icons.) If not specified, the icon is set based on the type.
iconColor (string): Color of the icon for the message to be displayed. A CSS color must be specified here. If not specified, the color is set based on the type.

message (MultiLanguageDefinition): Content of the message to be displayed.
title (MultiLanguageDefinition): Title of the message to be displayed. If not specified, the title is set based on the type.

type (enum<"error" | "info" | "success">): Type of the message. This affects the appearance of the message but does not affect its content. success is the default.

Example

dialog.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
  },
  "components": [
    {
      "type": "container",
      "components": [
        {
          "type": "button",
          "label": "success",
          "onClick": {
            "action": "dialog",
            "payload": {
              "message": "Success message"
            }
          }
        },
        {
          "type": "button",
          "label": "error",
          "onClick": {
            "action": "dialog",
            "payload": {
              "type": "error",
              "message": "Error message"
            }
          }
        },
        {
          "type": "button",
          "label": "info",
          "onClick": {
            "action": "dialog",
            "payload": {
              "type": "info",
              "message": "Information message"
            }
          }
        },
        {
          "type": "button",
          "label": "custom",
          "onClick": {
            "action": "dialog",
            "payload": {
              "icon": "fas fa-headphones",
              "iconColor": "#b32ab5",
              "title": "New title",
              "message": "Custom"
            }
          }
        }
      ]
    }
  ]
}

Embedded preview

Open preview in a separate window

Keywords: