form template editor user’s manual - hco.app.medcity.net · form template editor user’s guide

Form Template Editor

User’s Manual

Version 5.1.0 July 2014

Copyright © 2014 Trinisys, LLC – All rights reserved. of 61


User’s Guide

Contents 1 Form Concepts ..................................................................................................................................... 5

1.1 Form .............................................................................................................................................. 5

1.1.1 Form Field ............................................................................................................................. 6

1.1.2 Form Template ...................................................................................................................... 6

2 Template Editor Components .............................................................................................................. 6

2.1 Main Toolbar ................................................................................................................................. 7

2.2 Field List ........................................................................................................................................ 8

2.3 Status Bar ...................................................................................................................................... 8

2.4 View Menu .................................................................................................................................... 8

2.5 Web Form View............................................................................................................................. 9

2.6 Web Style Chooser ........................................................................................................................ 9

2.7 Read Only and Print Preview ...................................................................................................... 10

2.8 Image Viewer .............................................................................................................................. 11

2.9 Image Toolbar ............................................................................................................................. 11

3 Image Viewer Basics ........................................................................................................................... 12

3.1 Changing Pages ........................................................................................................................... 12

3.2 Rotating ....................................................................................................................................... 12

3.3 Zoom Level .................................................................................................................................. 12

4 Working with Templates .................................................................................................................... 13

4.1 Creating a Template .................................................................................................................... 13

4.2 Editing a Template ...................................................................................................................... 14

4.3 Saving a Template ....................................................................................................................... 14

4.4 Publishing a Template ................................................................................................................. 14

4.5 Removing a Template ................................................................................................................. 14

4.6 Editing Template Properties ....................................................................................................... 15

4.6.1 Image Properties ................................................................................................................. 15

4.6.2 Form Recognition Properties .............................................................................................. 16

4.6.3 OCR Properties .................................................................................................................... 16

5 Working with Fields ............................................................................................................................ 17



User’s Guide

5.1 Adding Fields to a Form .............................................................................................................. 17

5.2 Field Properties ........................................................................................................................... 17

5.2.1 Name ................................................................................................................................... 17

5.2.2 Id ......................................................................................................................................... 17

5.2.3 Required .............................................................................................................................. 17

5.2.4 Description .......................................................................................................................... 17

5.3 Field Types .................................................................................................................................. 18

5.3.1 Text Field ............................................................................................................................. 18

5.3.2 Text Mask Field ................................................................................................................... 19

5.3.3 Number Field ....................................................................................................................... 20

5.3.4 Date Field ............................................................................................................................ 21

5.3.5 List Field .............................................................................................................................. 22

5.3.6 Multi-Val Field ..................................................................................................................... 23

5.3.7 File Field .............................................................................................................................. 23

5.4 Hidden Fields ............................................................................................................................... 24

5.5 Modifying a Field's Size and Position .......................................................................................... 24

5.6 Removing Fields .......................................................................................................................... 25

5.7 Changing the Required Status ..................................................................................................... 25

5.8 Copy, Cut and Paste .................................................................................................................... 26

5.9 Moving Fields .............................................................................................................................. 27

5.10 Moving Fields to another Page ................................................................................................... 27

6 Working with Styles ............................................................................................................................ 28

6.1 Styling Field Labels and Controls................................................................................................. 28

6.2 Additional Styling ........................................................................................................................ 30

7 Working with Field Groups ................................................................................................................. 30

7.1 Creating Groups .......................................................................................................................... 30

7.2 Editing Groups ............................................................................................................................. 31

8 Web-only Components ...................................................................................................................... 32

8.1 Form Labels ................................................................................................................................. 32

8.2 Buttons ........................................................................................................................................ 33

8.2.1 Open Web Address (URL) .................................................................................................... 34



User’s Guide

8.2.2 Custom Behavior ................................................................................................................. 35

8.2.3 Button Styles ....................................................................................................................... 36

8.3 Data Views .................................................................................................................................. 36

8.3.1 Source Data ......................................................................................................................... 36

8.3.2 Features .............................................................................................................................. 37

8.3.3 Column Display ................................................................................................................... 38

8.3.4 Styles ................................................................................................................................... 40

9 Option Lists ......................................................................................................................................... 41

9.1 Creating Option Lists ................................................................................................................... 41

9.2 Editing Option Lists ..................................................................................................................... 42

9.2.1 Adding Options.................................................................................................................... 42

9.2.2 Editing Options .................................................................................................................... 42

9.2.3 Removing Options ............................................................................................................... 42

9.2.4 Ordering the List ................................................................................................................. 42

9.2.5 Exporting Option Lists ......................................................................................................... 42

9.3 Importing Option Lists ................................................................................................................ 43

10 Optical Mark Recognition ................................................................................................................... 43

10.1 Editing OMR Regions ................................................................................................................... 44

10.2 Default Regions ........................................................................................................................... 45

11 Recognition Regions ........................................................................................................................... 45

11.1 Creating Regions ......................................................................................................................... 46

11.2 Editing Regions ............................................................................................................................ 46

11.3 Removing Regions ....................................................................................................................... 46

12 Image Cleanup .................................................................................................................................... 47

12.1 Image Cleanup Editing ................................................................................................................ 48

13 Adjust Field Positioning ...................................................................................................................... 49

14 Page Properties .................................................................................................................................. 50

15 Web Forms ......................................................................................................................................... 51

15.1 Creating a Web Form .................................................................................................................. 51

15.2 Customizing Field Labels ............................................................................................................. 52

15.3 Displaying Group Contents in a Table ......................................................................................... 52



User’s Guide

15.3.1 Sub-Groups and Tables ....................................................................................................... 53

15.4 Rules ............................................................................................................................................ 53

15.4.1 Adding Rules........................................................................................................................ 53

15.4.2 Field Dependencies ............................................................................................................. 53

15.4.3 Additional Rules .................................................................................................................. 56

15.4.4 Run Settings ........................................................................................................................ 56

15.4.5 Viewing Rules ...................................................................................................................... 58

16 Web Form Views ................................................................................................................................ 59

16.1 Scripting ...................................................................................................................................... 59

16.1.1 Script Editor ......................................................................................................................... 59

16.1.2 Custom JavaScript Includes ................................................................................................. 61

1 Form Concepts Before getting into the details of how to use the Form Template Editor, it is important to understand a

few fundamental concepts of image-based data entry and the terminology used in this documentation.

1.1 Form Simply stated, a form is a collection of fields and their values. In image-based data entry, the form is

comprised of a scanned document and the field values entered from that document. An example form

image is shown below.



User’s Guide

1.1.1 Form Field

The most atomic element of a form, a form field defines one specific piece of information. In the

example above, Applicant Last Name, First Name, Birth Date, Social Security Number, etc., are all

examples of form fields.

1.1.2 Form Template

A form template defines the coordinates and behavior of the fields that comprise a given form. Each

form must be associated with a form template. It is from this template that the form gets the

information needed to map a given field to its position on the image. The template also specifies what

type of data entry control should be displayed (For example, whether the user should be presented with

a text box, a list of values to choose from, a date control, etc.)

2 Template Editor Components This section outlines the major graphical user interface components which make up the Template Editor.

The following diagrams illustrate the layout of the Template Editor.



User’s Guide

2.1 Main Toolbar The main toolbar serves as a launch pad for all top-level functions of the Template Editor. The following

illustration shows the function associated with each toolbar button.



User’s Guide

2.2 Field List The Field List control displays a list of all form fields and components

which have been created for the current template. This control is

used to select fields or components to editing, removal, and re-

ordering. To select more than one field at a time hold the CTRL key

to add fields to the selection or SHIFT to select a range of fields.

The Field List also appears in the Batch Prep control, allowing the

user to add form field data to the document while prepping it for

data entry. (See the Batch Prep User Manual for more information.)

2.3 Status Bar The first panel of the status bar shows the page that is currently

loaded in the Image Viewer. The second pane displays the name of

the form template. The third panel displays the selected field description as well as any informational or

error messages about the current operation.

2.4 View Menu The View Menu allows the user to switch between the Image Viewer and the Web Form View. Web

Forms must be licensed in order to utilize the Web Form View feature.



User’s Guide

2.5 Web Form View The web form view shows a dynamic view of a generated web form based on the current template. As

form fields are added and removed and field properties are modified, the web preview is continually

refreshed showing a real-time preview of the generated web form. This feature is only available if web

forms support is included in the purchased license.

2.6 Web Style Chooser The layout and look-and-feel of web forms are defined by Web Styles set up on the Data Entry Server.

(See the Web Forms Guide for more information on defining web styles.) The web style chooser allows

the user to apply a desired style to the current template. Once selected, the web form view window is

automatically redrawn with the new style.



User’s Guide

2.7 Read Only and Print Preview Read Only

A Web Form can be displayed as ‘Read Only’ in a Trinisys Web Platform application as well as other

contexts such as when a Web Form is saved as read only to be inserted into a content management

system or attached to an email via a Trinisys Script. The Web Form preview window can be toggled into

Read Only mode by clicking the icon on the Web Form toolbar next to the Web Style Chooser.

Print Preview

Web Forms can be printed by users of a Trinisys based solution. While in the template editor, a print

preview of a Web Form can be accessed by clicking the icon. This allows a Web Form author to alter

any styles or form layout to accommodate printing.



User’s Guide

2.8 Image Viewer The image viewer displays the form template image and serves as a canvas for the user to draw and

modify image-based form fields.

2.9 Image Toolbar The image toolbar provides access to the features which control the display of the image loaded in the

image viewer. These features are explained in detail in Section 3, Image Viewer Basics.



User’s Guide

3 Image Viewer Basics

3.1 Changing Pages

The user can change the currently viewed page by clicking the Previous Page and Next Page

buttons, or by pressing the PAGE UP and PAGE DOWN keys. Choose a specific page by pressing the

Select Page button and selecting the desired page in the list.

3.2 Rotating

The user can rotate the image 90 degrees clockwise or counterclockwise using the Rotate Right and

Rotate Left buttons, respectively.

3.3 Zoom Level

The user can adjust the current magnification (zoom level) using the Zoom Out and Zoom In

buttons. To zoom to a particular area on the image, select the Zoom To Selection Tool and draw a

box around the desired region. To view the entire image, press the Full View button, or to make the

image the same width or height as the image window, press the Full Width or Full Height

button. Pressing the Actual Size button will zoom to the image's actual size.



User’s Guide

4 Working with Templates In order to start editing a template, the user must either create a new template or open an existing one.

4.1 Creating a Template There are multiple ways to create a new template. The

first option is to click the Create Template link at the

bottom of the Form Template page. The second option

is to open an existing template, then right-click on the

image and select New Template. The third option is to

open an existing template, then press the Create

Template button in the toolbar to launch the New

Form Template window (shown right).

Next, enter a name for the new template. The name

field is the primary identifier for the template and must

be unique. Next, enter a description for the template.

The description field is intended to be a more verbose

description of the template.

Finally, select an image to associate with this template. The image should be an instance of the

document for which the template is being created. It is important that the template image be the same

resolution and size as subsequent forms that are to be scanned in for data entry. The template image

must be at least 150 dpi to ensure accurate field mapping.

To create a template which does not have an image and will be used solely as a web form, select the

Create a web-only template option (refer to Section 12.1).



User’s Guide

4.2 Editing a Template There are multiple ways to edit an existing template. The first option is to click the template name link

on the Form Template page. The second option is to open an existing template, then right-click on the

image and select Open Template. The third option is to open an existing template, then Press the Open

Template button in the toolbar to launch the Select Template window (shown below). Select the

desired template name from the list and click the OK button to open the template for editing.

4.3 Saving a Template There are multiple ways to save an existing template. The first option is to right-click on the image and

select Save Template. The second option is to press the Save button in the toolbar. New forms

