userguide form editor 2.x 1.7

8/9/2019 Userguide Form Editor 2.x 1.7

1/15

Doc. number Date 13 maart 2008 AuthorizatorAuthor Michel Nijhof Version 2 Sign

Quality Online BV

Hengelosestraat 501

P.O. Box 1414

7500 BK ENSCHEDE

T +31 (0)53 4809090

F +31 (0)53 4342040

[email protected]

www.qualityonline.com


2/15

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 Versie 2


3/15

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.



4/15

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



5/15

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 its possible to create a section under which one or more field elements can be put. It isnt

possible to move already placed fields to a different level in the tree. However, its 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 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



6/15

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 anew screen can be displayed in which the properties of the element can be filled in. Some elements dont

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



7/15

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



8/15

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

opened

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

Active If yes is selected then the user can expand or collapse the section. Selecting noresults the section to always be expanded, its not possible to collapse the section.



9/15

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



10/15

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

change

If yes is selected then the form will be refreshed after the field value has changed. This is used

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

options

The choices the user has when the field is displayed can be set here. A text value can be entered

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.



11/15


12/15

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:



13/15

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.



14/15

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.



15/15

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

userguide form editor 2.x 1.7

Documents