Additional information

Output data structure

{
  "options": {
    // Section "options"
  },
  "data": {
    // Section "data"
  }
}

Section "options"

Here you will find all additional information describing the form, e.g. checking the session, the session itself, the name of the form, etc.

Section "data"

Here are all the fields added to the form. Each field has several attributes:

type

Type of field to be sent.

id

The identifier of the sent field.

value

Field value.

Important!
This is a field value but one that is not configurable. For fields of the text type, it will be the same as the "output" attribute, but for fields of the select type, for example, it will always indicate the identifier of the selected option, that is the "value" parameter.

The "output_value" setting does not work on this field.

label

Field label.

output

Output field value. This value is set in the parameter "output_value".

ContentType

This attribute will only be added for the "file" field.

It indicates the type of attachment.

Filename

This attribute shall be added only in case of the "file" field.

It shall indicate the name of the attachment.

Example

{
  "options": {
    "check_session_id": false,
    "name": "Application for vacation leave - Copy",
    "session_id": "undefined"
  },
  "data": {
    "OTRS_Ticket_Owner": {
      "type": "text",
      "id": "OTRS_Ticket_Owner",
      "value": "+48 123 321 123",
      "label": "Phone number",
      "output": "+48 123 321 123"
    },
    "UserFirstName": {
      "type": "text",
      "id": "UserFirstName",
      "value": "John",
      "label": "First name",
      "output": "John"
    },
    "UserLastName": {
      "type": "text",
      "id": "UserLastName",
      "value": "Doe",
      "label": "Last name",
      "output": "Doe"
    },
    "UserFirstAndLastName": {
      "type": "comparefield",
      "id": "UserFirstAndLastName",
      "value": "Your Name: John Doe",
      "label": "User first name and last name",
      "output": ""
    },
    "carModel": {
      "type": "text",
      "id": "carModel",
      "value": "Nissan Note",
      "label": "Car",
      "output": "Nissan Note"
    },
    "carType": {
      "type": "text",
      "id": "carType",
      "value": "PO 123321",
      "label": "Registration number",
      "output": "PO 123321"
    },
    "1_7_IssueType": {
      "type": "select",
      "id": "1_7_IssueType",
      "value": "Car",
      "label": "I have a problem with",
      "output": "Car"
    },
    "dateTime": {
      "type": "datetime",
      "id": "dateTime",
      "value": "2020-05-28 12:00:00",
      "label": "Multiple date and time",
      "otrs_visible": "all",
      "output": "2020-05-28 12:00:00"
    },
    "dateTime2": {
      "type": "datetime",
      "id": "dateTime2",
      "value": "2020-05-08 12:00:00",
      "label": "Date range",
      "otrs_visible": "all",
      "output": "2020-05-08 12:00:00"
    },
    "Name": {
      "type": "text",
      "id": "Name",
      "value": "John Example",
      "label": "Your name",
      "output": "John Example"
    },
    "OTRS_Ticket_Title": {
      "type": "text",
      "id": "OTRS_Ticket_Title",
      "value": "Example PDF",
      "label": "Example PDF",
      "output": "Example PDF"
    },
    "Cars": {
      "type": "checkbox",
      "id": "Cars",
      "value": [
        "BMW"
      ],
      "label": "Cars",
      "output": []
    },
    "Rules1": {
      "type": "checkbox",
      "id": "Rules1",
      "value": [
        "I Agree to Terms #1"
      ],
      "label": "Rules",
      "output": []
    },
    "Rules2": {
      "type": "checkbox",
      "id": "Rules2",
      "value": [
        "I Agree to Terms #2"
      ],
      "label": "Rules2",
      "output": []
    },
    "Cars1": {
      "type": "radio",
      "id": "Cars1",
      "value": "Mercedes",
      "label": "Cars",
      "output": ""
    },
    "ckEditor": {
      "type": "ckeditor",
      "id": "ckEditor",
      "value": "<p><strong>1232</strong></p>\n",
      "label": "CKEditor",
      "output": "<p><strong>1232</strong></p>\n"
    },
    "23SelectCity": {
      "type": "text",
      "id": "23SelectCity",
      "value": "London",
      "label": "City",
      "otrs_visible": "all",
      "output": "London"
    },
    "Number1": {
      "type": "number",
      "id": "Number1",
      "value": "123",
      "label": "Number",
      "otrs_visible": "all",
      "output": "123"
    },
    "Textarea": {
      "type": "textarea",
      "id": "Textarea",
      "value": "Hello,\nHello,\nHello,\nHello,\nHello,\nHello,\nHello,",
      "label": "Textarea",
      "otrs_visible": "all",
      "output": "Hello,\nHello,\nHello,\nHello,\nHello,\nHello,\nHello,"
    },
    "fileField": {
      "type": "file",
      "id": "fileField",
      "value": "BASE64 Content",
      "label": "Attachment",
      "output": {},
      "ContentType": "application/octet-stream",
      "Filename": "piler 28052020 - FOSS.md"
    }
  }
}