created and associated with this template will continue to use the last published version of this

template.

4.4 Publishing a Template There are multiple ways to publish an existing template. The first option is to right-click on the image

and select Publish Template. The second option is to press the Publish button in the toolbar. Unlike

saving a template, when a template is published to the server, all new forms that are created and

associated with this template will start using the newly published version.

4.5 Removing a Template There are multiple ways to remove a template. The first option is to right-click on the image and select

Remove Template. The second option is to press the button in the toolbar. A message will appear

in the status bar saying that the template has been removed. The toolbar will become disabled. The

template will be completely removed from the server.



User’s Guide

4.6 Editing Template Properties There are multiple ways to edit template properties.

The first option is to right-click on the image and select

Template Properties. The second option is to press the

Template Properties button in the toolbar to

launch the Template Properties window (shown right).

It is important to keep in mind that the template name

is the primary identifier of the template. It is,

therefore, not recommended that the name of a

published template be changed. Changing the name

could cause problems for any external

scanning/indexing software that might be referencing

the template.

The Template Description field is provided for long

descriptions, or instructions for this particular

template. Additionally, there are two optional fields, Template Category and Form Name. Template

Category is for grouping large numbers of similar forms together for better organization. Form Name

provides the ability to display additional identifying information about the form in the Batch Prep and

Data Entry controls. The form name can be defined using field placeholders, as shown in the example.

Once data values are entered for a particular instance of the form, those referenced values will appear

in the form name (shown below).

4.6.1 Image Properties

The Image Properties tab displays information about the

template image. From this tab, the user can either

replace or remove the current template image by

checking the appropriate check box.



User’s Guide

4.6.2 Form Recognition Properties

The Form Recognition tab allows the user to override the

default form recognition settings. If, for example, the current

template should not be processed by the Form Recognition

Service, the custom settings option should be selected and

“Automatically recognize this template” should be

unchecked.

If the current template should be auto-published, the custom

settings option should be selected and “Automatically publish

forms” should be checked. This allows the template to be

published automatically as long as all of the required

information is captured and there are no validation errors.

4.6.3 OCR Properties

The OCR tab allows the user to override the default OCR settings. This is useful when a particular

template is not suitable for OCR or needs a higher or lower match confidence level for character or mark

recognition.



User’s Guide

5 Working with Fields

5.1 Adding Fields to a Form

To add a field to a form, press the New Field button in the

toolbar. Optionally, right-click on the image and select New Field

from the pop-up menu. Once the tool is selected, the mouse

arrow pointer is replaced with a cross-hair pointer. Using the

mouse, draw a box around the area on the image that

corresponds to the field being created. Upon completion, the

Field Property Dialog appears below the field list (shown right).

The Field Property Dialog appears differently for each type of

form field. (Each form field type will be discussed in detail in the

following section). However, the following properties are

present in each Field Property Dialog.

5.2 Field Properties

5.2.1 Name

The name of the form field. The value of this property identifies this field in the field list and will appear

as the field title in the Data Entry control.

5.2.2 Id

The unique form field identifier. This ID is used when referencing this field programmatically via the

Trinisys Data Entry Client APIs. A suggested value is generated the first time the Field Name property is

entered.

5.2.3 Required

This property specifies whether this form field is required. A validation error will occur if a user tries to

publish a form (or if the template attempts to auto-publish) and there are missing values for any fields

which have been marked required.

5.2.4 Description

The description property allows the user to give

additional information or instructions about a specific

field. Press the Field Description button to edit the

field description in the Field Description window.

The description appears in the status bar of the Data Entry control. It is also shown when a data entry

user presses the information button in the field label (shown below).



User’s Guide

5.3 Field Types This section defines the field properties which apply to each of the field types available to form template

authors.

5.3.1 Text Field

The Text field type provides the functionality of a generic all-purpose text field. This is the default field

type when a new field is created. Several formatting and validation options are available. Refer to the

“Working with Styles” and “Rules” sections for additional information.

The Character Set property specifies which characters the text field control will accept. By default,

the control will accept all characters. The user can restrict the

field to accept alpha or numeric characters, or both, or a custom

set of characters may be specified. Custom characters may be

added to any option other than Allow All. For example, if the user

wants to create a social security number field which allows

numeric characters and the hyphen (-) character, Numeric should

be selected and the hyphen (-) character should be typed into the

Custom character field.

Text field input may be restricted to uppercase or lowercase by

selecting the appropriate value from the Case property.

Text field length may be restricted by specifying values for the

Minimum Length and Maximum Length field properties. If, for

example, the user would like to create a zip code field which only

accepts 5 characters, the Numeric option should be selected from

the Character Set property and both the Minimum Length and Maximum Length properties should

be set to 5.

For text fields requiring more than one line of input, the Multi-Line option should be selected.

The Protect option prevents the field’s value from being displayed in the integration engine script

trace and system log files (when debug logging not enable).



User’s Guide

5.3.2 Text Mask Field

The Text Mask field type allows a user to enter field data into a

predefined input mask. This is useful for fixed-length text fields that

have formatting characters associated with them. Two examples of

such fields are Social Security Number and Phone Number.

Users may choose from the list of predefined input masks or create a

custom mask by checking the Custom checkbox and editing the mask

in the field below. When creating an input mask, the '# ' character is

used to represent any digit and the '?' is used to represent any alpha

character. All other characters in the input mask are treated as

format characters.

The preview field shows how the field will appear at data entry.

Users can use this field to test the mask.

By default, format characters are not included in the field value. For example, a Text Mask field that has

been set up with a Phone Number input mask will appear to the user as (800) 555-3493. The value

published to the back-end system for this field will be 8005553493. To include the format characters in

the field value, check the Keep Formatting checkbox.

Refer to the “Working with Styles” and “Rules” sections for additional information.



User’s Guide

5.3.3 Number Field

The Number field type provides support for number values. The number control only allows numeric

character input and automatically formats the number field as the user

enters the value.

