The Form Editor/Builder

e-Forms, Templates and Sub-Templates are built using the eXFORMA form editor/builder. To create a new e-Form select the e-Forms subsection of the e-Forms tab. Enter a value for the name of the form and give it a description and then click on the ‘Create new e-form’ button.

ch5_p1

The e-Form builder is a tool which enables users to graphically build electronic forms. Users can specify elements, fields, values, properties, and other custom characteristics to satisfy even the most detailed levels of design. The form builder is broken down into four (4) graphical elements to conveniently facilitate the design, development and deployment of an electronic form.

The Four eXFORMA e-Form Panels are:

  1. The Field Element Panel
  2. The Field Control Panel
  3. The Field Property Panel
  4. The Graphical Command Panel

The eXFORMA form builder is designed to be flexible to all work environments, but for best results GroveWare recommends using the designer with Internet Explorer version 7.0 or better, and with a minimum 800×600 screen resolution.

The eXFORMA Form Designer Interface

The eXFORMA Form Designer Interface

Field Element Panel

The e-Form Field Element Panel consists of pull-down menu for HTML, predefined, and Sub-Templates (common component) elements.

The e-Forms Builder Field Element Panel Pull-Down Menus will be explained in detail in the following sections with a complete breakdown and explanation on how to use each of the elements in the list. For now we will focus just on the panel itself.

  • HTML Elements: A list of standard elements such as textfields, pulldown menus, headers, radio dials, buttons, checkboxes, etc. which can be used and customized within the e-form
  • Predefined Elements: A list of common elements such as Country, Gender and Season amongst others are already defined to make e-Form creation quicker and easier
  • Custom Elements: A list of predefined and user created sub-templates that are available within eXFORMA or from within the form category. Custom elements can be created by the user as sub-templates from within the Sub-Template subsection of the e-Forms tab.
e-Forms Builder Field Element Panel

e-Forms Builder Field Element Panel

HTML Elements:

HTML Element Field Description
Attachment Allows the submitter to upload and attach files to the form
Autodate Automatically date/time stamps the form when it is initiated
Barcode Creates a barcode to indentify the form submission for scanning
Barcode Reader Captures the results from scanning a barcode onto the form
Barcode – User Generated The user generates the barcode in the form using the RFID reader from a device
Button Standard Click button which can be scripted to trigger events
Calendar A textfield which allows users to select a date from a calendar
Checkbox Multiple choice input check (R) area
Connector Maps the elements on the current e-Form to another form or database
Double Entry Two textfields which validate against eachother (common for verifying emails or passwords on forms)
DrawOn Image Allows the designer to include an image on the form which users can then mark on.
Embedded Document Allows the designer to embed a document within the form so that users can download it
e-Mail Notification Creates an customizable email sent upon form completion/submission
Form Style Formats the style of the entire e-form; ie- background colour, borders, spacing
GPS Coordinates Retrieves the GPS co-ordinates and timestamp from the device (if compatible)
Handwritting Used for capturing signatures on a form
Heading Graphical text control for creating a label field
Hidden Data Hidden element for background calculations does not appear on e-Form
Horizontal Line Draws a Horizontal line output, with controls for height, width, colour
Hyperlink Enables the e-forms user to jump to another (predefined) browser page
Image Embeds an image on the form – suitable for logos, etc.
Line Space Space output across e-form, with height, width, colour
Multiple Select Box A list/menu allowing the selection of multiple items
Ordered List Numbered item list output
Page Break Point Inserts point where the e-form is split into the next page
Paragraph Sentence output – without any linking
Password Field Textfield with encrypted onscreen input/output
Pull-down Menu Single item input selection menu
Radio Buttons Single choice input option (ž) area
Repeat User inputted control to display additional repetitive fields on a form
Rich Text Area Text area input with formatting options. (Bold, underline, italics, etc.)
Sentence Straight text on a form with support for hyperlinks
Space Spacer used to control layout of elements on a form
Table Style Formats the style of a form table; color, borders, spacing, visibility
Take Picture Allows the user to take a picture using the devices camera and embed it on the form as part of a submission
Textarea Textbox to support multiple rows of user inputted text (8000 characters)
Textfield Single row element supporting limited length user inputted text (255 characters)
Unordered List Bulleted item list output

