Product Bulletin 119 - Edsby Forms Layout Tool

Jan 2nd, 2019

Overview

Edsby has a very flexible system for delivering custom forms for activities such as registrations, program sign ups, acknowledgement forms, and the like. Typically these forms are defined by customers and built by Edsby’s forms development team. This note describes a facility that enables customers to electronically define the forms they desire in a way that is easy for non-developers to use. This has the benefit of lowering the professional services cost of having custom forms built, and provides for a more rigorous way for customers to specify how a form should look and work.

The facility provided to do this is based on Microsoft Excel. Each row in the Excel file specifies all required attributes of a specific field (ie. an input field including its guide text).

An Excel template is available that provides a sample form. This template can be used to add in the specific fields and text along with layout controls to define the form. The completed template can then be processed by the Edsby team to create the corresponding form directly in Edsby. 

Edsby Forms Layout Engine

The internal Edsby forms engine automatically handles various screen sizes ranging from smartphones to full size desktop computers. This means a form is defined once and is automatically laid out in a way that works appropriately for the device being used to access it.  Edsby does this by dividing up the virtual “page” into 12 columns of equal width. Form fields can be defined to be any whole number from 1 to 12, but typical choices are 3, 4, 6, and 12. A full size computer can display all 12 columns. A smartphone can display up to six columns at once. A field of width 12 will be automatically shortened on a smartphone to fit as if it were specified with a width of 6.  So to have a single field take the whole width of the screen on both full size computers and smartphones it should have a width of 12. To have it so that a field takes half the screen width on a full size computer and all the screen width on a smartphone the field should have a width of 6. 

Edsby Form Definition Spreadsheet Format

The spreadsheet template has the following columns that are described below:

form:  The form column should have a non-empty value to indicate the human-readable name of a new form within the workflow. Each form is considered a separate 'page' of the workflow.

section: The section column should have a non-empty value to indicate the human-readable name of a new section within the form.

subsection: The subsection column should have a non-empty value to indicate the human-readable name of a new subsection within the form.

type: The type column is set up with a type picker so that one of a pre-defined set of valid field types can be selected. If no field type is picked then the text supplied in the subsequent “text” cell is displayed in the field. Supported field types are described in the table at the end of this document.

text: The text column supplies the field guide text associated with the field.

id: The id specifies a unique field name. The output of the form will use this id to name the data element (for further processing and for exporting).

width: The width field specifies how wide to make the field on the screen. Supported values are a number between 1 and 12. The page width is considered 12 wide on a desktop browser and 6 wide on small mobile screens. To lay out two fields on row on a desktop computer equally specify a width value of “6” (12 divided by 2). If you want the field to be the full width on both desktop and small mobile screens specify width value of “12”. Generally the width is set to one of 1, 3, 4 or 12

required: The required column indicates that a field is required meaning the user cannot proceed unless the user inputs a valid value into a required field. A “y” or “Y” or a “1” in this column indicates the field is required. Any other value indicates the field is NOT required.

options: The options field is reserved for future use and should remain empty.

comments: The comments field can be used for notes. It is ignored when generating the workflow. The notes can be used to provide further descriptions of form semantics such as a numeric field only supporting values between say 1 and 50.

Edsby Field Types

The following table describes the current supported set of field types. Additional field types are being added as the need arises.