The Precision property specifies the number of decimal places that

will be shown in the control. For a field whose value is a currency

amount, for example, the Precision property should be set to 2.

The Min Value and Max Value properties allow for numeric range

validation. For example, if there is a Property Value field on the

form and that amount has an upper and lower limit, the Min Value

property would be set to 25.00 and the Max Value property would

be set to 10,000.00. Any values entered less than 25 or greater that

10,000 would cause a validation error to occur.

Refer to the “Working with Styles” and “Rules” sections for

additional information.

5.3.3.1 Numeric Text Field vs. Number Field

Q: If a Text field can be specified as Numeric, why is it necessary to have a Number field?

A: The Number field should be used when the expected value is truly a number whose value can be

constrained by minimum and maximum values. The Text field should be used when the expected value

is a character string made up of numeric characters whose value can be constrained by character length.

Age, currency amount, height, width, number of items, etc., are all examples of number fields which

should use the Number field type. Zip code, social security number, phone number, etc., are all

examples of numeric text fields which should use the Text field type with Numeric selected for the

Character Set property.



User’s Guide

5.3.4 Date Field

The Date field type allows the user to enter date field values into a formatted date control. A number of

restrictions can be configured for date validations:



5.3.4.1 Restrict Dates Before/After

Dates can be restricted before or after a specified date. This date can be defined as an absolute date

(shown above right) or as a date relative to the current date (shown below right).

Relative dates can be defined as after or before the current date by selecting Plus or Minus, respectively.

Dates before or after the current date may be specified in

any of the following units: Days, Weeks, Months, or Years.

When specifying relative dates using Months as the unit

the nearest corresponding date will be selected. For

example, using this method, if the “Restrict to dates

before” restriction is specified as Current Date Plus 1

Month and the current date is Jan 30, 2009, then the date will

be restricted to dates before February 28, 2009.



User’s Guide

5.3.4.2 Restrict to Dates Falling On

Date values can additionally be restricted to dates

which fall on one of the following criteria:

First day of the month

Last day of the month

Selected month(s)

Selected day(s) of the week

Selected days(s) of the month

5.3.5 List Field

The List field type allows the user to select a value from a list of

options.

The Option List property specifies which list of options will be

displayed for this form field. Select the desired option list from

the provided dropdown. More information about creating and

editing option lists can be found in the Option Lists section.

If values other than those specified in the Option List are allowed,

the Editable property should be selected. This is useful for form

fields that provide a list of options to choose from and then have

“Other” as an option with space provided to write in a response

not found in the provided list.





User’s Guide

5.3.6 Multi-Val Field

Like the List field type, the Multi-Val field type allows the user to

select from a list of options. Unlike a List field, however, the Multi-

Val field allows more than one value to be selected from the list.

This field type is useful for “Check all that apply”-type fields.

The Option List property specifies which list of options will be

displayed for this form field. Select the desired option list from

the provided dropdown. More information about creating and

editing option lists can be found in the Option Lists section.

If values other than those specified in the Option List are

allowed, the Editable property should be selected. This is useful

for form fields that provide a list of options to choose from and

then have “Other” as an option with space provided to write in a

response not found in the provided list.


5.3.7 File Field

The File field allows the user to upload documents directly on the

web form. The field can be configured to restrict what is uploaded

based upon the size and/or type of document. Once the document

is uploaded, the user has the ability to view and delete the

document. The File field is not available on a web form until the

associated template is published.

File fields are only available to the user via web forms. File fields

are not available in the Batch Prep control, Data Entry control or

Capture.

File fields are available in the publisher for scripting purposes.




User’s Guide

5.4 Hidden Fields Hidden fields are a special class of form field that are not

visible to the user and allow extra information to be

associated with the form programmatically. The value of

hidden fields can be set and retrieved by the API and publish

scripts.

To create a hidden field, click the New Hidden Field

button or press CTRL+H. A hidden field can also be added by

right-clicking on the image and selecting New Hidden Field.

As shown at the right, the hidden field has five properties:

Name, Description, ID, Type, and an optional Default Value.

Clicking the icon will open a window for entering a long

description. The Default Value field is for setting an initial, common value for this field that will be used

by most forms applied to this template.


5.5 Modifying a Field's Size and Position Once a form field has been created, its size and position may be modified. To change the size or

position of a field, select the name of the field to modify in the Field List. Once the field has been

selected, the image area corresponding to the selected field will be highlighted (shown below). To

resize the field, simply drag one of the 8 sizing points to the desired location. To move the field, place

the cursor inside the field area and drag the entire field to the desired location.

To move more than one field at a time, first

select all of the desired fields in the Field List.

This will cause selection regions to be drawn

for each field. Place the cursor inside one of

the selected regions and drag the fields to

the desired location.



User’s Guide

5.6 Removing Fields To remove fields from a template, select the desired field or

fields from the Field List, right-click the selected fields and

select Delete from the context menu.

5.7 Changing the Required Status As a convenience, the Required property of multiple fields can

be changed for a group of selected fields. Simply select the

desired fields in the Field List and click the Required option in

the context menu. Fields marked required are indicated with

an asterisk (*).



User’s Guide

5.8 Copy, Cut and Paste Fields (and related dependencies) may be copied, cut and pasted

to and from the windows clipboard. To copy or cut a field or

group of fields, select the desired fields in the Field List, right-

click the selected fields and select Copy or Cut from the context

menu.

To paste fields that have been cut or copied into a template,

first select a field from the Field List, right-click the Field List and

select Paste from the context menu. The copied fields will be

inserted after the selected field.



User’s Guide

5.9 Moving Fields To move a field or group of fields up or down in the tab order, select the field or fields to move in the

Field List. Once selected, simply drag the selection to the

desired location.

5.10 Moving Fields to another Page To move fields to another page in the document, navigate to the

desired page in the Image Viewer, select the fields to move from

the Field List, right-click the selected fields and select Move to

Current Page from the context menu.



User’s Guide

6 Working with Styles

