Grid Page

Last updated 27/01/2026

Definition

The Grid page is a high-performance, spreadsheet-style data entry experience designed to support fast, efficient row-based input. The grid control is specifically optimized for workflows where users need to view, create, and update multiple records in one place without slowing down.

Instead of opening a separate form for every record, users can add new rows directly inside the grid and edit values inline, allowing them to stay in context and maintain momentum while entering data. This reduces extra clicks, eliminates repetitive page navigation, and makes bulk updates significantly quicker, especially in high-volume data entry scenarios.

Overall, the Grid page improves productivity by combining rapid data entry, inline editing, and efficient navigation into a single streamlined interface, making it ideal for users who need to manage large amounts of information quickly and consistently.

Key Features

• Inline Row Editing - Users can add, modify, and delete rows directly within the grid without opening separate forms, reducing navigation overhead and accelerated data entry.
• Keyboard Navigation - Full keyboard support allows seamless movement between cells, rows, and columns, supporting power-user workflows and minimizing mouse usage.
• Bulk Data Handling - Optimized rendering and data management allow smooth operation even with large numbers of rows, ensuring consistent performance.
• Contextual Efficiency - Inline editing and immediate feedback reduce the need for context switching, enabling users to maintain focus while processing multiple records.

Usage scenarios

The Grid page is ideal for:

• High-volume data entry tasks where multiple records must be processed quickly
• Bulk updates across multiple records without opening individual forms
• Workflows that benefit from keyboard-centric navigation amd rapid inline editing

Referencing a Form

Even though the grid is self-contained, it still references a form definition behind the scenes, hence, you must reference a form when creating a grid page. Each row in the grid represents a single record, and the columns correspond to fields on the form. Users interact directly in the grid instead of opening a separate form. Effectively, the grid is a form displayed in a tabular layout.

How to Add a Grid Page

Use Case Example

For this demonstration, the Products page will be added to the Suppliers form as a Grid page, hence, the products will belong to a supplier. The Products and Suppliers forms have both been added into Five via Five's Form Wizard.

The image below shows the configuration for the General page on the Suppliers form, which is the first page on the form.

Figure 1 - General page on the Suppliers form

The image below shows the configuration for the General page on the Products form, which is the first page on the form.

Figure 2 - General page on the Products form

The image below shows the form fields on the Products form.

Figure 3 - Products form fields

Add a Grid Page

1. Select your form record in the list (Suppliers).

2. Click the Pages tab.

Figure 4 - Pages tab

3. Click the Add Pages button.

Figure 5 - Add Pages button

4. Give your page a caption in the Caption field (Products).

5. Select Grid in the Page Type field.

6. Select Products (Form) in the Action field.

Figure 6 - Add Products page

7. Click the Save button in the form app bar.

Figure 7 - Save button

8. Click the Save button in the form app bar above the list.

Figure 8 - Save button

In Application

The Grid page can be reached by selecting a record in the list and clicking the tab that holds your Grid page. All the fields that are in the referenced form are the columns for your grid. Any required fields will be marked with an asterisk next to the column header.

Adding New Records

1. Open the grid page and click the Add Rows button.

Figure 9 - Add Rows button

2. Enter values across the row.

Figure 10 - Add row data

3. Move out of the row (tab) to get a new row, or press Enter/Return to commit the record to the grid.

tip

The Add Rows button can be clicked to also get a new row!

Figure 11 - New row

4. Once you have finished adding your rows, click the Save button in the form app bar.

Figure 12 - Save button

Adding records after the initial record:

1. Click tab on your keyboard after the final field value has been entered, or click the Add Rows button.

info

The Save Row button can be clicked at the end of each row and this will save the record and display it in an edit state. To fully save all records, the Save button in the form app bar must be clicked.

Figure 13 - Save Row buttons

Figure 14 - Save button

Navigating with the Keyboard

One of the biggest benefits of the Grid page is speed through the keyboard navigation.

Keyboard shortcuts:

• Use tab to move to the next cell
• In the last field, use tab to move to a new row
• Use shift + tab to move back
• Use enter to save a row
• For saved records, use arrow keys to move between cells

Editing Data Inline

The Grid page allows records to be edited directly within the grid, eliminating the need to open individual form records.

1. Open the grid page and click the Edit Row button at the end of the required row.

Figure 15 - Edit Row button

2. Perform your changes and click the Save Row button.

Figure 16 - Save Row button

3. Click the Save button in the form app bar.

Figure 17 - Save button

Delete Records

Records can be deleted directly from the Grid page without opening an individual form record.

1. Open the grid page and click the Delete Row button at the end of the required field.

Figure 18 - Delete Row button

info

The row ready for deletion will be displayed in yellow signaling this field is ready to be deleted. You have the opportunity here to restore the field.

2. Click the Save button in the form app bar.

Figure 19 - Save button

Restore Records

Records can be restored directly in the Grid page before the changes are saved.

1. Identify the deleted row and click the Restore Row button at the end of the required field.

Figure 20 - Restore Row button

2. Click the Save button in the form app bar.

Figure 21 - Save button

Viewing and Restoring Deleted Records

The Show Deleted button allows users to view all deleted records within the Grid page.

Behavior

• Clicking the Show Deleted button displays all rows that have been deleted
• Deleted rows are visually distinguished (for example, highlighted in yellow)
• These rows are now part of the current edit session and can be restored

Restoring Deleted Records

1. Open the grid page and click the Show Deleted button.

Figure 22 - Show Deleted button

2. Click the Restore button for the row/s you want to restore.

Figure 23 - Restore Row button

3. Click the Save button in the form app bar.

Figure 24 - Save button