Form Template Design (HTML)

Data Hierarchy

The data hierarchy describes the logical object model of all the components of the form template.

Form Head

The Head section includes the form name, meta content and  links to any files used by the template. 

Typically the meta-content includes form type variables.  FLM injects and fills a number of form variables or meta-nodes into HTML forms. Some of these are used by FLM when the form is submitted, while others are there for use by the form itself. Some are injected at runtime, while others will already be on the template if it  is has been generated from the 'Master Template' and will be filled (not injected) by FLM. The values inserted by FLM at runtime overwrite the values already on the template and these in turn may be overwritten by Javascript on the template. The following table lists all variables inserted/filled by FLM after a 'Form Wizard' run and at runtime:

Variable

Description

Filled by form Wizard

Inserted at runtime

Filled at runtime

CCODE

Customer code

X

 

X

FTYPE

Form Type

X

 

X

FLANG

Language

X

 

X

FVER

Version

X

 

X

FID

Form ID

 

X

X

FID_VAR

Form Variant

 

X

X

FSTATUS

Form Status

 

X

X

RET_EMAIL

Sender email address

 

X

X

FTRANSPORT

Form Transport Mechanism (ie Offline, Online via Java Portal, Online via BSP Portal etc)

 

X

X

FILLABLE

Fillable flag

 

X

X

FCURRENTUSER

Current User

 

X

X

STATUS_<STATUS_NAME>

There' ll be more than one of these. It's basically a list of all the statuses configured in the system (together with the FLM 'Special Statuses' ie Draft)

 

X

X

ACTION_<ACTION_NAME>

Same as above for actions

 

X

X

COLOR_<COLOUR NAME>

Same as above for custom colours. For HTML the spelling is 'COLOR' whereas for PDF it's  'COLOUR' I'm afraid...

 

X

X

TEMPLATE

Template option. The difference between this and the FLANG variable is that FLANG will always contain the 'Template Option' at which the form was originally rendered at, whereas TEMPLATE may change from variant to variant if so set via 'Template' user-exit

 

X

X

NEXT_PAGE

Variable used for navigation (it determines the page you navigate to after a render error or a successful submission) in the MultiUI portal. Same as 'PREV_PAGE' for PDFs.

 

X

X

Note that the above lists only include variables/meta-nodes filled by FLM and that there may be any number of additional variables on a template.

Links to Stylesheets or css files and JavaScript or script type files are including in the head sections. The version of the FLM Master Template used to generate the form template from the FLM Wizard determines the default Stylesheet and JavaScript files linked in the Head section. The FLM Master Template also determines the release or version of the files, which may be identified by their name, for example FLMStyles_295SP5_v34RC.css.  The FLM release is shown by 295SP5 and v34RC indicates the release of the file.

Header Section

The Headercontainer includes the definition and layout for the form heading, logo and images that will appear at the top of the form.

FLM Interface

This section is a hidden section and includes the FLM form variables.  These hidden fields are used by FLM to manage the form template and should not be changed or deleted.

Form Fields

Subforms and fields defined in the FLM Wizard are injected into the form template. The form fields section is broken into subforms <div> containing objects including; tables, input fields, select, button and checkbox fields amongst others.   The object type is determined by the field definition in the FLM Wizard. An example of a subform is the Submit  subform or <div id="submit">, that  appears at the bottom of a form to allow the user to submit the form to FLM.

Any subform defined in the FLM Wizard with a maximum count of greater than one(1)  is treated as a repeating subform. These subforms are created as a table within the form template, allowing  multiple rows to be added and deleted and include an ADD and DELETE row button. The table includes a header row with an id of SUBFORM_HDR and a row containing the repeating fields or row items with an id of SUBFORM_ROOT__1.

Each field on the form is created with an id to bind the field to the FLM template and a name to link the field to JavaScript. Each field also has one or more events predefined, dependant on the field type. For example, an input field will have "onfocus="flm.onfocusEvent(this)" onblur="flm.onblurEvent(this)" added.