6.1 Styling Field Labels and Controls Styling applies to only web-form templates and is useful when the user wants to emphasize or highlight

a specific field on a form. The field label is the text that appears to the user when they are completing

the data entry of a web form. The field control is the area that appears for the user to enter the data

when completing a web form.

To update the styling for a specific field, click the Style tab on the Field Properties box. There are two

views, Simple and Advanced. The Simple view shows a list of the most often needed styles to apply to a

field using easy to understand names and values. The Advanced view can be used for the actual CSS

names and a full list of available styles. Additionally, CSS classes can be used in the Advanced view

instead of setting individual styles (recommended if many style changes need to be made).

For instance, if the user wanted to bold and italicize the label they would select “yes” from the option

list to the right of the style.

Another example would be if the user wanted to change the color of the label. To do this, they would

click in the box to the right of the style, prompting a color block window to appear so they could select

the appropriate color.



User’s Guide

If the user wanted to change the height of a control they would select the appropriate size option from

the option list to the right of the style.

Another example of styling the control would be if the user wanted to change the background color. To

do this, they would click in the box to the right of the style, prompting a color block window to appear

so they could select the appropriate color for the background of the control area.

Since the styling only applies to web-form templates, the changes will take effect immediately and the

user can see their changes in the preview panel.



User’s Guide

6.2 Additional Styling In addition to the styling options listed above, the Text, List and Multi-val field types have additional

options specific to them.

The List and Multi-val fields (shown left below) have additional options to specify how the selection

buttons should look and/or how the buttons should be aligned.

The Text field (shown right below) has an additional option to specify whether the field will be used to

enter a password. This specification can be used later in the publish script for additional logic.

7 Working with Field Groups

7.1 Creating Groups Field groups can be created in one of two ways. To create a new empty field group, simply select the

“New Group” option from the context menu (below left) or press the New Group button in the main

toolbar. The new group will be added after the selected item in the Field List.



User’s Guide

Alternately, a new group can be created from an existing set of fields. This is accomplished by selecting

the desired fields in the Field List and clicking the “Make Group” option in the menu (below right).

7.2 Editing Groups Groups have two main properties: Name and ID, which can be modified from the Group Properties

window (shown below). The Heading section allows for an optional descriptive label for web form

views. This window is displayed when a group is created by one of the means described above, or is

selected in the Field List.



User’s Guide

There are three styles that are specific to a group. The “Render Heading” style allows the user to

designate whether the heading should display on the web form. The “Display Children” style allows the

user to designate whether the group’s children should display vertically (the default), horizontally, or be

rendered in a table. If the group is rendered horizontally, the additional style “Children Per Row”

indicates how many components should be displayed on the horizontal row before a new row is started.

Additionally, when a group is selected in the Field List, all of the fields belonging to that group are

highlighted on the image. The field positions can then be changed simultaneously by dragging them to a

desired location.

8 Web-only Components Web-only components are managed similar to Fields in that they are managed through the Field List and

can have Styles and Rules applied to them. Unlike Fields, Web-only components do not capture any

data and are only rendered on web forms.

8.1 Form Labels Form Labels provide a way to place text, link, and picture

elements on a web form. Labels can be created by pressing the

New Label button in the main toolbar. The new label will be

added after the selected item in the Field List.

A Form Label consists of a Name, ID, and its Content. The

simplest Labels can be edited through the basic content editor

that is displayed when the Label is initially opened (see the image

to the right).

The advanced content editor can be accessed by simply clicking



User’s Guide

the Advanced button. The advanced content editor makes many more features available, such as

advanced formatting, images, and links.

It is important to note that the content editor, either basic or advanced, displays the Label as it will

appear once editing of the component is complete. This is because the Web Form Style selected at the

top right of the Template is applied to the content editor pane at all times.

8.2 Buttons Buttons can be added to a Web Form to allow for a variety of interactive functionality. For Example, a

button can be used to:

Launch an external web site

Initiate a Form Data Lookup

Validate a portion of the Form

Navigate to a Web Platform view

Launch and asynchronous request to the integration engine



User’s Guide

To add a button, click on the icon in the toolbar. Buttons have a name, and ID and an optional label.

A button can be configured either to open a Web Address (URL) or trigger the execution of JavaScript.

8.2.1 Open Web Address (URL)

The following table describes the options available when specifying ‘Open Web Address (URL)’ for the

button behavior.

Open Option Description

http Fully qualified URL

https Fully qualified URL using a secure, SSL connection

Relative URL that is relative to the current Web Form URL

Dynamic Specify custom JavaScript that creates the URL to use



User’s Guide

In addition, how the URL should be opened is also specified. If ‘New Window’ is selected, a series of

options are available to customize how the new window should behave.

8.2.2 Custom Behavior

Selecting ‘Custom Behavior’ allows for a URL to be constructed via JavaScript. In the example below, a

URL is constructed look up an address in Google Maps using the address values specified in the Web

Form.



User’s Guide

8.2.3 Button Styles

A button can be rendered as a traditional HTML button,

an HTML link, or a custom image. These different

renderings are specified in the style tab.

These different rendering options are in addition to many

other settings which can be tweaked to achieve a desired

effect.

8.3 Data Views Data Views provide tabular display of result data on a Web Form.

The result data is provided from a Form Data Lookup associated to the Template. At a high level a Data

View consists of the following parts:

Result data

Filtering controls to filter down the displayed result data

Sorting controls to control how the displayed result data is sorting

Paging controls to limit how much of the displayed result data is shown at a time

Each part can be configured independently.

8.3.1 Source Data

A Data View has its source data populated from a Form Data Lookup assigned to the Template. The

Form Data Lookups are managed outside Template Editor (see Trinisys Server Administration Guide for

more details on creating Form Data Lookups). When creating a Data View, a Form Data Lookup should

be selected first from the drop down list. If the Template has not yet been saved, it must first be saved



User’s Guide

so that the Form Data Lookup can be created in the Administration Console prior to adding the Data

View.

After choosing a Form Data Lookup, input parameters are mapped by clicking Edit Parameters. Input

parameters values can be manually entered or be retrieved automatically from a referenced field when

the Data View is refreshed.

8.3.2 Features

Data View supports several powerful features, many of which can require no configuration.



User’s Guide

Sorting – Order the result data by clicking on the column header. This level turns on/off sorting

for all columns. Column level overrides can be set under Edit Columns.

Filtering – Hide result data by typing a search value in the Filter box. Data with matching values

will be hidden. This level turns on/off filtering for all columns. Column level overrides can be

set under Edit Columns.

Auto Load – Indicates if the Data View data should be retrieved automatically at Web Form load

time. Typically Data Views are auto-loaded, but this can be turned off and loaded (refreshed) by

a rule action or custom JavaScript in response to a user action or other event.

Pagination – Limit display result data to “pages” of data. The user can flip through these pages

so he/she is not presented with too much data at once. The page size and selection options can

be configured under Edit Pagination (as shown below).

Remember State – Remembers Sorting, Filtering, and Paging selections made by the user so that

when the Web Form is revisited those settings are restored.

8.3.3 Column Display

The columns displayed in a Data View are determined by the source Form Data Lookup columns. Each

of these columns can be left as-is (typically referred to as un-mapped column definitions) or be

configured explicitly (typically referred to as mapped column definitions). The column definitions can be

accessed under Edit Columns.



User’s Guide

On the column definitions window, all columns found in the selected Form Data Lookup are presented.

The column definition can be edited or cleared back to the default state from this window. To edit a

specific column definition, use the button.

The Edit Column window supports the following column configuration options:

Display Type – Indicates how the column should be rendered:

o Text – Result data is displayed directly

o Checkbox – Checkbox is rendered in place of result data and is made available to the

JavaScript



User’s Guide

o Button – Button is rendered in place of result data and is made available to the Label as

${value} and JavaScript

o Link – Link is rendered in place of result data and is made available to the Label as

${value} and JavaScript

Heading – Allows the column heading to be changed

Width – Allows an explicit column width to be set in pixels (e.g. 50 px)

Sortable – Indicates if the column should be sortable and how the sorting should work. Most of

the time Alphanumeric works fine. There are some cases where it does not. For example,

sorting numbers Alphanumeric would result in 1,10,2,3,4,5,6,7,8,9 where-as using Numeric

would order them as 1…10.

Filterable – Indicates if the column should be filterable

Hidden – Indicates if the column should be hidden from view. If desired, the column can be

shown later via a rule or JavaScript.

Label – Indicates the label for a Button or Link. Use ${value} to indicate the column result data

should be written.

JavaScript – Allows custom script to be executed when a Checkbox, Button, or Link is clicked.

Four JavaScript variables are available:

o row – Zero-based index of the row where the click occurred

o col – Zero-based index of the column where the click occurred

o rowData – Array containing the data of each column of the row where the click occurred

o cellData – String value of the column data where the click occurred

8.3.4 Styles

Data Views can be styled like any other component. In

addition to the standard control styles, there are four Data

View specific styles provided:

Display Information – Indicates if the “Showing #

of # of # entries” line is shown

Layout – Advanced option allowing HTML DOM

level positioning of each of the Data View’s HTML

parts

Paging Buttons – When using Pagination, indicates

how the paging buttons are showing

Empty Message – Indicates the message to display

when no data is displayed in the Data View



User’s Guide

9 Option Lists Option lists define a list of options that can be presented to the user for a given field. Once an option

list has been created, it can be used by multiple fields within the same template.

9.1 Creating Option Lists To create a new option list press the New button on either the List Properties Dialog or the Multi-Val

Properties Dialog. This will launch the Edit Option List window (shown below). Enter a descriptive name

for the option list.



User’s Guide

9.2 Editing Option Lists

9.2.1 Adding Options

To add options to an option list, click the Edit button on

the Field Dialog to access the Edit Option List screen,

then enter a name and value into the appropriate fields

and press the Add button. The name value pair will

then appear in the grid below. The name should be the

text the user will see at entry. The value will be what is

actually saved to the server.

9.2.2 Editing Options

To edit an existing option name or value, first select the

option in the grid, and then click either the name or

value to edit the text.

9.2.3 Removing Options

Select the desired option in the grid and press the

Remove button to remove the option from the option

list.

9.2.4 Ordering the List

To manually set the order of the option list, move fields up or down in the list by selecting them in the

grid and pressing the Move Up or Move Down buttons.

9.2.5 Exporting Option Lists

To export an option list to the server, press the Export button to save the option list to the server.

This allows the option list to be accessed by multiple form templates.



User’s Guide

9.3 Importing Option Lists To import an option list from the server, press the Import button on either the List Properties Dialog or

the Multi-Val Properties Dialog. This will launch the Import Option List window (shown below). From

the list provided, select the name of the option list to import into the template and press the Import

button.

There are two methods by which a user can import an option

list. The first is to import an editable copy of the option list into

the current template. This is the default method. The second is

to create a dynamic link to the selected option list. With this

method the imported option list is kept in sync with the server

instance. In other words, if the option list is changed on the

server, all templates linked to that option list will be affected by

the change.

10 Optical Mark Recognition When Form Recognition and OCR support is enabled, List and Multi-Val field types can be configured for Optical Mark Recognition (OMR). To enable OMR for a given field, click the Image tab in the Field Properties dialog and select the appropriate option from the Recognition Type list. This will place the field in OMR edit mode, indicated by the check box icons to the left of the option values.



User’s Guide

10.1 Editing OMR Regions When a List or Multi-val field is configured for Optical Mark Recognition, each option is associated with a

specific region on the image, such that, when a mark is found in that region the corresponding option is

selected. These mark regions can be adjusted by selecting the option in the list. This will display a

selection rectangle on the image which represents that option's expected location (shown below). The

mark region's location can be set by placing the mouse in the center of the selection rectangle and

dragging it to the desired region on the image. The size of the mark region can be set by dragging the

