Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

This guide will provide the user with the necessary information about designing a Form in the system with instructions and tools that are implemented in the system. The chapter about the Form Designer is divided into three segments. One will focus on the workflows, the second about designing a form and the third on publishing the workflow with the form.


Workflow View

After logging into the system the user can click on the pencil in the navigation bar on the left hand side to access the workflow repository. The user has access to all available workflows within his rights. A workflow consists of one form and one or more process models. Each process version can only be included in one workflow. 

screendshot1.png

Reference

Attribute

Description

Status
colourRed
title1

Pencil

The pencil opens the workflow repository with the listed workflows on the left, and the “+New workflow” button on the right

Status
colourRed
title2

Workflow Versions

The workflow list contains all available workflows within the users rights.

Status
colourRed
title3

+New Workflow Button

The button offers user to start a new workflow.

Status
colourRed
title4

Workflow List

The empty 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.

Screenshot 2024-05-15 133643.png

Reference

Attribute

Description

Status
colourRed
title1

‘+New workflow’ Button

The button in the top right corner of the workflow view allows for the creation of a single new workflow.

Status
colourRed
title2

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.

Screenshot 2024-05-15 135610.png

Reference

Attribute

Description

Status
colourRed
title1

Name

The name for the creation of a new workflow to the system.

Status
colourRed
title2

Description

The description of the new workflow.

Status
colourRed
title3

Status

The actual status of the created workflow.

Status
colourRed
title4

Last Modified

The last modified section displays the time of the creation of workflow.

Status
colourRed
title5

Dropdown Button

Via a drop-down the desired process button model can be selected (Export / Archive / Version History)
Export - exporting the workflow to your computer.
Archive - archiving the workflow into the archived list.
Version History - redirects to the version history page.

Status
colourRed
title6

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.

Screenshot 2024-05-15 144429.png

Reference

Attribute

Description

Status
colourRed
title1

Process model view

The workflow process model view is displayed.

Status
colourRed
title2

Form

The form tab displays the existing form or a button for the creation/importation of the new form.

Status
colourRed
title3

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

Status
colourRed
title4

Workflow Items

The workflow items drop-down button expands to reveal three additional drop-down buttons, allowing users to select events, groups, and variables.

Status
colourRed
title5

Tools

Various tools like zoom in, zoom out, rotate and pan are available for using on the process model.

Status
colourRed
title6

Edit

The edit button offers editing of the actual model process.

Status
colourRed
title7

Workflow Properties

The workflow properties button opens a modal where you can edit properties and webform content.

Status
colourRed
title8

Export / Import

The buttons offer importing and exporting of the process models.

Status
colourRed
title9

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.

Screenshot 2024-05-15 152831.png

Reference

Attribute

Description

Status
colourRed
title1

Form

The Form tab opens an empty form page, providing options to either import an existing form or create a new one,

Status
colourRed
title2

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.

Screenshot 2024-05-15 154019.png

Reference

Attribute

Description

Status
colourRed
title1

Elements

On the left side there are elements and containers which can be added to a form.

Status
colourRed
title2

Form

The middle section contains all the elements and containers that were added to the form.

Status
colourRed
title3

Settings

Each element has its own settings that can be altered on the right section.

Add containers

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.

Screenshot 2024-05-15 154559.png

Reference

Attribute

Description

Status
colourRed
title1

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.

Status
colourRed
title2

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.

Status
colourRed
title3

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.

Screenshot 2024-05-15 155256.png

Reference

Attribute

Description

Status
colourRed
title1

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.

Status
colourRed
title2

Name

Here a name can be given to the 'Tabs'-container..

Status
colourRed
title3

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.  

Settings of container
Element settings
Screenshot 2024-05-15 155601.png

Reference

Attribute

Description

Status
colourRed
title1

Name

Here an individual name can be given to the container

Element control

For each container it can be defined whether it should be readable, writeable or required including all elements contained in it. If no element control is specified, this container inherits the element control from the form default (see section Section Handling for more information).

Screenshot 2024-05-15 155708test.png

Add basic elements

After adding the container the user is able to add elements to the desired container. Each element has its own element settings, element style , element control and the possibility to use connections. 

General options of basic elements
Element settings

The element settings depend on the element type and are explained for each in the following paragraphs.

Element style

The options of the element styles are identical for all element types except the text element. The following styles are available. 

All elements except text element:

Screenshot 2024-05-15 160819.png

Reference

Attribute

Description

Status
colourRed
title1

Element: Alignment

The alignment of the element can be changed into right, center, left or stretch within the cell. 

