Grids
App tables · Grids
Display, select, and act on many records from a single App control.
Grids use the full Table tab. They can display table fields, pass values from a selected row to variables, switch views, and expose actions in a column.
Select a tableDirect link to Select a table
- In the Designer, select the grid.
- Open Table.
- Select a source from Table name.
- Review its fields in Table columns.
Configure columnsDirect link to Configure columns
Use Columns → All for common settings. The View navigation, Actions, and Advanced menus contain grid-specific behavior.
| Setting | Use it for |
|---|---|
| Show, Width, Display name | Control whether a field appears, its size, and its header. |
| Variables | Send a selected row value to a named App variable. |
| Number format, Date-time format, Alignment | Format the displayed value. |
| Category | Associate a field with a report-table numeric category operation. |
Each variable name must be unique within an App. Use clear prefixes such as selected_, current_, new_, or updated_ to describe its state.
Add views and navigationDirect link to Add views and navigation
Use View navigation to pivot the grid to a different data set after a user selects a configured column.
- Select Columns → View navigation and choose the selection column.
- Select Manage views, then select + Add.
- Choose the new view from Active view and configure its table, columns, and parameters.
Other form controls remain in place when the grid changes view. Account for that when validation or button availability depends on a grid selection.
Add an in-grid action buttonDirect link to Add an in-grid action button
An in-grid action button lets a user run an action for a specific row.
- Open Columns → Actions, select Add, choose JavaScript, and provide a descriptive column name.
- Select the action column's edit icon.
- Return a
buttonconfiguration with text, styling, and an optional icon. - Assign the App action that should run for the selected row.
Make the label describe the outcome and verify that the action receives values from the selected row.
Add a bar visualizationDirect link to Add a bar visualization
Choose Bar under Columns → Actions to display a value between configured minimum and maximum values. The value and limits can use variables, which is useful for comparisons such as consumed licenses against purchased licenses.
Advanced settingsDirect link to Advanced settings
The Advanced menu is available only when Data-Heavy Theme is disabled. Use No Resize to remove column resize controls and Empty Header to remove header sorting.