Custom Elements (Sub-Templates):

Custom Element Description and Details
Personal Info Heading, title, first name, last name, and gender input fields
Contact Information Heading, work, home, cell, pager and fax numbers, and e-mail address input fields
U.S. Address Heading, apartment number, two address lines, city, state, and zip code input fields
Canadian Address Heading, apartment number, two address lines, city, province, and postal code input fields
International Address Heading, apartment number, two address lines, city, state/province, zip/postal code, and country input fields
Full Name Heading, title, first and last names input fields
All Personal Information Heading, title, first and last names, gender, address line, zip/postal code, city, state/province, country; phone, cell, pager, and fax numbers, and e-mail address input fields
Professional Information Heading, title, first/last names, occupation, company name and address lines, zip/postal code, city, state/province, country; phone/fax numbers, e-mail address input fields
Submission Information Heading, first, last and middle names, job title, company name, business address and phone number lines, mobile phone and business fax numbers, and e-mail address input fields
CUSTOM Any sub-templates within the category will be shown at the bottom of this list.

 Predefined Elements:

Predefined Element Description and Details
Country Pull-down menu of countries
U.S. State Pull-down menu of American states
Canadian Province Pull-down menu of Canadian provinces
Season Pull-down menu of the four seasons
Year Pull-down menu of (customized) range of years
Month Pull-down menu of the twelve calendar months
Day of Month Pull-down menu of month dates
Weekday Pull-down menu of the seven days
Credit Card Pull-down menu of the five major credit cards
Credit Card Vendors Pull-down menu of the five major credit card vendors
Title Pull-down menu of the five main salutation titles
Gender Pull-down menu for “Male” or “Female”
Yes/No Pull-down menu for “Yes” or “No”
True/False Pull-down menu for “True” or “False”
Career Level Pull-down menu of six main career levels

Field Control Panel

The e-form field control panel is where you specify the arrangement of your e-form in terms of the identification, type, label, row, and table section per field:

e-Forms Builder Field Control Panel

e-Forms Builder Field Control Panel

The field control panel consists of these columns:

Column Description and Details
ID This reference identifies the field on the e-form, and controls the selection of the field (row and other columns) properties
Field Type This reference describes the e-form field element (name)
Label This textbox is where you specify the e-form field label (output)
Row Check (R) this box to start the field on a new row on the form
Table Specify the e-form table in which to place the field

This is where the form comes together; by selecting HTML elements and custom elements designers can create a form row by row, adjusting the element properties as they need.

Field Property Panel

The e-form field property panel is where you specify the properties of each of the e-form field elements. Once field properties are specified, point to and click on the Apply button. Field properties are discussed in more detail in the next section with each respective element.

Graphical Command Panel

The graphical command panel is where you control your e-form development:

e-Forms Builder Graphical Command Panel

e-Forms Builder Graphical Command Panel

The command panel consists of these options:

Command Description and Details
Up Moves the selected field up one spot
Down Moves the selected field down one spot
Add Adds five more fields to the field control panel
Copy Copies the selected field and its properties to memory
Insert Inserts a new field before the one selected
Paste Pastes the field and its properties from memory, into the field (ID) space selected
XML Renders a preview of the e-form submission in XML layout
Undo Undoes the last field panel command
Delete Deletes the selected field
Delete Multiple Provides a pop-up menu to specify a range of id’s to be deleted on the form.
Redo Redoes the last field panel command
Cancel Closes the e-Form building session, and takes you back to the e-Forms Management page, without saving any changes
Preview Renders a preview of the e-form in a separate browser
Save Validates the XML references, and saves your e-form

 

Contact Form Powered By : XYZScripts.com