Form Layout

Owned by Eric E. Snyder (Unlicensed)
Last updated: Sep 01, 2016
12 min read

RequirementForm Layout
Section3.2.1.1
JIRA Task

EIR-34 - Getting issue details... STATUS

Introduction

The Form Layout component of Form Designer enables the user to select and position user input fields, text and simple graphics (generically referred to as "fields") on a canvas to create questionnaires that facilitate accurate and systematic data collection. Mechanisms for receiving user input include simple text-entry fields configured for alphanumeric, numeric, multi-line text, images, as well as formatted fields for specific data types including date, time, and telephone numbers. Other input devices include menus and checkboxes that allow users to select a legal value from a list, checkboxes, which toggle Boolean variables, and even menus in which the value selected determines the available values in other menus. Form Designer also supports other "fields" that do not take user input but serve other functions. There are text boxes that can serve as form titles, labels or explanatory text, mechanisms to group other fields together so they can be addressed as a unit, and buttons that can trigger other actions using Check Code or load "related" forms, enabling the user to construct meta-forms from prefabricated components. Each form page serves as a template for populating a database table when used with the Enter module.

Create Project

Objective

The objective of the Create Project use case is to use Form Designer to create and save a new project. 

Preconditions

To complete the Create Project use case, the Epi Info™ 7 menu program must be running.  (Click on the Epi Info 7 program icon or type "EpiInfo.exe" from the command prompt in the installation directory.)

Postconditions

An Epi Info™ 7 project will be created in the Form Designer module and saved to a location accessible from the computer.  The Epi Info™ 7 project file, <ProjectName>.prj, will be located in the <ProjectName> directory where the project was saved.  The latter directory will also contain a <ProjectName>.mdb file, if the data repository that was selected at the time of project creation is Microsoft Access 2002-2003 (.mdb). 

Stimulus/Response Sequence

Start Epi Info™ 7, open Form Designer, then Create, Save, and Close a New Project

1

Stimulus:

Response:

User selects the Form Designer tool by clicking on the Create Forms button on the Epi Info 7 main menu/splash screen.

A Form Designer window opens, containing a menu/button bar and two frames, divided vertically: a Project Explorer frame with a list of project and form templates, if any, and a frame containing a tabbed-page stack with a single unnamed tab.

2

Stimulus:

Response:

User selects File→New Project from the Form Designer menu or New Project from button bar.

A New Project dialog window opens with a number of fields for entering the name and location of the Project (.prj) and data repository (.mdb) files, and the form name.

3

Stimulus:

Response:

User populates the fields in New Project dialog and clicks "OK".

Dialog disappears; the Project Explorer frame is populated with the names of the project, the initial form, the new form’s initial page named “Page 1”, a list of field types, and a list of project, form, page and field templates.  Canvas frame displays an empty canvas page with the name of the form prepended to the name of the page on the tab label (e.g., "Project 1/Page 1").  A new project is created and automatically saved.

Functional Requirements

  1. The system shall enable the user to create a new project:
    1. from scratch, starting with a blank form, or
    2. using a project template or
    3. using a form template.
  2. The system shall enable the user to create and save a new project with the following properties:

    1. project name (compatible with file naming requirements of the operating system),

    2. location on filesystem where project meta-data is stored,
    3. text description,
    4. location for (and type of) project data repository (Microsoft Access or Microsoft SQL Server), and
    5. initial form name.

Create Form

Objective

The objective of this Use Case Specification is to define the functional requirements of the Create Form Use Case. The requirements for the functionality that must be provided to users of the system are described in terms of use cases.

Preconditions

To complete the Create Form Use Case, the Epi Info™ 7 program must be running and the Form Designer module must be open. 

Postconditions

An Epi Info™ 7 project has been created or modified to include a number of data-entry fields sufficient to constitute a useful Form.  (The definition of "useful" is dependent on context.  The example described below will suffice as an operational definition of "useful".)  The structure of the Form has been saved to the filesystem and can be reopened for editing or data entry using "Open Existing Project", described below or published/uploaded to a companion tool for data entry such as Web Survey, Mobile Companion for Android, or Cloud Data Capture.

Stimulus/Response Sequence

Using Form Designer, Open an Existing Project
1

Stimulus:

Response:

