Follow best practices, and avoid worst practices, when designing Form-type Screens.
Follow basic form design best practices so your Form-type Screens are easy to navigate and read. Many of these best practices may apply to Display-type Screens.
Use Multicolumn / Table controls to organize the layout and width of other controls.
For each example, the Bad Practice tab displays by default. Click the adjacent Good Practice tab to view the best practice to follow. Design practices that are similar are grouped into the following sections:
Avoid using placeholders for Line Input controls. When users start typing in the controls, the placeholders disappear.
Use labels in controls to indicate their purpose, since they are always visible for users to see.
See the Label setting for the Line Input control for more information.
When a user navigates through a multi-column Screen, making the user follow a Z-pattern is more difficult for the user's eyes. Users might not even know where to start.
If the Line Input controls associate with one another, place them in one horizontal line.
If your form is large, do not use all Line Input controls in one section.
Use the Rich Text control to add headings that break the form into logically-related groups.
Avoid text redundancy as shown in the example below.
Be as concise as possible in control labels.
If there are fewer than four options, as a general guideline do not put them in a Select List control as drop-down options. This design requires the user to click twice to commit an action: once to display the Select List control options, another select an option.
If there are fewer than four options, show the options immediately using Submit Button controls. This design requires one click to commit an action.
By providing no user guidance for information to enter into the form, users become confused.
Use helper text to provide context how to interact with each control.
Unmasked Line Input controls allow users to introduce errors when entering commonly-used information.
Use masking patterns to pre-format commonly used information, thereby allowing users to enter information accurately. See the Custom Format String setting for the Line Input control for more information. Click the image below to enlarge.
Entering the following Script code for a Record List control without Row IDs does not work as expected such as allowing to edit, delete, or add records.
When initializing a variable for a Record List control in a Script code using a Calculated Property, it is essential to ensure that each row contains not only the record attributes but also a unique row_id
attribute. This row_id
should ideally be a hashed value or a unique string for each row. The presence of this row_id
is crucial for internal row tracking. For example, if we have a Record List control of first_name
and last_name
, the Calculated Property should return something like this: