By default a form has a single column for layout out fields and other form elements. To allow for more layout flexibility, in App Builder you can also specify that an area of the form can have two, three or four columns. You can mix any combination of column layout elements. The only restriction is that they can not be nested, so a column layout element can only be added above or below an existing one, not inside of one.
When a form with a column layout is used, tabbing between fields makes the cursor move down the current column to the end of the column, before moving across to the next column.
|To add a new section, drag the desired Column Layout design element from the left-side palette and drop it where you would like the new columns. New sections can be placed above or below existing columns, but not inside them.
In this example, the 3 column layout element has been highlight.
|Example of a Selected Field (Text Field)|
|Required||Sets if this component’s value is required to be entered before the record can be saved. Click to enable / disable.|
|Copy Field||Click on this icon to create a duplicate copy of the current field. The new field will appear below the current field in the same column container.|
|Properties||Clicking on this displays the selected component’s settings in the right-side properties panel.|
|Remove||This deletes the component from the form.|
|Field Title||This is the text label that appears above the field. It lets the user know what information should be in the field, for example ‘First Name’ or ‘Date of purchase’.
You can edit this value directly: Just click on the text and edit it. The default title will be the name of the component (e.g. Text Field, or Date).
|Field Help Text||This is help text label that appears under the field. It is used to add any information the user might need in order to enter the correct information in the field. You could put a more detailed description than the Field Title, or an example of the correct format. (e.g. “Enter the employee ID in the following format A1234.”)
You can edit this value directly: Just click on the text and edit it. The default tooltip text is “Enter Tooltip Text”. If you leave the default text of “Enter Tooltip Text”, it will not display when the form is used.
The only two sets of properties that can be set for a column layout control: The column size options and conditional visibility. The table below shows the available column size options for each of the column layout elements.
|Number of Columns||Column Size Options|
|Conditional Visibility for a column control works exactly the same as it does for a field, except that it hides everything in the set of columns and not just the single field. Follow the link below to see how Conditional Visibility is set:|
The following video outlines creating sections and columns:
|Below are links to articles that cover the other general aspects of form design:|
|Form Editor Overview|
|Form layout part 1: Sections|
|Form layout part 3: Common Field Features|
|As an example of the many field types available: Working with Text fields|
|Below are links to the two form building parts of the Building an Expense Reports App tutorial series:|
|Part 3 – Starting the Expense Reports Form|
|Part 4 – Completing the Expense Reports Form|