Form Designer

1

Pencil

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

2

Workflow List

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

3

Workflow Version

The workflow version displays the versions of a workflow.

4

Detail View

The detail view offers a comprehensive overview of the selected workflow version.

1

‘+New workflow’ Button

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

2

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.

2

Name

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

3

Process Model Button

The 'Add process model' button allows to add a process model for the creation of a single workflow.

4

Process model

Via a drop-down the desired process model can be selected.

5

Add

The 'Add' button will allow saving of the selected process model.

6

Save

Once finished with naming and selecting the process model, clicking on the save button will add the workflow to the system.

1

Copy

The copy icon allows to create a new version of the current workflow.

1

Workflow version

The workflow version informs the user about the version, if it is published and with what it is linked. By clicking on a specific workflow version the detailed view will have the information about that specific version.

2

Name

It is the name of the workflow version that can be changed.

3

Comment

For a detailed description of the current version the user can add it in the comment.

4

Add process model

The ‘Add process model’ button allows to add a process model to the selected workflow version.

5

Add form

The ‘Add form’ button allows to add a Form to the selected workflow version.

6

Cancel

The 'Cancel' button resets the changes in the detail view.

7

Save

After clicking the ‘Save' button all changes made to the detailed view will take effect.

8

Publish

After clicking on the 'Publish' button, the current workflow version is available to users. Processes can be started and edited.

1

Elements

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

2

Form

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

3

Settings

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

1

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.

2

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.

3

Settings of container

By clicking the container the user is able to see the information about this container on the right section. 

1

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.

2

Name

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

3

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.  

1

Name

Here an individual name can be given to the container

1

Element: Alignment

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

2

Label: Styles (CSS)

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

3

Label: Margin (in px)

The spacing to the right of the element can be stated in pixels here.

4

Label: Position

The position of the label can be changed into left, right, tob or bottom.

5

Label: Alignment

The alignment of the label can be changed into left, center or right.

6

Element: Alignment

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

7

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.

8

Font weight

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

9

Font style

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

10

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. 

11

Underline

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

12

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. 

1

Name

Here an individual name can be given to the text field

2

Text

Here the text displayed by the text field can be entered

1

Label

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

2

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.

3

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. 

4

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

5

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.

6

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.

1

Label

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

2

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.

3

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. 

4

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.

5

Timepicker

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

6

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.

1

Label

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

2

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.

3

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. 

4

Layout

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

5

Select options

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

1

Label

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

2

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.

3

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. 

4

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. 

5

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.

1

Label

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

2

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.

3

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. 

4

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.

5

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.

6

Select options

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

1

Label

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

2

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.

3

Link Text

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

4

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.

1

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

2

Label

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

1

Name

 Here an individual name can be given to the divider

2

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.

1

Label

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

2

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.

3

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. 

4

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.

5

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.

1

Label

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

2

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.

3

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. 

4

Height

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

5

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.

1

Name

 Here an individual name can be given to the custom HTML

2

HTML

Any HTML code can be entered here

3

Label

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

4

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.

1

Label

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

2

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.

3

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. 

4

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.

5

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.

6

Select options

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

1

Section Handling (Context)

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

2

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.

3

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.

4

Existing
element control

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

1

Form preview selection

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

2

Preview

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

3

Context

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

4

Preview

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

1

Create rule

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

2

Create

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

3

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

4

Name

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

5

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.

6

Enable Rule

When the checkbox is checked, the rule is activated and if the conditions are fulfilled it will be triggered.

7

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.

8

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.

9

Buttons

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

10

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.

11

Rule test

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

1

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.

2

Add variable

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

3

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.

1

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.

2

Create

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

3

Data types

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

4

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.

5

Test data type

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

1

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.

1

Version

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

2

Publish

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

3

Form

After publishing the workflow, there is the new designed form published in the Form tab and the process instance with the new form attached is now startable.