Submit - Form submission

The submit is an action that transmits the current form to the backend system. The prerequisite for this is that a submitUrl must have been specified in the configuration.

A submit is usually initiated by the user via a Button button. If no submitUrl is specified in the form in the configuration, the submit fails directly and the user receives the error message "missing submitUrl".

Example

In the following example, triggering the submit leads to an error, as no message is returned from a server. However, the submit message with the current status of the form is sent, which can be seen in the Network tab of the developer tools, for example. A "server-side failure" message is displayed for 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 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 that contains the following attributes:

`result`

Result of data processing in the backend system.

Possible values are: success, failure

The following attributes only apply to the successful response.

The response in the event of an error can contain any other attributes to indicate the error; these are all displayed in the interface.

`action`

Some actions can be executed if the request has been successfully processed on the backend system. Possible actions are

setFormConfig: the current form in the interface is replaced.
setFormState: the states of the current form are updated.
downloadFile: a file is downloaded from the user.
multiActions: several actions, which are described in this section, can be executed in a response.

`data`

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

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 - Normal 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: