Form configuration - basic

• Form configuration - file structure and general configuration
• Form configuration - virtual panels

Form configuration - file structure and general configuration

{
  // General configuration of the form
  "panels": [
    {
      "name": "Application for vacation leave",
      "fields": [
          // Fields on the form
      ]
    }
  ],
  "translations": {
    "en": {
      // Translations
    },
    "pl": {
      // Translations
    }
  }
}

General configuration of the form

default_lang

Default form language. Here we enter the key from the translations section e.g. "en".

Remember that the form translations must be defined in the translations section!

redirect

The address of the redirection after the form has been correctly submitted. After clicking the send button.

 

custom_redirect

Custom redirect allows you to create your own redirection buttons after the form is correctly submitted.

Custom redirect configuration example:

"custom_redirect": [
    {
      "text": "Company Site",
      "redirect": "google.pl"
    },
    {
      "text": "CRM",
      "redirect": "google.pl"
    }
  ]

The parameter with the URL is "redirect" not "url".

This function transfers the parameters of the current URL (e.g. session)

check_session_id

This parameter can be either true or false.
True: The session will be checked on the backend side and if not correct, the form will not be added to the OTRS.
False: The session will not be verified on the backend side.

send_empty

Are you going to send blank fields. If this option is checked, the blank fields will also appear in the data sent by the form (which will lead to their display in the article).

name

Name of the form.

 

description

Description of the form.

nextStep

Content of the redirection button to the form.

icon

The icon... The dynamic forms mechanism uses icons compatible with Material Design.

https://material.io/resources/icons/?style=baseline

disabled

Is the form supposed to be active (if not, the form will be visible as a title for a given section of forms - you will find out more about this mechanism later in the documentation)

active

Should the form be active and clickable.

hidden

The form is to be shown in the list of available forms

 

pre_process_script (1.2.3)

This parameter allows you to run any perl script before the ticket is created. This can be used, for example, to create multiple tickets depending on the number of selected items in the form.

"pre_process_script": "custom_process.pl",

 

order_by (1.2.4)

Sorting of fields in the OTRS article

If we add this parameter, we can sort the fields in the article based on this value. 

"order_by": "order"

In this case, each field must contain an "order" parameter.

You can use the prepared "order" field, but you can also sort based on other parameters.

 

headless (>=1.2.12):

Headless - Running the form in heasless mode (hides the title and information bar, displays only the fields)

"headless": true,

OFF

 

ON

Form configuration - virtual panels

 

Virtual panels allow, for example, to separate thematic sections. If your form is long, you can use virtual panels to separate it into smaller sections.

If there is one virtual panel in your configuration, the form will be displayed normally. If you add more, additional buttons will appear at the top of the page to navigate through the virtual panels.

Remember to add a button on the last panel allowing you to send the form!

After filling in the form and pressing the send button (or if there is an error before sending), all panels will be merged for easier verification.

Example:

{
  "default_lang": "en",
  ...
  "panels": [
    {
      "name": "Panel 1 TITLE",
      "fields": [
        {
          //Field1
        },
        {
          //Field2
        },
      ]
    },
    {
      "name": "Panel 2 TITLE",
      "fields": [
        {
          //Field3
        },
        {
          //Field4
        },
      ]
    },
    {
      "name": "Panel 3 TITLE",
      "fields": [
        {
          //Field5
        },
        {
          //Send Button
        },
      ]
    },
}