Form Layout
Description
An explanation of how to use Sections to control the positioning and grouping of fields, headings, and buttons.
Discussion
By default, all fields, headings, buttons, etc., are displayed on the form one below the other in a single column the width of the screen. For many forms, displayed on devices with narrow screens, this works well. However, for some types of forms it would be better to be able to specify ways to position fields and headings differently depending upon the width of the screen. For example, instead of each field being displayed one below the other, it may be better for a form to show three fields next to each other horizontally in a row when the device is wide or oriented horizontally.
The Form Layout functionality is used to specify the horizontal and vertical positioning of items, as well as visual cues of grouping, such as borders and backgrounds.
There are four main concepts that make up the Form Layout functionality: Grouping into Sections, Columns, Sizes and Positioning, and Screen Width Classes.
Grouping into Sections
Parts of the displayed form called Sections are used to control the spatial layout of fields, headings, and other visible items.
The Section Start and Section End command types are used to indicate the start and end of a Section. All fields, headings, etc., between a Section Start and Section End command are part of the group. In the Commands list, the commands within Sections are listed indented to make the grouping more obvious. Sections may be nested.
For example, here is a Commands List with two Sections enclosed within a third Section:
There is one Section going from line 2 through 12 (Outer Section). Within it is a Section from line 3 through 7 (Inner Section 1), and another from line 8 through line 11 (Inner Section 2). Field A, Field B, and Field C are in Inner Section 1, Field D and Field E are in Inner Section 2, and Heading "Section Example" and Field F are not in any of the Sections.
Columns
By default, the items within a Section are displayed in order, one below the other, in a single column. Also, by default, each Section indents its contents.
The example above, by default, would display like this (to add clarity, each Section is displayed here with a different background color and a little extra padding):
Through various properties, a Section may display the items within it in multiple, equal-size columns. The items are displayed across the columns, with additional items continuing on successive rows. The number of columns is specified using the Columns setting of the Section Start Layout property. Through the Indent setting of the Section Start Layout property the indenting of a Section may be turned off or left on.
For example, if Inner Section 1 had Columns set to 2 and indenting turned off, and the Inner Section 2 also had indenting turned off (but Columns left at the default value of 1), the display would be:
Field A and Field B are displayed in the first and second columns of the first row of Inner Section 1. Field C is displayed in the first column of the second row of Inner Section 1.
Nested Sections may be used to have columns within columns. The internal Sections are treated as a single item for layout purposes.
For example, if, in addition, Outer Section had Columns set to 2 and indenting turned off, and Inner Section 2 also had indenting turned off, the display would be:
Using combinations of the number of columns and nesting of Sections, a wide variety of layouts may be specified.
Sizes and Positioning
By default, each item in a Section is displayed in the next column horizontally, continuing into successive rows, and is the width of a single column. Through use of the Layout properties of fields, headings, Sections, and other items, this behavior may be modified.
To continue the example, the Layout property Width setting of Field A could be changed to "2" or "Full" and the display would be:
Alternatively, the Width of Field A could be left as 1, and the Layout property Position setting of Field B could be changed from "Next" to "1" (meaning start in the next first column of a row, like a line break), and the display would be:
Finally, the Width of Field A could be left as 1, the Position of Field B left as Next, and the Layout property Height setting of Field A could be changed from "1" to "2" (meaning span two rows in the same column(s)), and the display would be:
[Photo, etc., taking up vertical space.]
The use of spanning multiple rows can work well with large fields, such as photos, or high Sections sharing a containing Section with plain fields. (Sections have Width, Height, and Position settings, just like fields and other items.)
Normally, fields and headings are displayed aligned vertically to the bottom of their row:
There are times when you would rather have them aligned vertically to the top:
[Photo, etc., taking up vertical space.]
The Vertical Layout property setting lets you specify how the whole rectangle of an item is displayed. It defaults to Bottom for fields and Headings, and to Top for Sections and Data Groups. The options available are: T (Top), C (Center), and B (Bottom).
The Vertical setting has no affect on the contents of the item. (The Heading Text Align property may be used to horizontally align text in Headings. The look of other items may only be affected using Variant properties.)
The Width, Height, Position, and Vertical settings provide additional layout variations.
Screen Width Classes
Some types of forms may need to be designed to have different layouts depending upon the width of the screen. For example, it could be best to show one column when displayed on a narrow device like a small phone and three columns when on a device that is wide or oriented horizontally.
The Form Layout functionality addresses this need. Different layout settings may be specified for different classes of screen width.
For each item's Layout properties, there are separate groups of settings for each size category. When displaying an item, the current screen width class is used to determine which group of settings apply. This application of the size is recalculated dynamically when the device is rotated.
On devices displaying a form, screen widths are automatically classified as one of S, M, L, and XL. The S (small) size corresponds to a small phone held vertically (portrait), M (medium) corresponds to a larger phone held vertically, L (large) corresponds to many phones held horizontally (landscape) as well as many tablets held vertically, and XL (extra-large) corresponds to a larger device like a tablet held horizontally (landscape).
When you are setting the Layout properties, the settings for the different screen width classes are listed with a checkbox before each. For a given screen width class, that size or the largest checked smaller size is used. If there are no matches, a default is used. For most items, the default is a width of one, a single row, and positioning in the next column. For Section Start commands, the default is, in addition, a single column, with indent and no border. For heading commands, the default is full-width.
While the determination of the screen width class is normally done automatically, the Filler has settings (accessible through Help) to address situations on some devices where you wish to control that determination manually.
When using the Designer, the Preview Screen lets you specify which screen width class to use for the display through a menu choice at the bottom of the screen. (These sizes are actually a little narrower in the Designer than the actual sizes on a device running the Filler in order to leave more space on the rest of the screen for the lists and property screens.) It initially starts as small (S).
Other Section properties
The Layout properties settings for a Section includes the number of columns within the Section and whether or not it is indented. In addition, there are settings for each size for whether or not a border is to be displayed around the Section. The default is no border.
The Start Section command also has two additional properties to optionally specify the color of the background of the Section as well as to specify the color of the border, if present. These values may be the same or different.
To help provide a title for a section, such as within the border, there are the Heading Types "Small Subhead", "Medium Subhead", and "Large Subhead". Unlike some of the other Heading Types, there are no bars above the text. The Heading Color and Text Align properties may be used to adjust the text as needed.
Data Groups Are Sections
Data Groups act similarly to Sections. The Layout properties settings for a Data Group includes the number of columns within the Data Group and whether or not it is indented. In addition, there are settings for each size for whether or not a border is to be displayed around the Data Group.
The default settings for a Data Group are "Full Width", no indent, and no border.
The fields and other commands within each item in a Data Group are grouped into a single column as if they were in a simple, single-column Section for each repetition of the Data Group. These grouped fields are then displayed one after another. If the Data Group has the default single column, the grouped fields will be displayed vertically, one group below the previous group. If the Data Group has multiple columns, the vertical groups will appear across the columns and then in subsequent rows, just like fields, headings, or Sections within a Section.
If you want the individual fields within each repeated group to lay out across the screen, enclose the fields within a Section within the Data Group and set the number of columns of that Section.
For example, here is a Commands List with a Data Group with its fields enclosed in a Section:
Here is how it would display:
If the Data Group was set to have two columns, it would look like this:
Without the enclosed Section inside the Data Group, and with the Data Group's columns set to three columns, it would look like this:
Finally, without the enclosed Section inside the Data Group, and with the Data Group's columns set to the default one column (what you get when you first create a plain Data Group), it would look like this:
The Data Group command also has two additional properties to optionally specify the color of the background of the Data Group as well as to specify the color of the border, if present. These values may be the same or different.