Status
colourRed
title2

Font Size

Any style can be given to the label with css code. Possible examples font-size.

Status
colourRed
title3

Font Weight

Any style can be given to the label with css code. Possible examples font-weight.

Status
colourRed
title4

Font Style

Any style can be given to the label with css code. Possible examples font-style.

Status
colourRed
title5

Font Color (CSS)

The color of the font can be changed to different colors.

Status
colourRed
title6

Underline: Color (CSS)

The color of the underline can be changed to different colors.

Text element:

Screenshot 2024-05-16 093526.png

Reference

Attribute

Description

Status
colourRed
title6

Element: Alignment

The alignment of the text element can be changed into right, center, left or stretch within the cell. 

Status
colourRed
title7

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.

Status
colourRed
title8

Font weight

Normal is the default font weight. It can be changed into light or bold. 

Status
colourRed
title9

Font style

Normal is the default font style. It can be changed into italic. 

Status
colourRed
title10

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. 

Status
colourRed
title11

Underline

Per default no underline is selected. Text can be underlined thin, medium and bold.

Status
colourRed
title12

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. 

Element control

For each element can be defined whether it should be readable, writeable or required. If no element control is specified, this element inherits the element control from the container (see section Section Handling for more information). 

Screenshot 2024-05-16 094030.png

Connectors

Each element can also display information from connectors. More information about how to use and implement connectors is available in the chapter Connectors.

Screenshot 2024-05-16 094300.png

Insert a text element

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.

Screenshot 2024-05-16 095051.png

Reference

Attribute

Description

Status
colourRed
title1

Name

Here an individual name can be given to the text field

Status
colourRed
title2

Text

Here the text displayed by the text field can be entered

Insert an input field

Users can enter data in an input field. The input field element can be displayed in several ways. Generally it consists of a label and an input area. For adding an input field element the user can drag and drop the element to a specific container. Input field elements can be copied via the plus symbol and removed via the delete symbol.

Screenshot 2024-05-16 165725.png

Reference

Attribute

Description

Status
colourRed
title1

Label

Here the text of the label can be changed. Optionally the label can be hidden by selecting the checkbox. 

Status
colourRed
title2

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.

Status
colourRed
title3

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

Status
colourRed
title4

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).

Status
colourRed
title5

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.

Status
colourRed
title6

Password

This field offers enabling and disabling of the password field

Status
colourRed
title7

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.

Insert a datepicker

To record a date, the datepicker element is used. The datepicker element provides users a popup calendar for selecting a date or date and time. When a user changes the language, the date-time format is automatically converted to the date-time format valid to the selected language. See: Valid Date-Time Formats. For adding a datepicker element the user can drag and drop the element to a specific container. Datepicker elements can be copied via the plus symbol and removed via the delete symbol.

Screenshot 2024-05-16 113408.png

Reference

Attribute

Description

Status
colourRed
title1

Label

Here the text of the label can be changed. Optionally the label can be hidden by selecting the checkbox. 

Status
colourRed
title2

Variable

For each datepicker 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.

Status
colourRed
title3

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

Status
colourRed
title4

Type

By default, a single date can be selected in the calendar popup. But there is also the possibility to enter multiple dates or a period of time.

Status
colourRed
title5

Timepicker

Additional the calendar popup can be extended with a timepicker for entering a time.

Status
colourRed
title6

Icon

With a dropdown an icon is selectable which is displayed next to the datepicker 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 datepicker field. As default the icon is located on the right of the datepicker 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.

Insert a radio button

Radio Buttons are selection boxes that are always grouped together. Only one choice can be made from this group. For adding a radio button element the user can drag and drop the element to a specific container. Radio button elements can be copied via the plus symbol and removed via the delete symbol.

Screenshot 2024-05-16 133451.png

Reference

Attribute

Description

Status
colourRed
title1

Label

Here the text of the label can be changed. Optionally the label can be hidden by selecting the checkbox. 

Status
colourRed
title2

Variable

For each radio button 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.

Status
colourRed
title3

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

Status
colourRed
title4

Layout

The options of the radio button element can be displayed one below the other as list or in one line as block.

Status
colourRed
title5

Select options

Further select options can be added with the plus icon. By clicking the delete icon an option can be deleted.  

Insert a checkbox

Checkboxes are also selection boxes, but can be clicked individually and independently. For adding a checkbox element the user can drag and drop the element to a specific container. Checkbox elements can be copied via the plus symbol and removed via the delete symbol.

Screenshot 2024-05-16 134443.png

Reference

Attribute

Description

