Submit - Form Submission

A submit is an action that sends the current form to the backend system. This requires that a submitUrl has been specified in the configuration.

A submit is typically triggered by the user via a button. If no submitUrl is specified in the form’s configuration, the submit fails immediately and the user receives the error message “missing submitUrl.”

Example

In the following example, triggering the submit results in an error because no response is received from the server. However, the submit message containing the current state of the form is sent, which can be seen, for example, in the Network tab of the Developer Tools. A "server-side failure" message is displayed to the user.

Example submit.json

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

Open preview in a separate window

Response Format

The server must return the response in the correct format so that the form can be updated. The response must be in the form of a JSON object containing the following attributes:

`result`

Result of data processing in the backend system.

Possible values are: success, failure

The following attributes apply only to a successful response.

In the event of an error, the response may contain any additional attributes to indicate the error; these are all displayed in the user interface.

`action`

Certain actions can be performed once the request has been successfully processed by the backend system. Possible actions include:

setFormConfig: The current form in the user interface is replaced.
setFormState: The states of the current form are updated.
downloadFile: A file is downloaded to the user’s device.
multiActions: Multiple actions, described in this section, can be executed in a single response.

`data`

Type-specific data, based on the action to be executed. For the following action, the corresponding data should be provided in the object data.

Examples

`setFormConfig`

formConfig: contains the definition of the new form

Example:

{
   "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: contains the new states of the form. The new states are merged with the current states.

Example:

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

`downloadFile`

Example - Base64-encoded file:

{
   "result": "success",
   "action": "downloadFile",
   "data": {
      "fileName" : "testfile.xml",
      "mimeType": "application/xml",
      "base64Encoded": true,
      "data": "PG1zZz4KPGNvbnRlbnQ+SGVsbG8gV29ybGQ8L2NvbnRlbnQ+CjwvbXNnPg=="
   }
}

Example - Plain text file

{
   "result": "success",
   "action": "downloadFile",
   "data": {
      "fileName" : "testfile.txt",
      "data": "Hello World"
   }
}

`multiActions`

Example:

{
   "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: