...
After selecting the desired version of workflow the user can click the ‘Add form’ button from the detailed view to create a new form.
...
Reference | Attribute | Description | ||||||
|---|---|---|---|---|---|---|---|---|
| Form | The Form tab opens an empty form page, providing options to either import an existing form or create a new one, | ||||||
| Create / Import | The buttons “Import form” and “Create form” can be used for adding a new form. |
...
Designer
The form tab ‘Designer’ displays a view to add containers and elements for designing a form.
...
Reference | Attribute | Description | ||||||
|---|---|---|---|---|---|---|---|---|
| Elements | On the left side there are elements and containers which can be added to a form. | ||||||
| Form | The middle section contains all the elements and containers that were added to the form. | ||||||
| Settings | Each element has its own settings that can be altered on the right section. |
...
To begin adding elements to the form the user should first add a container. Each element will be added to a container. For adding a container element the user can drag and drop a specific container or can use the buttons in the form are with given row-layouts.
...
Reference | Attribute | Description | ||||||
|---|---|---|---|---|---|---|---|---|
| Row | Containers can be added to the form by simply dragging and dropping the desired container to the middle section. Each container has its width options shown in brackets. | ||||||
| Container | After adding the container the user can see its width separated by vertical dashed lines. On the left side of the container there are pointers which can change the container position and on the right side there is a delete icon for deletion. | ||||||
| Settings of container | By clicking the container the user is able to see the information about this container on the right section. |
...
It is also possible to add multiple tabs into the form.
...
Reference | Attribute | Description | ||||||
|---|---|---|---|---|---|---|---|---|
| Tab | Here all the different tabs you created are shown. Containers can be added to each tab by simply dragging and dropping the desired container to the middle section. Each container has its width options shown in brackets. | ||||||
| Name | Here a name can be given to the 'Tabs'-container.. | ||||||
| Tab label | Here each tab needs to be given an individual name, as this name is displayed to the user as head of the corresponding tab in order to be able to differentiate the tabs. Tabs can be added with the plus icon. By clicking the delete icon a tab can be deleted. |
...
Reference | Attribute | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Element: Alignment | The alignment of the element can be changed into right, center, left or stretch within the cell. | ||||||||
| Label: Styles (CSS)Font Size | Any style can be given to the label with css code. Possible examples are font-weight or font-size. | ||||||||
| Label: Margin (in px) | The spacing to the right of the element can be stated in pixels hereFont Weight | Any style can be given to the label with css code. Possible examples font-weight. | |||||||
| Font Style | Any style can be given to the label with css code. Possible examples font-style. | ||||||||
| Font Color (CSS) | The position color of the label font can be changed into left, right, tob or bottomto different colors. | ||||||||
| Label: AlignmentUnderline: Color (CSS) | The alignment color of the label underline can be changed into left, center or rightto different colors. |
Text element:
...
Reference | Attribute | Description | ||||||
|---|---|---|---|---|---|---|---|---|
| Element: Alignment | The alignment of the text element can be changed into right, center, left or stretch within the cell. | ||||||
| Font size (in %) | The font size of a text is per default 100 %. If the percentage is increased, the font will be enlarged and if it is decreased, the font will be reduced accordingly. | ||||||
| Font weight | Normal is the default font weight. It can be changed into light or bold. | ||||||
| Font style | Normal is the default font style. It can be changed into italic. | ||||||
| Font color (CSS) | Per default the font color is black. It can be changed individually. The css colour names and the formats Hex, RGB and HSL are supported. | ||||||
| Underline | Per default no underline is selected. Text can be underlined thin, medium and bold. | ||||||
| Underline color (CSS) | If an underline style is selected, the default color is black. It can be changed individually. The css colour names and the formats Hex, RGB and HSL are supported. |
...
A text element is used for declaring a title, a headline or a simple text displayed in the Form. The content of the text is changed via the element settings. For adding a text element the user can drag and drop the element to a specific container. Text elements can be copied via the plus symbol and removed via the delete symbol.
...
Reference | Attribute | Description | ||||||
|---|---|---|---|---|---|---|---|---|
| Name | Here an individual name can be given to the text field | ||||||
| Text | Here the text displayed by the text field can be entered |
...
Reference | Attribute | Description | ||||||
|---|---|---|---|---|---|---|---|---|
| Label | Here the text of the label can be changed. Optionally the label can be hidden by selecting the checkbox. | ||||||
| Variable | For each input field a unique variable name is required. Per default the variable is set automatically. The user can change the variable name manually or use the button 'Label as variable name' to generate a variable name from the label text. | ||||||
| Index Field | Index fields are used to display information from a Form, directly in the tasks and process instances lists. They provide extended information on the process instance and can be used for addition filtering and sorting. See also Filter, sorting and column configuration. | ||||||
| Data type | By default, the data types 'text' and 'number' are provided. The data type 'text' is pre-selected. In the tab 'Data types' further data types can be created (see section 'Data types' for more information). | ||||||
| Placeholder | This attribute specifies a short hint that describes the expected value of an input field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the input field before the user enters a value. | ||||||
| Password | This field offers enabling and disabling of the password field | ||||||
| Icon | With a dropdown an icon is selectable which is displayed next to the input field. A '?' for help or a '!' for Info can be selected. | ||||||
Icon: Position | Here the position of the icon can be selected via dropdown. Either the dropdown is on the left or on the right of the input field. As default the icon is located on the right of the input field. | |||||||
Icon: Text | Here the text is entered that is supposed to be shown to the user when hovering over the icon during fulfilling his tasks. |
...