Follow best practices, and avoid worst practices, when designing Form-type Screens.
Overview
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:
Display User Information
Bad Practice
Avoid using placeholders for Line Input controls. When users start typing in the controls, the placeholders disappear.
Good Practice
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.
Organize Line Input Controls
Bad Practice
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.
Good Practce
If the Line Input controls associate with one another, place them in one horizontal line.
Bad Practice
If your form is large, do not use all Line Input controls in one section.
Good Practice
Use the Rich Text control to add headings that break the form into logically-related groups.
Label Text in Line Input Controls
Bad Practice
Avoid text redundancy as shown in the example below.
Good Practice
Be as concise as possible in control labels.
Select List Controls as Drop-Down Menus
Bad Practice
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.
Good Practice
If there are fewer than four options, show the options immediately using Submit Button controls. This design requires one click to commit an action.
Rich Text Controls as Headers
Bad Practice
By providing no user guidance for information to enter into the form, users become confused.
.png "image(79).png")
Good Practice
Use helper text to provide context how to interact with each control.
Bad Practice
Unmasked Line Input controls allow users to introduce errors when entering commonly-used information.
Good Practice
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.
.gif)
Record List Controls in Scripts
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.
"form_record_list_1": [
{
"first_name": "testfirst",
"last_name": "testlast"
}
] 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:
"form_record_list_1": [
{
"first_name": "testfirst",
"last_name": "testlast",
"row_id": "d8yaosi0vqlkmude18"
},
{
"first_name": "test2first",
"last_name": "test2last",
"row_id": "dkf28312dfsdfs301"
}
]