Data Entry Form: General Information

A data entry form is used for the input of records of a particular type. This topic provides recommendations and guidelines on organizing the layout of a data entry form.

The following screenshot shows an example of a data entry form. As is true of most data entry forms, the displayed form has a Summary area and a tab area with multiple tabs. The displayed tab shows a table (generally referred to as a grid in this chapter).

Learning Objectives

In this chapter, you will how to do the following when you define a data entry form:

Organize the layout of the data entry form
Configure the data entry form in HTML and TypeScript

Applicable Scenarios

You configure a data entry form in the following cases:

You are migrating an existing data entry form to the Modern UI.
You are creating a new data entry form by using the Modern UI.

Recommendations for Organizing the Layout

If the layout of a data entry form should have three slots, you can use one of the following templates:

7-10-7 if you need a short Slot A and Slot C, but you want to put long elements in Slot B
17-17-14 if you need Slot A and Slot B with equal widths, but a shorter Slot C
1-1-1 if you want to show three slots with similar widths

If the layout of the data entry form should have two slots, you can use one of the following templates:

1-1 if you need two slots with equal width
17-7 or 2-1 if you want to put a grid in Slot A and a fieldset in Slot B or if 1-1 is not wide enough because you want to put very long elements in Slot A
7-17 or 1-2 if you want to put a fieldset in Slot A and a grid in Slot B or if 1-1 is not wide enough because you want to put very long elements in Slot B

For more details about templates, see Form Layout: Predefined Templates.

The following table shows recommendations for organizing the layout of a data entry form.


Correct	Incorrect
If you need to show total numbers, put them in the blue fieldset (`class="highlights-section"`) on the right side of the screen. Do not put the blue fieldset between other fieldsets.

If you have multiple fieldsets with short labels and short values in fields, put them in multiple columns and stacks by using one of the following templates: `1-1-1`, `7-10-7`, `17-17-14`, or `1-1.` Do not put fields with short labels and short values in fields in the `1` template.

Make labels with long text longer. Try to make the labels in all fieldsets similar in length (specify `class="label-size-<SIZE>"` in qp-template).

Use a caption instead of showing a single tab. For grids, add the caption as described in Table with a Title. For fieldsets in a qp-template, use the qp-caption control.

For fieldsets in a qp-template, use the `qp-caption` control.

Use the multiline Description field because the width of a single slot on the data entry form may not fit the field properly. For details, see Form Layout: Configuring a Multiline Text Box.

Show full-width grids without a gray background.