Submit - Formularversand

Der Submit ist eine Aktion, die das aktuelle Formular an das Backend-System überträgt. Voraussetzung dafür ist, dass eine submitUrl in der Konfiguration angegeben wurde.

Ein Submit wird üblicher Weise vom Benutzer über einen Button ausgelöst. Wenn im Formular in der Konfiguration keine submitUrl angegeben wird, schlägt der Submit direkt fehl und der User erhält die Fehlermeldung "missing submitUrl".

Beispiel

In dem folgenden Beispiel führt das Auslösen des Submits zu einem Fehler, da keine Nachricht von einem Server zurück kommt. Die Submit Nachricht mit dem aktuellen Stand des Formulars wird aber verschickt, was zum Beispiel im Network Tab der Developer-Tools zu erkennen ist. Für den User wird eine "server-side failure" Nachricht angezeigt.

submit.json
{
  "metaData": {
    "id": -1,
    "name": "Print Form",
    "version": 1,
    "author": "Virtimo AG"
  },
  "configuration": {
    "submitUrl": "http://localhost:3000/test"
  },
  "components": [
    {
      "type": "container",
      "label": "Submit",
      "layout": "vertical",
      "components": [
        {
          "type": "button",
          "action": "submit",
          "label": "Submit Button"
        },
        {
          "type": "textfield",
          "value": "/data/someValue"
        }
      ]
    }
  ],
  "state": {
    "data": {
      "someValue": "Hello"
    }
  }
}
Eingebettete Vorschau

Response-Format

Der Server muss die Antwort in dem richtigen Format zurückschicken, damit das Formular aktualisiert werden kann. Die Antwort muss im Form eines JSON-Objektes sein, welches folgende Attribute enthält:

result

Ergibnis der Datenverarbeitung im Backend-System.

Mögliche Werte sind: success, failure

Folgende Atributte gelten nur für die erfolgreiche Rückmeldung.

Die Rückmeldung im Fehlerfall können beliebig weitere Attribute enthalten, um auf den Fehler hinzuweisen, diese werden alle in der Oberfläche angezeigt.

action

Einige Aktionen können ausgeführt werden, wenn die Anfrage erfolgreich am Backend-System verarbeitet wurden. Mögliche Aktionen sind:

  • setFormConfig: das aktuelle Formular in der Oberfläche wird ersetzt.

  • setFormState: die States des aktuelle Formular werden aktualisiert.

  • downloadFile: eine Datei wird beim Anwender heruntergeladen.

  • multiActions: mehrere Aktionen, welche in diesem Abschnitt beschrieben werden, können bei einer Response ausgeführt werden.

data

Typspezifische Daten, basiert auf der zu auszuführenden Aktion. Für folgende Aktion sollen entsprechende Daten in dem Objekt data bereitgestellt werden.

Beispiele

setFormConfig

  • formConfig: enthält die Definition des neuen Formulars

Beispiel:
{
   "result": "success",
   "action": "setFormConfig",
   "data": {
      "formConfig": {
         "metaData": {
            "id": -1,
            "name": "Extended Form",
            "version": 1,
            "author": "Quan"
         },
         "configuration": {
            "defaultLanguage": "de"
         },
         "components": [
            {
               "type": "container",
               "layout": "vertical",
               "label": "New Form",
               "components": [
               {
                  "type": "textfield",
                  "id": "textFeld",
                  "label": "Text Field"
               }
               ]
            }
         ],
         "state": {
            "data": {}
         }
      }
   }
}

setFormState

  • state: enthält die neuen States des Formulars. Die neue States werden mit den aktuellen States zusammengeführt.

Beispiel:
   {
      "result" : "success",
      "action" : "setFormState",
      "data"   : {
         "state" : {
            "address" : {
               "company": "Virtimo AG",
               "street": "Behrenstraße",
               "number": 18,
               "city": "Berlin",
               "country": "Germany"
            }
         }
      }
   }

downloadFile

Beispiel - Base64 encodierte Datei:
{
   "result": "success",
   "action": "downloadFile",
   "data": {
      "fileName" : "testfile.xml",
      "mimeType": "application/xml",
      "base64Encoded": true,
      "data": "PG1zZz4KPGNvbnRlbnQ+SGVsbG8gV29ybGQ8L2NvbnRlbnQ+CjwvbXNnPg=="
   }
}
Beispiel - Normale Text-Datei
{
   "result": "success",
   "action": "downloadFile",
   "data": {
      "fileName" : "testfile.txt",
      "data": "Hello World"
   }
}

multiActions

Beispiel:
{
   "result": "success",
   "action": "multiActions",
   "data": [
       {
           "action" : "setFormState",
           "data"   : {
               "state" : {
                   "address" : {
                   "company": "Virtimo AG",
                   "street": "Behrenstraße",
                   "number": 18,
                   "city": "Berlin",
                   "country": "Germany"
                   }
               }
           }
       },
       {
           "action": "downloadFile",
           "data": {
               "fileName" : "testfile.xml",
               "mimeType": "application/xml",
               "base64Encoded": true,
               "data": "PG1zZz4KPGNvbnRlbnQ+SGVsbG8gV29ybGQ8L2NvbnRlbnQ+CjwvbXNnPg=="
           }
       }
   ]
}

Keywords: