`dialog`

Diese Aktion zeigt dem Nutzer eine Pop-up-Nachricht an. Sie kann als Antwort auf einen Submit verwendet werden, um Rückmeldungen (z. B. Erfolgsmeldungen) anzuzeigen.

Übersicht

action ("dialog"): Auszuführende Aktion.
payload (DialogActionPayload): Objekt, das das Aussehen und den Inhalt der Nachricht beschreibt.

DialogActionPayload

icon (Font-Awesome-string): Icon der anzuzeigenden Nachricht. Es kann direkt eine Font-Awesome CSS-Klasse als String angegeben werden. (Siehe Icons.) Wenn nicht angegeben, wird das Icon abhängig vom type gesetzt.
iconColor (string): Farbe des Icons der anzuzeigenden Nachricht. Hier ist eine CSS-Farbe anzugeben. Wenn nicht angegeben, wird die Farbe abhängig vom type gesetzt.

message (MultiLanguageDefinition): Inhalt der anzuzeigenden Nachricht.
title (MultiLanguageDefinition): Titel der anzuzeigenden Nachricht. Wenn nicht angegeben, wird der Titel abhängig vom type gesetzt.

type (enum<"error" | "info" | "success">): Typ der Nachricht. Dies beeinflusst das Aussehen der Nachricht, hat aber keinen Einfluss auf den Inhalt. success ist der default.

Beispiel

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"
            }
          }
        }
      ]
    }
  ]
}

Eingebettete Vorschau

Vorschau in separatem Fenster öffnen

Keywords: