1. Home
  2. Forms
  3. Form Editor
  4. Form Editor: 2 – Layout Columns

Form Editor: 2 – Layout Columns

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)
Icon Property Description
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.

Column Properties

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
2
  • 75% – 25%
  • 50% – 50%
  • 25% – 75%
3
  • 33% – 33% – 33%
  • 25% – 25% – 50%
  • 25% – 50% – 25%
  • 50% – 25% – 25%
4
  • 25% – 25% – 25% – 25%

Conditional Visibility

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:
Conditional Visibility

Demonstration Video

The following video outlines creating sections and columns:

Next Steps

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
Updated on August 16, 2019

Was this article helpful?

Related Articles