...
Reference | Attribute | Description | ||||||
---|---|---|---|---|---|---|---|---|
| Pencil | The pencil opens the workflow repository with the listed workflows on the left, and the “+New workflow” button on the right | ||||||
| Workflow ListVersions | The workflow list contains all available workflows within the users rights. | ||||||
| +New Workflow VersionButton | The workflow version displays the versions of a button offers user to start a new workflow. | ||||||
| Detail ViewWorkflow List | The detail view offers a comprehensive overview of the selected workflow versionempty list offers a button “browse here” to add a new workflow. |
...
Workflow creation
This paragraph explains the creation of a workflow to the system. The workflow creation requires a name and a process model.
...
Reference | Attribute | Description | ||||||
---|---|---|---|---|---|---|---|---|
| ‘+New workflow’ Button | The button in the top right corner of the workflow view allows for the creation of a single new workflow. | ||||||
| Overwrite version pop-up | When importing a workflow, a pop-up message will appear to notify you if there’s another workflow with the same name. In such cases, all contents of the current workflow will be overwritten. please proceed to click “yes” button for the creation of the new workflow. |
Reference
Attribute
Reference | Attribute | Description | ||||||
---|---|---|---|---|---|---|---|---|
| Name | The name for the creation of a new workflow to the system. | ||||||
| Process Model Button | The 'Add process model' button allows to add a process model for the creation of a single workflow. |
Description | The description of the new workflow. | ||||
|
|
Process model
Status | The actual status of the created workflow. | ||||
|
|
Add
Last Modified | The last modified section displays the time of the creation of workflow. | ||||
|
|
Save
Once finished with naming and selecting the process model, clicking on the save button will add the workflow to the system.
Workflow version
...
Dropdown Button | Via a drop-down the desired process button model can be selected (Export / Archive / Version History) | |||||||
| Detailed view | The button offers a workflow detailed view. |
...
Workflow version
This paragraph explains the creation of a new workflow version and changing its information in detailed view in the system.
...
Reference | Attribute | Description | ||||||
---|---|---|---|---|---|---|---|---|
| CopyProcess model view | The copy icon allows to create a new version of the current workflow. |
Reference
Attribute
Description
workflow process model view is displayed. | |||||
|
|
Form | The |
form tab displays the existing form or a button for the creation/importation of the new form. | |||||
|
|
Name
Version History | The version history tab presents a list of available versions ready for publishing, along with functionalities such as importing, exporting, and copying existing versions | ||||
|
|
Comment
Workflow Items | The workflow items drop-down button expands to reveal three additional drop-down buttons, allowing users to select events, groups, and variables. | ||||
|
|
Add process model
Tools | Various tools like zoom in, zoom out, rotate and pan are available for using on the process model. | ||||
|
|
Edit | The |
edit button offers editing of the actual model process. | |||||
|
|
Workflow Properties | The |
workflow properties button opens a modal where you can edit properties and webform content. | |||||
|
|
Save
Export / Import | The buttons offer importing and exporting of the process models. | ||||
|
| Publish | After clicking on the 'Publish' button, the current workflow version is available to users. Processes can be started and edited. |
...
Form Design
After creating a new version and saving all its information, in the detailed view we can add a new form for the selected version. The form has direct access to a number of tabs such as:
Designer
Preview
Rules
Variables
Data types
Element Control
After selecting the desired version of workflow the user can click the ‘Add form’ button from the detailed view to create a new form.
...
Designer
The
...
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. | ||||||
| Label: Position | The position of the label can be changed into left, right, tob or bottomFont Style | Any style can be given to the label with css code. Possible examples font-style. | ||||||
| Label: AlignmentFont Color (CSS) | The alignment color of the label font can be changed into left, center or rightto different colors. |
...
|
...
|
Reference
| Underline: Color (CSS) | The color of the underline can be changed to 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. |
...
Dividers can be used to strictly separate one part of the document from another. This divider can either be a horizontal line or simply a big space. For adding a divider element the user can drag and drop the element to a specific container. Divider 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 divider | ||||||
| Line | You can either choose to display a line as divider or simply have an optical divider by space. The default option is displaying the line. |
...
Textarea can be used so that the user has more space to type something than he has with a simple imput field. E.g. a coherent text. For adding a textarea element the user can drag and drop the element to a specific container. Textarea elements can be copied via the plus symbol and removed via the delete symbol.
...
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 textarea 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. | |||||||
| Size | Here the width and the height of the textarea can be specified. The width is given in characters and the height is given in lines. | |||||||
| Icon | With a dropdown an Placeholder | Here the placeholder text of the comment field can be added and edited. | ||||||
| Icon | With a dropdown an icon is selectable which is displayed next to the textarea 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 textarea field. As default the icon is located on the right of the textarea 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. |
...
Rich text can be used to give the user more space to type, just as the textarea does but with the benefit of letting the user have more styling options for his text such as size, color, font, font-weight and text-alignment. For adding a rich text element the user can drag and drop the element to a specific container. Rich text elements can be copied via the plus symbol and removed via the delete symbol.
...
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 rich text 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. | ||||||
| Height | The Height of the textarea can be specified here in pixels. It is set at a default height of 150px. | ||||||
| Placeholder | Here the placeholder text of the rich text can be added and edited. | ||||||
| Icon | With a dropdown an icon is selectable which is displayed next to the rich text 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 rich text field. As default the icon is located on the right of the rich text 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. |
...
A custom HTML can be used to have even more design options which are not covered by the basic and advanced elements available in the Form designer. For adding a custom HTML element the user can drag and drop the element to a specific container. Custom HTML 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 custom HTML | ||||||
| HTML | Any HTML code can be entered here | ||||||
| Label | Here the text of the label can be changed. Optionally the label can be hidden by selecting the checkbox. | ||||||
| Icon | With a dropdown an icon is selectable which is displayed next to the custom HTML element. 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 custom HTML element. As default the icon is located on the right of the custom HTML element. | |||||||
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. |
...
Autocomplete predicts the rest of a word a user is typing based on a limited amount of possible options given during designing the form. For adding an autocomplete element the user can drag and drop the element to a specific container. Autocomplete elements can be copied via the plus symbol and removed via the delete symbol.
...
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 autocomplete 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. | ||||||
| Placeholder | This attribute specifies a short hint that describes the expected value of an autocomplete field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the autocomplete field before the user enters a value. | ||||||
| Checkboxes | Here you can select whether the user should be able to see all possible options and also be able to manually choose out of the available options. By ticking case sensitive search results shown to the user depend on the casing of his search. | ||||||
| Select options | Options can be added with the plus icon. By clicking the delete icon an option can be deleted. |
...
The user is able to select a specific context in the Section Handling (Context) and define how the form will be shown in that context.
...
Reference | Attribute | Description | ||||||
---|---|---|---|---|---|---|---|---|
| Section Handling (Context) | The user can select a specific context to define how the form should behave in that context. | ||||||
| Select element | After selecting the desired context the user can select a container or element to show its element control settings for the current context selected. | ||||||
| Element Control | In the element control setting of a select container or element the user can define whether it should be visible, writeable or required. | ||||||
| Existing | Here is shown for which specific context an element control setting already exists. |
...
The form tab ‘Preview’ displays how a form is shown in the whole process or in a specific part of the process.
...
Reference | Attribute | Description | ||||||
---|---|---|---|---|---|---|---|---|
| Form preview selection | The user can see how a form is designed in a specific part of the process model. | ||||||
| Preview | The current form preview selected by the user in form preview selection. |
...
The form tab ‘Rules’ are sets of rules which can change the behavior of the form depending on the trigger events.
...
Reference | Attribute | Description | ||||||
---|---|---|---|---|---|---|---|---|
| Create rule | While the user opens the ‘Rules’ tab for the first time the 'Create rule'-button allows to create a new rule. | ||||||
| Create | The plus button in the lower left of the ‘Rules’ tab allows for the creation of a new rule. | ||||||
| Trigger event | On the left side of the view there are trigger events listed. Under each trigger event, the created rules are shown accordingly slightly indented (see next image). |
Reference | Attribute | Description | ||||||
---|---|---|---|---|---|---|---|---|
| Name | The name for the creation of a new rule to the system. | ||||||
| Trigger event | Via drop-down the desired trigger event can be selected. Trigger events of a rule can be on form load, on form input and before form submit/save. | ||||||
| Enable RuleConditions | When the checkbox is checked, the rule is activated and if the conditions are fulfilled it will be triggered. | ||||||
| Overwrite | When this checkbox is ticked and the rules consequence points to a field that already has a value in it, the value will be overwritten by whatever the rule says. | ||||||
| Conditions | On the condition part the user sets a condition state On the condition part the user sets a condition state of an element (e.g. radio button element selected by variable name should not be equal with value 'Yes' depending on the condition the user can alter the behavior of another element or container. | ||||||
| Buttons | With the 'Copy rule'-button the rule can be copied and with the 'Delete rule'-button the rule can be deleted.. |
Supporting user's language in TSD rules
Reference | Attribute | Description | ||||||
---|---|---|---|---|---|---|---|---|
| SYS.CURRENT_USER_LANGUAGE | On the "Select an Element" user can set rules according to their preferred language that are taken from system variables. | ||||||
| Select a Property | On the "Select Property" field, users can choose the options available, such as Equals. Other options are: Has a value, Contains, Starts with etc. | ||||||
| Language Value | In the "Value" field user must enter the language that wants to apply to the rule such as German. Other example includes "English", “Bulgarian” or any supported language in the product. | ||||||
| Select an Element | User selects the element for the applied rule like “comment” component in this case | ||||||
| Select a Property | Set the property you want to be applied for the component: Required, Writeable, Value etc. We want to set the value for the comment text area in this case. | ||||||
| Value | Sett the value you want to apply to the rule. |
Info |
---|
The rule above can be interpreted as: when user set the language as German in the product, then add in the comment section the value "Keyboard layout must be German" |
To test the rules that are enabled, the user can go to the ‘Preview’ tab and check for rules behavior depending on the configuration of the rule.
...
...
Reference
...
Attribute
...
Description
...
Status | ||||
---|---|---|---|---|
|
...
Rule test
...
As the rule was configured, while nothing is selected or when selecting 'Yes' on the radio button the select with the list items is shown.
...
...
Reference
...
Attribute
...
Description
...
Status | ||||
---|---|---|---|---|
|
...
Rule test
...
If you start the instance of the process definition after setting the rule, you will have
a) When English is set as user language, the comment textarea is empty
...
b) When German is set as user language, the textarea is filled with the rule “Keyboard must have German Layout”
...
...
Variables
Within the form tab 'Variables' all form variables and system variables are listed.
...
Reference | Attribute | Description | ||||||
---|---|---|---|---|---|---|---|---|
| Form variables | Here all variables created by adding elements in the form are listed with their corresponding information, such as name, field/element, index field and data type. By clicking the three dots variables can be edited or deleted. | ||||||
| Add variable | The 'Add variable' button enables the designer to manually add a variables and set the information about this variable. | ||||||
| System variables | Here all system variables are listed. They are predefined and can not be changed or deleted. It is also not possible to add system variables. |
...
Within the ‘Data types’ tab the user can create custom data types to use in the forms.
...
Reference | Attribute | Description | ||||||
---|---|---|---|---|---|---|---|---|
| Create data type | While the user opens the ‘Data types’ tab for the first time the 'Create data type'-button allows to create a new data type. | ||||||
| Create | The plus button in the lower left of the ‘Data types’ tab allows for the creation of a new data type. | ||||||
| Data types | On the left side of the view there are listed all data types created. |
Reference | Attribute | Description | ||||||
---|---|---|---|---|---|---|---|---|
| Data type properties | To create a data type, field name is mandatory. The user can select a base type with a drop-down. A prefix and a suffix can be added to a data type. E.g. for a number base type the user can define its decimal places and the value range of the number. | ||||||
| Test data type | For testing the new data type the user can check its behavior and view with ‘Test Data Type’ field. |
...
Within the 'Element Control’ tab the user can see all element controls created in the 'Designer' tab.
...
Reference | Attribute | Description | ||||||
---|---|---|---|---|---|---|---|---|
| Element control settings | For each element control setting the context, the field name, the element type, the superordinant container (if existing) and the control options are displayed here. The options (visible, writeable, required) can be changed by clicking on the respective checkbox. By clicking the trash can on the right hand side the element control setting can be deleted. |
...
After completing designing the form, the user can publish the workflow version with the designed form.
...
Reference | Attribute | Description | ||||||
---|---|---|---|---|---|---|---|---|
| Version | After the form completion the user can select the version of the workflow. | ||||||
| Publish | The ‘Publish’ button in the lower right of the detailed view allows the workflow version to be published. |
Reference | Attribute | Description | ||||||||
---|---|---|---|---|---|---|---|---|---|---|
| Publish pop-up | The pop-up message must appears and “Publish” button must be clicked. |
Reference | Attribute | Description | ||||||
---|---|---|---|---|---|---|---|---|
| Published | After publishing the workflow, there is the new designed form published in the |
Workflow tab and the process instance with the new form attached is now startable. |