User selects File→Open Project from menu or Open Project from button bar.

A Windows File Browser dialog opens on the Epi Info projects directory.

2

Stimulus:

Response:

User opens <ProjectName> directory and selects the Epi Info project file (<ProjectName>.prj) located inside.

File Browser Dialog disappears.  Project Explorer frame is populated with project and form names, a list of field types, and a tree listing any existing project, form, page, or field templates.  Canvas frame displays the canvas page and the fields on the page, if any. The canvas page has a tab labeled with the name of the form and the name of the page.  The project is now open. (This is equivalent to the response in step 3 in the previous sequence.)

Adding Form Elements: Data Fields, Graphic Elements, Pages, etc.
3

Stimulus:

Response:

Select element (Text) from field list in Project Explorer frame and drag element to position on canvas or right-click the canvas near where the new field should be and select New field→element (Text) from the list.

Field-specific (i.e., Text-specific) dialog opens over canvas.

4

Stimulus:

Response:

User populates fields and selects attributes and other options in a field-specific dialog box, then clicks "OK".

The caption and field drop onto the canvas in the approximate location of drag destination or right-click. 

5

Stimulus:

Response:

User clicks and holds a field's input field and repositions the pointer (applies only to fields with separate caption and user-input field, not to fields with only text and/or graphics).

The input field moves in relation to the caption text, which remains stationary.

6

Stimulus:

Response:

User clicks and holds a field's caption and repositions the pointer (see Stimulus in previous row for caveats).

The caption and input field move as a unit (i.e., together) when repositioned.

7

Stimulus: .

Response:

User selects Insert→Page→Add Page from menu bar or right-clicks the form name in the Project Explorer and selects Add Page from the context menu

A dialog opens to receive the name of the new page with the label "Page n" by default (where n is the total number of pages in the Form plus one). After clicking OK, an empty page canvas appears in the right frame and a Page icon, is added to the end of the page list for the current form in the Project Explorer tree.

8

Stimulus:

Response:

User selects Insert→Page→Insert Page from menu bar or right-clicks a <PageName> in the Project Explorer and selects Insert Page.

A dialog opens to receive the name of the new page with the label "Insert Page" by default. After setting the new page name and clicking OK, an empty page canvas appears in the right frame and a page icon is added under the active form and before the current page in the Project Explorer tree.

9

Stimulus: .

Response:

User selects a page template from Templates→Pages in the Project Explorer and drags the icon to a position immediately above or below a <PageName> in the Explorer (<ProjectName>→<FormName>→<PageName>). 

A dialog window appears labeled "Set Page Name" that prompts for "Page Name:" with the default value of "Page n+1", where n is the total number of pages in the form.

10

Stimulus:

Response:

User types a new page name in the "Page Name:" field and clicks "OK".

A new page based on the template appears in the canvas frame with the tab labeled <FormName>\<PageName> and a new line appears in the Project Explorer, <ProjectName>→<FormName>→<PageName>, where the location of <PageName> relative to the other page(s) is in accordance with the terminal position of the mouse-drag event. 

11

Stimulus:

Response:

User selects Edit→Delete Page from menu bar or right-clicks the page in the Project Explorer and selects Delete Page.

The page currently in focus is removed from the Form [1].

12

Stimulus:

Response:

User selects Edit→Rename Page from menu bar.

The user is prompted for a new page name which is assigned to the page when the name is entered.

Note:

  1. If the data table has been created (see Initialize Data Table, below), a confirmation dialog is given asking if you are sure you want to delete the page; that the action cannot be undone.  Any data collected with the fields on the page will be permanently lost.

Functional Requirements

The system shall enable the user to:

  1. open an existing project,
  2. create a data-entry form in a new or existing project,
  3. populate the form with data-entry fields and other graphical elements chosen from a collection of supported form elements[1],
  4. remove, reposition or modify the properties of fields,
  5. for a given field, change the font and modify its style and size for:
    1. the prompt text, and
    2. the field text, 
  6. specify the default font and its size and style for:
    1. the prompt text, and
    2. the field text,
  7. specify the default label-field alignment as:
    1. vertical (labels are placed above fields), or
    2. horizontal (labels are placed to the left of fields),
  8. align and evenly distribute selected fields into one (1) or more columns, with a maximum of five (5),
  9. align and evenly distribute selected fields on a single row,
  10. select a group of fields and make their height, width or size (both height and width) uniform based on the largest or smallest selected field,
  11. specify the parameters for a "snap-to" grid to facilitate the regular placement of fields on the page canvas, including:
    1. toggle the "snap-to" function of the grid,
    2. toggle the display of the grid,
    3. grid square size (integer),
    4. toggle snap prompt to grid, and
    5. toggle snap entry field to grid,
  12. add additional pages to the form and reorder them as needed,
  13. specify the dimensions of each page using:
    1. standard American sizes (Letter, Legal, Executive),
    2. standard European sizes (A0, A1, A2, ..., A6),
    3. standard mobile device screen sizes (e.g., Android Galaxy Tablet), or
    4. a custom size defined in millimeters,
  14. specify a solid color or image for the background of one or more pages in the form and control whether the image is: 
    1. placed in the upper-left or center of the page, or 
    2. stretched or tiled across the entire page,
  15. cut/copy/paste fields within and between pages in the same project,
  16. save a group of fields as a Fields Template,
  17. use a Fields Templates to add a group of fields to a form,
  18. save a form as a Form Template,
  19. save a project as a Project Template,
  20. create a project from an existing Project Template,
  21. create a project from an existing Form Template,
  22. place and reposition a fields template in the same manner as an individual field when adding it to a form,
  23. carry over field values from the previously-viewed record to a new record for certain fields with the "repeat last" option enabled,
  24. prevent records from being saved and generate a warning for fields with the "required" option enabled,
  25. view and edit the Tab Order of fields on a form,
  26. view and print the field names (variable names) on, or adjacent to, each field on a page,
  27. open the Epi Info™ 7 log file directory for selecting and viewing individual files,
  28. create a new blank form page and insert it at an arbitrary position in the sequence of pages for that form,
  29. delete an arbitrary page from a form containing two or more pages,
  30. rename an arbitrary page from a form containing one or more pages,
  31. add a form,
  32. relate a form,
  33. delete a form,
  34. view the data dictionary, and
  35. undo and redo previous actions.

Note:

  1. In requirement 3, a distinction is made between traditional data-entry "fields", menus, options, checkboxes and other non-field elements.  For simplicity, Epi Info 7™ considers all items that can be placed on a form (with the exception of templates) as fields.  This SRS will use the word "field" in this more general sense, except where indicated.


Initialize Data Table

Objective

The objective of this Use Case is to create a data table based on the form design (including field variables and their types) for each page of the current form in Form Designer.

Preconditions

An uninitialized form, just created, loaded from a project file or created from a form template, is open in Form Designer.

Postconditions

The form's data table(s) has been initialized in the project's database and is ready to accept data using the application, Enter.


Stimulus/Response Sequence

Initialize Data Table for Form
1

Stimulus:

Response:

User clicks on the Enter Data button on the button panel, or selects Tools→Create Data Table or Tools→Enter Data from the menu bar.

Create New Data Table dialog opens, which reads: "A data table has not been created for this form. Would you like to create a data table?"

2

Stimulus:

Response:

User click on the "Yes" button.

Create New Data Table dialog closes. New Data Table dialog opens, containing two fields labeled "Data table name:" and "Starting ID:", populated with <ProjectName> and "1", respectively.

3

Stimulus: .

Response:

User may change the default values for "Data table name:" and "Starting ID:", for example, to facilitate merging into the database of a central data collection center. User clicks on the "OK" button.

The dialog closes. If the initialization process was started using the Enter Data button or Tools→Enter Data menu item, Form Designer closes and the Enter application opens with <ProjectName> already loaded and the form opened for data entry.

Functional Requirements

The Form Designer user interface shall enable the user to:

  1. create a data table for the current form when:
    1. the user selects an appropriately-labeled button or menu item, and
    2. the user attempts to open Enter on a previously-uninitialized form;
  2. delete the data table (and all corresponding data) from an initialized form.


Description of Form Elements

Element
VarType
Arguments
Attributes
Compatibility
Web SurveyMobile AppCloud Capture
Label/Titlen/a
  1. Question or Prompt (LongText)
  2. Field Name (Text)
  3. Font (dialog)