Status
colourRed
title1

Label

Here the text of the label can be changed. Optionally the label can be hidden by selecting the checkbox. 

Status
colourRed
title2

Variable

For each checkbox 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.

Status
colourRed
title3

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

Status
colourRed
title4

Text

The text of the checkbox can be changed here. If the checkbox should be checked when opening the Form, the button 'Active (checked)' must be selected. 

Status
colourRed
title5

Icon

With a dropdown an icon is selectable which is displayed next to the checkbox 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 checkbox field. As default the icon is located on the right of the checkboxfield.

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.

Insert a select

A select element is used to display selection options in a drop-down menu or list. For adding a select element the user can drag and drop the element to a specific container. Select elements can be copied via the plus symbol and removed via the delete symbol.

Screenshot 2024-05-16 135224.png

Reference

Attribute

Description

Status
colourRed
title1

Label

Here the text of the label can be changed. Optionally the label can be hidden by selecting the checkbox. 

Status
colourRed
title2

Variable

For each select 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.

Status
colourRed
title3

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

Status
colourRed
title4

Placeholder

This attribute specifies a short hint that describes the expected value of a select field (e.g. a sample value or a short description of the expected format). The short hint is displayed in the select field before the user enters a value.

Status
colourRed
title5

Selection type

Here the layout of the select can be changed. The user can choose between dropdown or listbox and can determine via multiselect whether more than one option may be selected.

Status
colourRed
title6

Select options

Options can be added with the plus icon. By clicking the delete icon an option can be deleted.  

Links can be used to refer to other documents or other applications. If a user clicks on the link, the document or application is opened. For adding a  link element the user can drag and drop the element to a specific container. Link elements can be copied via the plus symbol and removed via the delete symbol.

Screenshot 2024-05-16 140226.png

Reference

Attribute

Description

Status
colourRed
title1

Label

Here the text of the label can be changed. Optionally the label can be hidden by selecting the checkbox. 

Status
colourRed
title2

URL

Here the URL to a document or application is specified. The URL can be static or can contain variables (e.g. www.myCompany.dom/${myLinkVariable}, which are filled at run-time.

Status
colourRed
title3

Link Text

The link text replaces the URL with a user-friendly name.

Status
colourRed
title4

Icon

With a dropdown an icon is selectable which is displayed next to the link 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 link element. As default the icon is located on the right of the link 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.

Insert an image

Images can be embedded into the Form by stating the file path. For adding an image element the user can drag and drop the element to a specific container. Image elements can be copied via the plus symbol and removed via the delete symbol.

Screenshot 2024-05-16 144206.png

Reference

Attribute

Description

Status
colourRed
title1

Source

Here the file path and file name of a picture are specified. Pictures that are in the resource folder have the path /loom-portal/resource/. Note: Only images are accepted. Not pdf, doc, etc..

Status
colourRed
title2

Label

Here the text of the label can be changed. Optionally the label can be hidden by selecting the checkbox. 

Insert a divider

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.

Screenshot 2024-05-16 144634.png

Reference

Attribute

Description

Status
colourRed
title1

Name

 Here an individual name can be given to the divider

Status
colourRed
title2

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.

Add advanced elements

Insert a textarea

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.

Screenshot 2024-05-16 145536.png

Reference

Attribute

Description

Status
colourRed
title1

Label

Here the text of the label can be changed. Optionally the label can be hidden by selecting the checkbox. 

Status
colourRed
title2

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.

Status
colourRed
title3

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

Status
colourRed
title4

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.

Status
colourRed
title5

Placeholder

Here the placeholder text of the comment field can be added and edited.

Status
colourRed
title6

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.

Insert a rich text

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.

Screenshot 2024-05-16 150710.png

Reference

Attribute

Description

Status
colourRed
title1

Label

Here the text of the label can be changed. Optionally the label can be hidden by selecting the checkbox. 

Status
colourRed
title2

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.

Status
colourRed
title3

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

Status
colourRed
title4

Height

The Height of the textarea can be specified here in pixels. It is set at a default height of 150px.

Status
colourRed
title5

Placeholder

Here the placeholder text of the rich text can be added and edited.

Status
colourRed
title6

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.

Insert a custom HTML

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.

Screenshot 2024-05-16 151452.png

Reference

Attribute

Description

Status
colourRed
title1

Name

 Here an individual name can be given to the custom HTML

Status
colourRed
title2

HTML

Any HTML code can be entered here

Status
colourRed
title3

Label

Here the text of the label can be changed. Optionally the label can be hidden by selecting the checkbox. 

Status
colourRed
title4

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.

Insert an autocomplete

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.

Screenshot 2024-05-16 152357.png

Reference

Attribute

Description

Status
colourRed
title1

Label

Here the text of the label can be changed. Optionally the label can be hidden by selecting the checkbox. 

Status
colourRed
title2

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.

Status
colourRed
title3

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

Status
colourRed
title4

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.

Status
colourRed
title5

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.

Status
colourRed
title6

Select options

Options can be added with the plus icon. By clicking the delete icon an option can be deleted.  

Section Handling

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.

Screenshot 2024-05-16 153656.png

Reference

Attribute

Description

Status
colourRed
title1

Section Handling (Context)

The user can select a specific context to define how the form should behave in that context.

Status
colourRed
title2

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.

Status
colourRed
title3

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.

Status
colourRed
title4

Existing
element control

Here is shown for which specific context an element control setting already exists. 


Preview

The form tab ‘Preview’ displays how a form is shown in the whole process or in a specific part of the process.

Screenshot 2024-05-16 153946.png

Reference

Attribute

Description

Status
colourRed
title1

Form preview selection

The user can see how a form is designed in a specific part of the process model.

Status
colourRed
title2

Preview

The current form preview selected by the user in form preview selection.

For changing the form preview for a specific context the user can change it via drop-down.

Screenshot 2024-05-16 154254.png

Reference

Attribute

Description

Status
colourRed
title3

Context

The user can see how a form is designed in a specific context of the process model.

Status
colourRed
title4

Preview

After selecting the desired context the form shows the specific part for that context.


Rules

The form tab ‘Rules’ are sets of rules which can change the behavior of the form depending on the trigger events.

Screenshot 2024-05-16 154644.png

Reference

Attribute

Description

Status
colourRed
title1

Create rule

While the user opens the ‘Rules’ tab for the first time the 'Create rule'-button allows to create a new rule.

Status
colourRed
title2

Create

The plus button in the lower left of the ‘Rules’ tab allows for the creation of a new rule.

Status
colourRed
title3

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).

Screenshot 2024-05-16 155943.png

Reference

Attribute

Description

Status
colourRed
title4

Name

The name for the creation of a new rule to the system.

Status
colourRed
title5

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.

Status
colourRed
title6

Conditions

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.

Status
colourRed
title7

Buttons

With the 'Copy rule'-button the rule can be copied and with the 'Delete rule'-button the rule can be deleted.

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.

Screenshot 2024-05-16 160607.png

Reference

Attribute

Description

Status
colourRed
title10

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.

Screenshot 2024-05-16 160851.png

Reference

Attribute

Description

Status
colourRed
title11

Rule test

When selecting 'No' on the radio button, the select is not visible.


Variables

Within the form tab 'Variables' all form variables and system variables are listed.

Screenshot 2024-05-16 161151.png

Reference

Attribute

Description

Status
colourRed
title1

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.

Status
colourRed
title2

Add variable

The 'Add variable' button enables the designer to manually add a variables and set the information about this variable.

Status
colourRed
title3

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.


Data types

Within the ‘Data types’ tab the user can create custom data types to use in the forms.

Screenshot 2024-05-16 161427.png

Reference

Attribute

Description

Status
colourRed
title1

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.

Status
colourRed
title2

Create

The plus button in the lower left of the ‘Data types’ tab allows for the creation of a new data type.

Status
colourRed
title3

Data types

On the left side of the view there are listed all data types created.

Screenshot 2024-05-16 161918.png

Reference

Attribute

Description

Status
colourRed
title4

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.

Status
colourRed
title5

Test data type

For testing the new data type the user can check its behavior and view with ‘Test Data Type’ field.


Element Control

Within the 'Element Control’ tab the user can see all element controls created in the 'Designer' tab.

Screenshot 2024-05-16 162602.png

Reference

Attribute

Description

Status
colourRed
title1

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.


Workflow publish

After completing designing the form, the user can publish the workflow version with the designed form.

Screenshot 2024-05-16 163041.png

Reference

Attribute

Description

Status
colourRed
title1

Version

After the form completion the user can select the version of the workflow.

Status
colourRed
title2

Publish

The ‘Publish’ button in the lower right of the detailed view allows the workflow version to be published.

Screenshot 2024-05-16 163217.png

Reference

Attribute

Description

Status
colourRed
title3

Publish pop-up

The pop-up message must appears and “Publish” button must be clicked.

Screenshot 2024-05-16 163943.png

Reference

Attribute

Description

Status
colourRed
title1

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.