appropriate sizing box located around the boundary of the selection rectangle. The user is prompted if

they update the field and a value does not have an assigned region.

If a Text field is configured as a barcode, the OMR process will pull information from the barcode and

populate the form field with the value. The OMR process can handle the following types of barcodes;

2D, matrix, 1D and QR code.



User’s Guide

10.2 Default Regions In certain cases a default, or implied, option is required. For example, a form has a checkbox next to a

field which states “How often would you like to receive updates by email”. If an option is checked, the

answer is that option; if the option is left blank, the answer is blank. In cases like this, one of the

expected values can be set up as the Default Option.

The user right-clicks on the option to select it as the

default.

11 Recognition Regions In most cases, once a template has been created no additional

setup is required for Form Recognition. However, in some

situations, there are multiple templates which are so similar in

appearance that it is necessary to give “hints” to the Form

Recognition Service to correctly match the form. These “hints”

are called Recognition Regions and define specific areas on the

image that are unique to that template. The system allows

multiple recognition regions to be defined. It is important to

keep in mind that when multiple regions are defined, the Form

Recognition must find corresponding marks for ALL specified

regions in order to classify the form under consideration as a

valid match.



User’s Guide

11.1 Creating Regions

To define recognition regions for a template, first click the Recognition Region button in the toolbar

to place the Template Editor in Recognition Region Mode. The Field List will be replaced by the

recognition region window and all other editing options will be disabled. To create a new region click

the “Create New Region” button and draw a box around the desired area on the image.

11.2 Editing Regions A recognition region is made available for editing after it is created (as described in the previous section)

or when the region name is selected in the list. Once selected for edit, two adjustable areas are

displayed on the image: the search area and region

(shown right). The region's bounding box should fit

tightly around the unique identifying area on the

image. The larger, bounding Search Area defines

the area on the image that will be “searched” by

the Form Recognition Service for the specified

region. (For optimal recognition accuracy and

speed it is recommended that small regions be

used.) Both bounding boxes should stay within the

boundaries of the template image. To commit changes made to an existing region or add a new region

to the list, click the Update button.

11.3 Removing Regions To remove a recognition region, right-click on the region name in the list and select “Remove Region”

from the context menu.



User’s Guide

12 Image Cleanup When creating a new template, it is always best to start with scanning a clean, blank form. However, a

clean form is not always available, and one must use a form that has already been filled out. The Image

Cleanup feature was created for such a situation. Once the “dirty” form has been scanned and

specified for a template, use Image Cleanup to erase the unnecessary or pre-populated portions. This

will ensure better form recognition and OCR/IRC results.



User’s Guide

12.1 Image Cleanup Editing Performing template image cleanup is very similar to adding fields

to a form. Upon entering Image Cleanup mode, the mouse arrow

will be replaced with a cross-hair cursor. Using the mouse, draw a

box around the area on the image to be removed. Take special care

to not remove any lines, boxes, text, or other form information.

The selected area will have resize handles for precise edits, and

multiple areas may be necessary for complex images. De-selecting

the edit area will finalize the edit and the resize handles will no

longer be available. However, the button may

be used to step backwards through your edits for correcting any

unwanted changes. Additionally, the Zoom and Image Fit functions

of the Image Toolbar are available to assist in viewing your edits.

To save your changes at any point in the editing process, click the button. This will

clear the undo history and render your edits to the template image.

Once your edits have been applied, you can return to editing the form by clicking the Image Cleanup

button in the toolbar or the button in the cleanup area.



User’s Guide

13 Adjust Field Positioning The Adjust Field Positioning feature allows the user to move and scale all fields on a given page. To use

this feature click the Adjust Field Positioning button in the toolbar. This will place the Template

Editor control into field adjustment mode (shown below).



User’s Guide

In field adjustment mode, bounding boxes are drawn around each field on the page. For a point of

reference, the currently selected field is shown in red. A sizing box is displayed encompassing all fields

on the page.

Field positioning can be changed by placing the mouse inside the sizing box and dragging the fields to

the desired location. Field scale can be changed by dragging one of the appropriate sizing points located

around the boundary of the sizing box. If the image has been scanned rotated to the right or left, the

Image Rotation slider can be used to correctly align the image.

When form adjustments are complete, click the Adjust Field Positioning button again or close the panel

to end form adjustment mode and return to the template editor.

14 Page Properties The Page Properties feature allows a name and optional description to be applied to each page of a

form. This feature is particularly useful for large, multi-page forms. The names give context to each

page list, making them much easier to identify in the Template Editor and Data Entry control. The

technical details of the page image are also displayed in the Image Properties section.



User’s Guide

The page names specified here appear in the page list drop down. They also appear in the context

menu, which is visible when right-clicking on the image.

15 Web Forms As form processing moves further and further away from physical documents, web-based forms become

increasingly important. The Template Editor control seamlessly transitions paper forms into Web Forms

while providing additional web-specific customizations. Dependency rules, field formats and validations

still apply, but custom field labels, table display, and scripted behaviors using the Trinisys JavaScript API

are also available. To view existing forms as a Web Form, select Web Form View from the View menu.

15.1 Creating a Web Form To create a Web Form, create a new template as specified in Section 4.1 and select the “Create a web-

only template” option. The new template will open in Web Form View (Section 2.7) and fields may be

added to the Field List as with a document-based template (Section 5.1). As changes to a field or group

are saved with the Update button, the Web Form View updates to reflect those changes instantly.



User’s Guide

15.2 Customizing Field Labels As fields are added to web forms, the field name is automatically used for the text label. However, if a

different label is required, click the icon in the Field

Properties editor to enter a custom Field Description (shown

right). The field label display will be directly related to the

selected Style (shown below), which may be specified in the

Web Forms section of the TDES Administrative Console.

Custom labels for groups are entered in the Web Properties

portion of the Group Properties editor (Section 6.2).

15.3 Displaying Group Contents in a Table To specify a table, or grid based layout for sub-groups,