x

x

x
TextString
  1. Question or Prompt (LongText)
  2. Field Name (Text)
  3. Maximum Number of Characters
  1. Read Only  [ ] * see footnote 1 *
  2. Repeat Last [ ]
  3. Required   [ ] * see footnote 1 *
  4. Prompt Font (font dialog)
  5. Field Font (font dialog)
xxx
Text (Uppercase)String
  1. Question or Prompt (LongText)
  2. Field Name (Text)
  3. Maximum Number of Characters
  1. Read Only   [ ]
  2. Repeat Last [ ]
  3. Required   [ ]
  4. Prompt Font (font dialog)
  5. Field Font (font dialog)

x
MultilineString
  1. Question or Prompt (LongText)
  2. Field Name (Text)

  1. Read Only  [ ]
  2. Repeat Last [ ]
  3. Required   [ ]
  4. Prompt Font (font dialog)
  5. Field Font (font dialog)
xxx
NumberFloat
  1. Question or Prompt (LongText)
  2. Field Name (Text)

  3. Pattern (options below)

    1. None

    2. #
    3. ##
    4. ###
    5. ####
    6. ##.##
    7. ##.###

    8. User Defined

  1. Read Only  [ ]
  2. Repeat Last [ ]
  3. Required   [ ]
  4. Range     [ ]
  5. Lower (Float)
    • enabled if Range == True
  6. Upper (Float)
    • enabled if Range == True
  7. Prompt Font (font dialog)
  8. Field Font (font dialog)
xxx
Phone NumberString
  1. Question or Prompt (LongText)
  2. Field Name

  3. Pattern (options below)

    1. None

    2. Numeric

    3. ###-####
    4. ###-###-####
    5. ###-###-###-####
    6. #-###-###-###-####

    7. User Defined

  1. Read Only  [ ]
  2. Repeat Last [ ]
  3. Required   [ ]
  4. Prompt Font (font dialog)
  5. Field Font (font dialog)



DateDate
  1. Question or Prompt (LongText)
  2. Field Name (Text)
  1. Read Only  [ ]
  2. Repeat Last [ ]
  3. Required   [ ]
  4. Range     [ ]
  5. Lower (Date with Calendar)
    • enabled if Range == True
  6. Upper (Date with Calendar)
    • enabled if Range == True
  7. Not Future Date [ ]
  8. Prompt Font (font dialog)
  9. Field Font (font dialog)
xxx
TimeTime
  1. Question or Prompt (LongText)
  2. Field Name (Text)
  1. Read Only  [ ]
  2. Repeat Last [ ]
  3. Required   [ ]
  4. Prompt Font (font dialog)
  5. Field Font (font dialog)
xxx
Date/TimeDate/Time
  1. Question or Prompt (LongText)
  2. Field Name (Text)

  1. Read Only  [ ]

  2. Repeat Last [ ]

  3. Required   [ ]

  4. Prompt Font (font dialog)
  5. Field Font (font dialog)



CheckboxBoolean
  1. Question or Prompt (LongText)
  2. Field Name (Text)
  3. Place Box on Right [ ]
  1. Read Only  [ ]
  2. Repeat Last [ ]
  3. Prompt Font (font dialog)
xxx
 Yes/NoBoolean
  1. Question or Prompt (LongText)
  2. Field Name (Text)
  1. Read Only  [ ]
  2. Repeat Last [ ]
  3. Required   [ ]
  4. Prompt Font (font dialog)
  5. Field Font (font dialog)
xxx
 Option Text
  1. Question or Prompt (LongText)
  2. Field Name (Text)
  3. List Options ... (Choose One)
    1. Vertical
    2. Horizontal
  4. Start Listing on ... (Choose One)
    1. Left
    2. Right
  5. Option Definition(s) (Text), One for Each Choice
  1.  Show Label on ... (Choose One)
    1. Right
    2. Left
  2. Number of (Mutually Exclusive) Choices (Integer)
  3. Prompt Font (font dialog)
  4. Field Font (font dialog)
xxx
Command Buttonn/a
  1. Question or Prompt (LongText)
  2. Field Name (Text)
  1. (Prompt) Font (font dialog)

