`dialog`

This action displays a pop-up message to the user. It can be used as a 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 of 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 displayed depending on the type is set.
iconColor (string): Color of the icon of the message to be displayed. A CSS color must be specified here. If not specified, the color is set depending on the type is set.

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

type (enum<"error" | "info" | "success">): Type of message. This influences the appearance of the message, but has no influence on the content Content. success is the default.

Example

dialog.json

{
  "$schema": "https://forms.virtimo.net/5.1.0/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 separate window

Keywords: