Form Layout, Design Tools, and Properties
Summary of Form Layout and Tabbing Behavior
The design tools are non-data collecting objects that can be placed on a form. These, combined with the data fields make up the entire content of a form.
The form building canvas allows users to place objects to make a form appear exactly how they want it, with no forced columns or alignment rules.
Tabbing Behavior
For data entry users, when using a keyboard and tabbing between fields, the cursor will follow an order of right to left and down the page. Given that many users perform data entry in this manner, keep it in mind when placing objects for logical order of data entry.
Space Between Objects (White-space)
Any space in the form building canvas that exists between objects will be maintained when the form renders for data entry.
If objects are hidden by a conditional action, the form rendering will only close the amount of space which the hidden objects require. Any space around those objects will be maintained. In other words, if 10 objects in a vertical column are all hidden together, the space between all those objects will add up and make it appear like there is empty “white-space” on the page.
To mitigate this scenario, bring the hidden objects closer together.
The mobile app treats the white space differently by automatically removing it - placing the objects on a vertical axis next to one another. To maintain vertical open space between objects on the app, use a blank image label and adjust the size as needed.
It’s advised to play around with the layout in the form builder while viewing the same form for data entry on the web and mobile app to verify its reflected the way its needed.
Labels
Labels are used to identify fields and section headers. Each label can also be directly related to a field for reporting and data export purposes. If a field label is long and cumbersome, you can define a reporting label within the Field Properties which will take precedence over any related Label.
When a Design Tool is dragged and dropped into the form builder, the Tool becomes active. To edit an existing Design Tool in a Form, simply click on the Design Tool to make it active. An active tool is designated by the field having a moving dotted line. When clicked, the Properties for the Design Tool display in the properties section of the Form Builder as shown in the figure below.
When a New Label is dragged into the Form Builder body/grid, the Text Editor pop up window will display allowing the Label Text to be entered.
Label Properties
Text – Allows text to be added to identify a Section or a Form Field.
ToolTip - Add text will will display to end users of the CRF when they hover over the label.
The General, Data, Validation, and Layout sections are collapsible when you click the panel icon.
Selecting view/edit above opens the Rich Text Editor which allows the label text to be entered and formatted.
Labels can be related to a specific data field, which will force it to follow any conditional action behavior that the associated field has, or to be displayed as the data field's label in the data extracts if the data field does not have its own reporting label.
In the example below, the weight field has two labels, but we want one of the labels to display in the data extracts next to the actual weight value. To do this, be sure the units label is related to the weight field, and the box to Include in Export is checked.
Validations
Validations allow a user to define the conditions that a field(s) value must meet (or not meet).
Conditional Actions
View/Edit – Clicking the View/Edit link brings up the Conditional Actions application and allows the user to create a simple Conditional Action Hide only on Labels. Please refer to the Conditional Actions – Validation Help file for the complete instructions.
Layout
The Layout feature allows the size and position of a Label to be designated within the body/grid. In the figure below, the Layout of the New Label is 30 pixels from the left of the margin and the top of the object is 90 pixels below the top of the body/grid.
Left (pixels) – Used to designate the left edge of the Label box. This allows flexibility for alignment of labels.
Top (pixels) –Used to designate the top edge of the Label box.
Width – Used to designate the width of the Label in either pixels or a percentage.
Pixels – Used to designate the width of the Label in pixels.
Percent – Used to designate the Width of the Label as a percentage of the Form Layout width. For example: If the Width of the Form in the Form properties is 800 pixels and a Label Width of 50 percent is designated, the Label Width will be 400 pixels wide.
Height – Used to designate the Height of the Label.
Pixels – Used to designate the Height of the Label in pixels.
Percent – Used to designate the Height of the Label as a percentage of the Form Layout height. For example: If the Height of the Form in the Form properties is 600 pixels and a Label Height of 50 percent is designated, the Label Height will be 300 pixels tall.
Separators & Properties
A Separator creates a section in a Form by placing a section header across the width of the entire form. Dragging and dropping a Separator onto the Form Builder body/grid opens the Separator Properties in the Toolbox as shown in the figure below.
To move the Separator, simply click on the Separator and drag and drop it in the desired location. By default, the Separator Style of “Section” is added when dragging into the body/grid. Currently, “Section” is the only separator style supported.
General section
Style – Currently, the Style dropdown contains only the default style, “Section” as shown in the figure below.
The default “Section” style places a section header expanding across the entire form. A Section Title can then be entered that will populate the section header as described below.
Section Title – Allows the user to enter text that will be used for the section header. Click in the Section Title field (the text will highlight in blue indicating the field is active), enter the desired text and press the Tab or Enter key and the text will appear in the Separator as shown in the figure below.
Validations
Validations allow a user to define the conditions that a field’s value must meet (or not meet).
Conditional Actions
0 - View/Edit – clicking the 0 - View/Edit link brings up the Conditional Actions application and allows the user to create a simple Conditional Action. The only type of Conditional Action that can be applied to a Separator is “Hide.” Therefore, the select type dropdown in the Conditional Actions builder contains only one selection (Hide), as shown below. Please refer to the Conditional Actions – Validation Help file for the complete instructions.
Layout
Left (pixels) – Allows the user to designate the left edge of the Separator.
Top (pixels) – Allows the user to designate the top edge of the Separator.
Width – Allows the user to designate the width of the Separator in either pixels or a percentage. The default width is 100% of the Form width.
Pixels – Allows the user to designate the width of the Separator in pixels.
Percent – Allows the user to designate the width of the Separator as a percentage of the Form Layout’s width. For example: If the Width of the Form in the Form properties is 800 pixels and the Separator Width is 50 percent, the Label Width will be 400 pixels wide (half the width of the Form).
Normalized Table & Properties
A Normalized Table is a sub-form, or a form within another form which can collect repeating data. It allows a user to insert a table where multiple fields can be placed so a user can complete multiple rows of the same information. Each field within the table has a column header and properties. Table form field properties are added the same way as placing them within the Form Builder. Simply drag the desired fields over to the table. Drag the fields within the list to reorder them.
View/Edit – Clicking the link opens the Fields Dialog box. The Fields Dialog box allows the user to add Form Fields, Properties, and Type in Column Headers for a Normalized Table.
Maximum Rows – The Maximum Rows field allows the user to define the maximum number of rows that can be completed in the Normalized Table. To change the number of maximum rows in the table, click in the field next to Maximum Rows and enter the desired number of rows to be allowed.
Report Name – The Report Name field allows the user to enter a name for the table. The name entered will be displayed in various reports.
Fixed Rows
The Fixed Rows checkbox allows the user to define a fixed number of rows for the table. The Add Row button and the delete control will not appear in the form for the user completing the form.
By default, tables are dynamic, where data entry user can add rows to the table at will. Normalized Tables can also be defined as a Fixed. This sets a pre-defined number of rows in the table based on a dropdown/choice field in the First column. The coded choices in that column will pre-populate each row of the fixed table.
The first column must be a dropdown choice field
Here’s a common example:
Related articles