Field size and responsive web design

Dynamic forms can work on large, medium and small screens as well as on smartphones.

The size of fields is set in the parameter size.

The system can also work as an application installed on the phone in the form of PWA.

We are using a standard 12 column fluid responsive grid system. The grid helps you layout your page in an ordered, easy fashion.

image-1590660168382.png

 

12 columns

Our standard grid has 12 columns. No matter the size of the browser, each of these columns will always have an equal width.

For now, just know that the s1 stands for small-1 which in plain English means "1 column on small screens".

 

Offsets

To offset, simply add offset-s2 to the class where s signifies the screen class-prefix (s = small, m = medium, l = large) and the number after is the number of columns you want to offset by.

image-1590660033256.png

 

Responsive Layouts

Screen Sizes

  Mobile Devices
<= 600px
Tablet Devices
> 600px
Desktop Devices
> 992px
Large Desktop Devices
> 1200px
Class Prefix s m l xl
Container Width 90% 85% 70% 70%
Number of Columns 12 12 12 12

image-1590660127114.png

 

Multilanguage support

Dynamic forms can support any language.

The lower section of the form configuration contains translations in every available language. (File and directory structure)

Default messages are available in Polish and English. If you want, you can add your own language.

Each form must contain a "translations" section.

{
  ...
  "translations": {
    "en": {
      "Alert -Validate-Success- confirmButtonText": "Send",
      "Alert -Validate-Success- title": "Your form is correct!",
      "Alert -Validate-Success- text": "Now you can send the form or correct.",
      "Alert -Validate-Success- showForm": "Show form",
      "Alert -Send-Success- confirmButtonText": "Ok",
      "Alert -Send-Success- title": "Success!",
      "Alert -Send-Success- text": "Your form has been sent correctly!",
      "Alert -Send-Error- confirmButtonText": "Ok",
      "Alert -Send-Error- title": "Error!",
      "Alert -Send-Error- text": "OTRS rejected the form!"
    },
    "pl": {
      "Alert -Validate-Success- confirmButtonText": "Wyślij",
      "Alert -Validate-Success- title": "Formularz został poprawnie wypełniony",
      "Alert -Validate-Success- text": "Teraz możesz go wysłać lub poprawić.",
      "Alert -Validate-Success- showForm": "Zobacz formularz",
      "Alert -Send-Success- confirmButtonText": "Dobrze",
      "Alert -Send-Success- title": "Udało się!",
      "Alert -Send-Success- text": "Twój formularz został dostarczony!",
      "Alert -Send-Error- confirmButtonText": "Dobrze",
      "Alert -Send-Error- title": "Błąd!",
      "Alert -Send-Error- text": "OTRS odrzucił formularz!"
    }
  }
}

We can add any number of translations to each section, we can also create our own section.

Each place in the dynamic form system that displays data can take 2 text formats:

Text Translation

If you want to enable the use of forms in multiple languages, you must do the following.

Enabling the language change button in the global settings

Go to SystemConfig.json configuration and set the parameter "ShowLangButton" to true. (Main configuration file - global settings)

If you want, you can also adjust the color here and set the default language.

Adding translations to the form file.

Now you just need to add translations to the form file. Below the last system translation ["Alert -Send-Error- text": "OTRS rejected the form!"], you can add your own translations.

Use of translations

If you want to use a translation, you just need to enter its key in the braces.

It will display "Your name", regardless of the selected language.

{
	"label":"Your Name"
}

It will display the translation of "Your name" from the section with the currently loaded language.

{
	"label":"{Your Name}"
}

Icons

Icons are fully compatible with material design

image-1590662018472.png

If you want to add your icon, you can use all icons that come with the material design package.

All available icons can be found at this address, for example: https://material.io/resources/icons/?style=baseline

 

image-1655992778898.png

image-1655992789858.png

image-1655992794311.png