x
ImageFile
  1. Question or Prompt (LongText)
  2. Field Name (Text)
  3. Retain Image Size [ ]
  1. (Prompt) Font (font dialog)

x
Mirror

n/a

(displays value from another field in form)

  1. Question or Prompt (LongText)
  2. Field Name (Text)
  1. Assigned Variable (Choose from all Form Variables)
  2. Prompt Font (font dialog)

  3. Field Font (font dialog)




GridComposite
  1. Question or Prompt (LongText)
  2. Field Name (Text)
  3. Column Definitions (Grid Columns dialog)
    1. Column Header Name for Grid (Text)
    2. Column Name (Text)
    3. Size (Integer; select 1 - 5)
    4. Column Type (Select from List)
      1. Text
      2. Number
      3. Phone Number
      4. Date
      5. Time
      6. Date/Time
      7. Checkbox
      8. Yes/No
      9. Legal Values
      10. Comment Legal
  1. Grid Column Dialog Attributes
    1. Read Only
    2. Required
    3. Repeat Last
    4. Range
    5. Unique Field

Note: Column Type selection determines enabled attributes




Legal Values

Selected Values from List

  1. Question or Prompt (LongText)
  2. Field Name (Text)
  1. Read Only  [ ]
  2. Repeat Last [ ]
  3. Required   [ ]
  4. Prompt Font (font dialog)
  5. Field Font (font dialog)
  6. Data Source (Set Up Code / Legal Links dialog)
    1. Data Source (blank field)
    2. Do not sort [ ]
    3. Buttons
      1. Create New
        • Creates List-Entry UI in Data Source field
      2. Create New from Existing
        • Prompts user to select from list of stored arrays
        • Prompts user to select field (column) to use
        • Selected array is loaded into List-Entry UI
        • New Items can be added to List
      3. Use Existing
        • Prompts user to select from list of stored arrays
        • Prompts user to select field (column) to use
        • Selected array is loaded into List-Entry UI
      4. Delete Link
        • Allows user to remove array after it has been loaded
xxx
Comment LegalSelected Values from List
  1. Question or Prompt (LongText)
  2. Field Name (Text)

Identical to Legal Values except that list items must have following structure:

  • Coded Value (value entered in DB when corresponding comment is selected)
  • '-' (hyphen separator)
  • Comment (appears in menu on form)
xxx
Codesn × m table
  1. Question or Prompt (LongText)
  2. Field Name (Text)
  1. Read Only  [ ]
  2. Repeat Last [ ]
  3. Required   [ ]
  4. Prompt Font (font dialog)
  5. Field Font (font dialog)
  6. Select field(s) to be linked to
    • List of text variables from other fields with enumerated values
  7. Data Source (Codes dialog)
    • Similar to "Set Up Code / Legal Links" dialog
    • However, it creates/uses a list of key-value pairs instead of a simple list of individual choices



RelateForm
  1. Question or Prompt (LongText)
  2. Field Name (Text)
  3. Font (for Prompt)
  4. Related Form (choose)
    • Another Form in Project
    • (create new form)
  1. Radio Buttons
    1. Accessible Always
    2. Accessible only the following conditions are true
      1. Define Condition from (choose)
        • Pull-down list of available variables
        • Relational and logical operators
  2. Return to parent after one record ... [ ]
  3. Related to NutStat Module [ ]


x
Group

Alias

  1. Question or Prompt (LongText)
  2. Field Name (Text)
  1. Prompt Font (Font dialog)
  2. Color (Windows 7 Color Chooser dialog)

Group creates a region on the canvas for which the Field Name serves as an alias for all of the fields contained within the region.  This enables the user, for example, to enable or disable all fields in the region by referencing the group's Field Name.

xxx
Unique IdentifierString
  1. Question or Prompt (LongText)
  2. Field Name (Text)
  1. Read Only    [×]  *see footnotes 2 & 3*
  2. Repeat Last  [ ]
  3. Required     [ ]
  4. Prompt Font (font dialog)
  5. Field Font (font dialog)



Notes:

  1. The attributes "Read Only" and "Required" are mutually exclusive for all elements.
  2. Attributes shown in fixed font cannot be modified by user.
  3. The Unique Identifier field last appeared in Epi Info™ version 7.1.5.  It was removed from the list of available fields beginning with version 7.2.