select the group for editing, click the Style tab and then

select the “table” option from the Display Children list

(shown right). Use this feature to attractively organize

and display identical sub-groups in a user-friendly format.



User’s Guide

15.3.1 Sub-Groups and Tables

Sub-groups determine the column and row headers for each table. Identical sub-groups are required,

and this is best accomplished with the copy and paste features described in Section 5.7. The sub-group

names will determine the row labels, and the Field names will determine the column headers (shown

below).

15.4 Rules

15.4.1 Adding Rules

Rules can be added to fields on web-only templates in order to set dependencies, add scripting, etc. To

access the Add Rule Control (shown right below), the user clicks the Add button on the Rules tab (shown

left below).

15.4.2 Field Dependencies

Field Dependencies may be used to require the values of one or more additional fields based on the

value of the selected field.

To set a dependency on a certain field, click on the field in the Field List, click on the Rules tab in the

Properties dialog box, then click the Add button. (see Section 14.1.1)

After providing a name for the rule, a condition must first be created by clicking the “+” button in the

Conditions section. Next, the user selects the field from the first dropdown list, selects an operator from



User’s Guide

the second dropdown list, then selects or types the value in the third field. For example, the screen shot

below shows a rule built for when the birth date is less than 4/4/1980. After the user selects the three

criteria, they click the OK button to save the rule. (shown below)

After adding the rule condition, the user clicks the “+” button in the Actions section to add the

corresponding action (shown below).

To complete the dependency rule, the user selects the “Require” option on the Add Rule Action control.

(shown below) Select the field that is required if the previously built condition is true. Then click the OK

button to save.



User’s Guide

Once the action is saved, the Add Rule control displays both the condition and the corresponding action.

The user clicks the Update button to save this rule to the field.

Once the rule is saved, the fields display an indicator as to how they are being referenced by rules

(shown below). A small green dot indicates the field is being referenced in a rule condition, whereas a

small red dot indicates the field is being referenced in a rule action.



User’s Guide

15.4.3 Additional Rules

In addition to setting dependencies, the user can also add rules to set/clear values, hide/show fields and

groups, modify data views, and perform custom scripting. These rules are accessed and added the same

as the field dependency rule described above. The user is also able to add multiple rules to the same

field.

15.4.4 Run Settings

Typically, rule conditions are evaluated anytime a Field or other component referenced in the

Conditions of a rule changes. Run Settings allow you to make adjustments in the rare cases where this is

not the desired behavior. These can be adjusted by clicking Run Settings button on the Add Rule or Edit

Rule window.

This brings up the Run Settings window. Here you can turn on or off the Rule’s condition evaluation

using the available selections:



User’s Guide

For example, suppose the Rule should only evaluate when the Web Form first opens. In this case only

“Web Form opens” should be checked. When any fields referenced in the condition are then changed,

the rule is not re-evaluated.



User’s Guide

15.4.5 Viewing Rules

In addition to viewing rules field by field, all rules in a template can be managed at once by clicking the

Rules tab at the top of the preview panel. To view or edit the details of a rule, the user clicks on the rule

name.

The Edit Rule window with the rule detail is then displayed.



User’s Guide

16 Web Form Views

16.1 Scripting The Script tab allows the use of JavaScript to further customize the behavior of the web form. Switching

back to the Web Form Preview tab updates any changes made in the Script tab, providing instant

previews, as well as script validation and error notification. The automatic Web Form Preview can be

enabled or disabled by clicking the Refresh icon.

Standard JavaScript is supported for maximum flexibility and a reduced learning curve for those familiar

with web scripting. The Trinisys JavaScript API provides simplified access to the web form components

and allows custom event handling. Please see the Web Forms JavaScript API documentation for more

information.

16.1.1 Script Editor

The Script tab has several features found in Integrated Developer Environments (IDEs) that can save

time and reduce errors when authoring and maintaining custom JavaScript.

16.1.1.1 Drag and Drop

A field, group, or web component in the component list can be selected and dragged into the script tab

to create a programmatic reference to the field.

16.1.1.2 Intelligent Code Completion

Pop-up windows with available methods and attributes appear when a “.” is typed after a valid object.

This allows a user to see and select

what is available without having to

consult documentation. This can also

be accessed by pressing

“CTRL+SPACE”.



User’s Guide

16.1.1.3 Code Templates

Standard ‘boiler-plate’ code snippets can be generated and then customized by the user. This is helpful

for saving manual keying or for when the user is not certain of the proper syntax of a construct.

JavaScript comments (“// TODO”) indicate the appropriate places that should be edited. Code

Templates are access via the right-click menu under the “Insert” menu option.

16.1.1.4 Code Folding

Blocks of code can be folded or hidden to make a larger script more readable. Blocks that can be folded

have a “-“ icon next to them and hidden blocks have a “+” icon next to them which toggles the block

visible. The right click context menu also has a “hide all” and a “show-all” function under code folding.

16.1.1.5 Themes

The editor supports various themes which can be used to customize the look and feel of the script tab.

These are accessed via the right click context menu.

16.1.1.6 Script Search

To search for specific text in either the Script tab or Web Form Preview tab, click the icon or press

CTRL+F. A search pane appears at the bottom of the screen, allowing the user to enter text.



User’s Guide

16.1.2 Custom JavaScript Includes

While all of your custom JavaScript can be written in the Template Editor Script pane, you may also

chose to externalize some shared functionality into a JavaScript file that can be re-used in other

Templates. Trinisys also provides many Template functionality extensions as custom JavaScript files.

These Custom JavaScript files are placed in the server’s customjs folder.

To include these files in your Template, use the button at the bottom of the Script pane to open the

Custom JavaScript Includes window.

Here you can indicate which files should be included set the order they are included in case of

dependencies.

After including and custom JavaScript files, they are now available for

read-only view in the Script pane by selecting them from the drop down

list next to the Custom JavaScript Includes button.

form template editor user’s manual - hco.app.medcity.net · form template editor user’s guide

Documents