Laying Out Forms

Introduction

The Forms Designer is located in Visual Dispatch Web under the Forms dropdown. From this dropdown, lists of completed forms can also be accessed, grouped by type (JSA, Pre-Start, Other).

Form Structure Overview

The Form Designer is a workspace for laying out forms using the following components:

• Panels: Boxes that hold all elements placed on the form. Every element must reside within a panel.
• Elements: Individual controls, text, and dividers that make up the form. Elements generally fall into two categories:
  • Instructions or labels: Provide guidance to help operators complete the form accurately.
  • Input fields or selections: Capture information from operators. Some fields have specialized behaviors based on their type.

Available Element Types

Instructions to / Help for Operator:

• Label: A text element typically used to describe a panel or a group of controls. Labels generally provide a heading or context for an entire panel or a larger set of elements.
  • A bold label with an indented bold label below it: 

• Paragraph: A block of text used to provide detailed instructions or guidance to the operator.
• Divider: A visual element, either a solid line or blank space, used to separate different sections of the form.

Controls:

Note: most controls have a Label built into them, which can be bold and/or indented. 

• Checkbox: a single checkable box

• Checkbox Group: A collection of checkboxes grouped together. One or more options can be selected. The checkboxes can be arranged vertically in a column or horizontally in a row.

• Radio Group: A collection of options where only one selection is allowed. Options can be arranged vertically in a column or horizontally in a row.

• Text Box: A single-line input field for short text responses.

• Text Area: A multi-line input field for longer text responses.

• Number Field: An input field that accepts only numerical values.

Modifying Your Layout

All elements in a form must be placed inside a panel. Ensure a panel is created and selected before adding any elements. The toolbar at the bottom of the screen provides tools for creating and moving controls within a panel.

After a control is copied or cut, it changes to this, providing options to paste it above or below the currently selected control:

Selecting Order Mode changes the toolbar to provide commands for moving the currently selected control up or down within its panel. The system remains in this mode until Edit Mode is selected:

Best Practices, Tips, and Tricks

• Sketch first: Creating a rough layout of the form before building it makes the process easier.

• Use Preview frequently: Previewing the form regularly helps identify mistakes early.

• Use Copy strategically: Copying is especially useful for groups of Radio Buttons and Check Boxes.

• Indentation options:

Several elements can be indented, but all follow the same indentation rules:

1. The control itself

2. Its label

3. Any additional controls that are connected

• Naming Controls

  • Control names cannot contain spaces. The Name field is a backend identifier that must be unique and is used whenever one field references another (for example, when checking a checkbox triggers the appearance of a text box).

  • A best practice is to use a prefix indicating the type of control. For example:

• Label Options
  • Bold
  • Indent
  • Label Left: moves the text to the left side of the control