Quality Online BV

Hengelosestraat 501
P.O. Box 1414
7500 BK ENSCHEDE

T +31 (0)53 4809090

F +31 (0)53 4342040

info@qualityonline.nl
www.qualityonline.com

<Document title>

Doc. number <Document number> Date 13 maart 2008 Authorizator

Author Michel Nijhof Version 2 Sign
 Page 2 van 15

Table of content

1 Introduction.........................................................................................................................3

2 Navigation............................................................................................................................4

3 The form editor.....................................................................................................................5

3.1 Navigate to the Form Editor.................................................................................................5

3.2 Using elements...................................................................................................................6
3.2.1 Creating an element......................................................................................................6
3.2.2 Editing element properties..............................................................................................7
3.2.3 Deleting an element......................................................................................................7

4 Available elements................................................................................................................8

4.1 Forms...............................................................................................................................8
4.2 Section..............................................................................................................................8
4.3 Field.................................................................................................................................9
4.4 Pair 13
4.5 Subform..........................................................................................................................13
4.6 Empty line.......................................................................................................................13
4.7 Hide when........................................................................................................................14
4.8 Edit when........................................................................................................................15

Doc. number <Document number> Versie 2

 Page 3 van 15

1 Introduction

Quality Online is a automated system that ensures adequate functioning of your company processes,
thereby improving the quality of those processes and the reputation of your organization.

Quality Online is developed based on commonly applicable principles of quality. Organizations can
employ Quality Online to help them to comply with the ever more demanding quality demands, while
reducing the cost and overhead of doing so. Quality Online can help you reduce your quality costs.

The main goal for creating the Form Editor is to present the end-users with a tool with which they can
add fields to e.g. a registration form. Previously the only method available was to have a Quality Online
Consultant add the field(s) making the changes a tailor made part of the application.

Doc. number <Document number> Versie 2

 Page 4 van 15

2 Navigation

A window in Quality Online consists of three parts. At the top there is a Main-navigator with which you
can switch to other Sub-navigators (with the navigator tabs). Below the top, to the left you see the Sub-
navigator. With this navigator you can select the views. At the right side of the screen there is the View
part.

Figure 2.1 shows an example of the different navigation parts in Quality Online.

Figure 2.1

Doc. number <Document number> Versie 2

 Page 5 van 15

3 The form editor

The Form Editor makes it possible for administrators to create a specific form within a template. The
Form Editor is only available when installed within the Quality Online module. It depends on the
configuration of the Quality Online document template if the template has a Form Editor.

The Form Editor works with a tree structure under which the form elements can be placed. Using this
structure it’s possible to create a section under which one or more field elements can be put. It isn’t
possible to move already placed fields to a different level in the tree. However, it’s possible to change the
order of fields in the same level. In this manual we take the Incident Online module because it has a
Form Editor, in the next paragraphs we describe how to create your own form with the Form Editor.

3.1 Navigate to the Form Editor

1. Go to the tab Administration of the module, see figure 3.1.1

Figure 3.1.1

2. Click on the option <Templates> in the Sub-navigator.

3. Click on the template folder, the folder expands and the templates of that group become visible, see
figure 3.1.1.
4. Click on the template which you want to use the Form Editor.

In this example we use the “Accident” template, this template has a Registration form-editor and a
Coordination Form Editor. (The accident template has a different tab for the registration state and the
coordination state).

Figure 3.1.2

Doc. number <Document number> Versie 2

 Page 6 van 15

3.2 Using elements

Elements within a form can be created by selecting the desired type. Depending on the type selected a
new screen can be displayed in which the properties of the element can be filled in. Some elements don’t
have extra properties and thus no new screen will appear. In this paragraph we give an example how to
create an element. In Chapter 4 we explain all the properties of the available elements.

3.2.1 Creating an element

Example: creating a new field within a form:

5. Select ‘Field’ in the Form selection:

Figure 3.2.1

6. Enter the properties of the Field (see paragraph 4.3):

Figure 3.2.2

7. Click on the button <Ok>. The field will be displayed under the form:

Figure 3.2.3

To see an example of what has been entered, use the preview button:

Doc. number <Document number> Versie 2

 Page 7 van 15

Figure 3.2.4

Newly created elements will always be placed at the bottom of the already existing elements list. Using
the and buttons the user can move the element up or down the list.

3.2.2 Editing element properties

The field properties can be edited by clicking on the button: the same properties form that is shown
during creation of the form will be displayed.

3.2.3 Deleting an element

An existing element can be removed by clicking on the button. A warning will be displayed before the
element is removed. Already removed elements can not be retrieved.

Figure 3.2.5

Doc. number <Document number> Versie 2

 Page 8 van 15

4 Available elements

The following elements are available in the Form Editor:

 Form
 Section
 Field
 Pair
 Subform
 Empty line
 Hide when
 Edit when

Figure 4.0.1

4.1 Forms
This is the first element which always exist. The following elements can be created within a form: Tabs,
Selection, Field, Pair, Subform and Empty line.

4.2 Section
A section is used to group a set of elements. Depending on the configuration settings a section can be
expanded or collapsed when shown. It is also possible to always expand the section when shown. In this
case a frame with a label is shown around the elements.

Figure 4.4.1

A section has the following properties:

Section label The name of the section

Expand when If yes is chosen then the selection will be opened as soon as the form is opened
opened

Active If yes is selected then the user can expand or collapse the section. Selecting no
results the section to always be expanded, it’s not possible to collapse the section.

Doc. number <Document number> Versie 2

 Page 9 van 15

Once created the section will be displayed as follows in the editor:

Figure 4.4.2

The following elements can be created within a section: Section, Field, Pair, Subform en Empty line.

4.3 Field

Figure 4.3.1

Name The fieldname as it is saved in the document , this must be unique in the form. To keep fields
unique it is advised to start each field name with a prefix. For example: fdCE

Label The name of the field as shown in the form. This name doesn’t have to be unique.

Required Indicates if it is mandatory to fill in the field. This is only for ‘editable’ fields.

Aliased Indicates that the field options list also consists of aliases. The options must be presented as
follows: value|alias. E.g.: Yes|1. (see example 1 below)

Multi-value If yes is selected then the user can select or enter more than one value. This is not applicable if
dialog type ‘datepicker’ or ‘radio’ is used.

Data-type The data type of the values stored in the field. The following data types are supported:

text: text.

date: date

datetime: date and time

number: whole number

fractional: not whole number

file: file

currency: currency

name: person-, group- or department name

Doc. number <Document number> Versie 2

 Page 10 van 15

Widget The type of dialog that is presented to the user. The following dialog types are supported:

normal: the standard dialog for the chosen field type. This is a text input field
if no options are set. If options are set then a selection list will be
displayed.

dialog: a selection field in a new window.

datepicker: a dialog in which the user can choose a

date in a user friendly way..

radio: a radio button which implicates that only one value can be chosen, a
selection option must minimally be available.

check: a checkbox. This implicates that more than one value can be chosen.
A selection option must minimally be available

Refresh on If ‘yes’ is selected then the form will be refreshed after the field value has changed. This is used
change to refresh ‘computed’ and ‘display’ fields.

Type The field type, the following field types are supported:

editable: a field that can be edited by the user.

computed: the field value can be displayed to the user and stored in the
document, however it cannot be edited,

display: the same functionality as computed but the filed cannot be saved in
the document.

If ‘computed’ or ‘display’ fields are used then the value of the field needs to be entered.

With The display width of the field. The width can be entered as a percentage of the total width of the
form (e.g. ‘50%’) or in centimetres (e.g. ‘4cm’). If no value is entered then by default the full
form width will be used.

Height The height of the field in number of rows. If no value is entered the default height will be 1 (one)
row.

Field The choices the user has when the field is displayed can be set here. A text value can be entered
options in which various field values can be separated by ; or a JavaScript expression can be entered
which returns an array of values. (see example 1 and 2 below)

Field values - If an editable field is chosen then this value is the default value of that field. The value can be
overwritten by the user.

If a ‘computed’ or ‘display’ field is chosen then the value of this filed will be displayed to the
user. Just like the field options the values can be entered as text or as JavaScript.

Doc. number <Document number> Versie 2

 Page 11 van 15

Example 1 (text value)

The following example shows how the Form Editor can be used. For this example we will create an Action
field with the following options: ‘No action’, ‘Handle’ and ‘Escalate’. These options have the following
aliases: ‘0’, ‘1’, and ‘2’. The default value is ‘No action’. Due to the use of aliases we must use value ‘0’
because this is the value that is linked to ‘No action’.

The properties of the field above are displayed below:

Figure 4.3.3

The user will see the Action field as follows:

Figure 4.3.2

Doc. number <Document number> Versie 2

 Page 12 van 15

Example 2 (java)
For this example we will create a dialog screen in which we can select an incident type. In the field
option(s) we use a JavaScript expression to get an array of values, in this case ‘incident types’. In the
field value(s) (type= text) we set the incident type ‘Customer Complaint’ as a default value (this value
must be exact the same as the value of the array).

The properties of the field above are displayed below:

Figure 4.3.4

The user will see the incident dialog as follows:

Doc. number <Document number> Versie 2

 Page 13 van 15

Figure 4.3.5

4.4 Pair
A Pair is used to place two elements next to each other. A Pair element has no further properties.

The following elements can be created within a Pair: Section, Field, Pair, Subform and Empty line, Hide
when and Edit when. Although it is possible to place more than two elements in a Pair element, the
result can be unpredictable.

Figure 4.4.1

The user will see the fields as follows:

Figure 4.4.2

4.5 Subform
The Subform is used to import an existing form within the current form. This option is very useful for
Application developers when the Form Editor is not suitable enough to build the desired form.

4.6 Empty line

This element places an empty line between two elements. The element has no further properties.

Doc. number <Document number> Versie 2

 Page 14 van 15

4.7 Hide when

Figure 4.7.1

With the ‘Hide when’ element you can hide all elements underneath this element. If the result
value/state is the same as the (fixed) value/state of the ‘Hide when’ element, the fields underneath the
‘Hide when element’ will be hidden. You can also enter JavaScript expressions in this element.

Note: if you delete the ‘Hide when’ element all the elements underneath of the ‘Hide when’ element will
be deleted!

Example 1:

Figure 4.7.2

In figure 4.7.2 you see two field elements; ‘Incident 1’ and ‘an element’ underneath the ‘Hide when’
element.

Field ‘Incident 1’ shows a dialog screen in which you can select different incidents, see figure 4.3.5. In
the ‘Hide when’ element there is a JavaScript expression which says if the value of the field element
‘Incident 1’ is ‘Incident’ the elements underneath the ‘Hide when’ element will be hidden, see figure
4.7.3.

Figure 4.7.3

Example 2:
It is also possible to hide fields when the document state is “registration” and make them visible from
the state “coordination”. See figure 4.7.4 for an example. If the document state is “registration” all the
elements underneath the ‘Hide when’ element are hidden.

Doc. number <Document number> Versie 2

 Page 15 van 15

Figure 4.7.4

4.8 Edit when

Figure 4.8.1

With the ‘Edit when’ element you can make some specific elements underneath the ‘Edit when’ element
editable.

If the result value/state is the same as the (fixed) value of the ‘Edit when’ element the fields underneath
the ‘Edit when’ element will be editable. You can also enter JavaScript expressions in this ‘Edit when’
element.

Note: if you delete the ‘Edit when’ element all the elements underneath of the ‘Edit when’ element will
be deleted!

Example
In figure 4.8.1 we entered a JavaScript expression which makes the elements underneath the ‘Edit when’ element
editable when the state is “coordination”

Doc. number <Document number> Versie 2