The editable grid control allows the user to edit the data within a grid.

It is best used for tables with a small number of fields, since tables with a large number of fields will not fit given the limited width of the grid.

NOTE: Currently, there are two ways to configure the grid. In this document, we will cover Grid Builder V2. For information on the older Grid Builder, see the article "Editable Grids V1".

Overview of Editable Grids

In the below example, the data in the second row is being edited:

Filter views: Click the dropdown to filter the grid with set views.
Search the grid: Search the visible fields in the grids. Any hidden columns will not be included in the search.
Grid Chips: Clicking will open up an area above the grid where you can add 'chips' to filter the list. These chips represent different criteria the visible records need to adhere to.
Sort: Clicking this icon will allow you to sort the grid by the column of your choice.
Other options: Clicking this will show a menu allowing you to:
- Refresh: This will reset any changes done in the grid.
- Export: Export data in the grid as a CSV.
Delete: Mark the row for deletion.
Add Lines: Insert rows to potentially add data to the grid.
Total Records: Clicking many will show the total number of records in the grid.
Show: Change number of rows shown in a grid.

Customizing the Editable Grid

To use the Editable Grid control in your own customizations, you will configure it with the Grid Builder V2, which is available from the contextual menu of the Editable Grid control, or in the right properties panel when the control is selected.

NOTE: Currently, there are two ways to configure the grid. In this document, we will cover Grid Builder V2. For information on the older Grid Builder, see the article "Editable Grids V1".

This will bring up the grid builder, with a real-time, dynamic view of the grid on the left and the properties panel on the right.

In the properties panel, you can set:

Grid type: The grid can be either
- Read only: Data in the grid can only be viewed and not edited.
- Editable: Data in the grid can be edited.
Table: Set which table to view. Changing the table after any configuration will remove any configuration.

Below that, there are four expandable sections you can further configure:

Columns: Set up the fields used as columns in the table and how to format it for viewing.
Views: Set the views the editable grid will have, including visibility, sorting, and filtering.
Display: Set the load state and how many records are shown in the grid.
Interactions: Toggle further options available in the grid.
Grid Events: Set what actions occur when a user clicks a row on the grid.

These options will be discussed in the following sections.

For example purposes, the grid is labeled EditableGrid and will be using the Contacts table as its base table.

Grid: Columns

The Columns section allows you to add, duplicate, and remove columns from the grid.

Adding a Column

Clicking the beside the Columns header, will bring up a dropdown allowing you to add a:

Button column: A column that has a button. See below for more information.
Card column: Allows you to display multiple fields in the same column. For more information, see below.
Formula column: Create a formula to customize what values are shown in a column.
Field column: A list of fields from the base table will be displayed which you can select. The search bar also allows you to search for a particular field.

By selecting a column in this section (or in the dynamic grid view on the left), you can further configure each individual column.

Button Column

Adding a button to a column allows the user to execute actions based on the data in the specific row the button is in.

Each button column will have the below options to configure.

Load state: Default state of the button when grid is first loaded. Choose between Redgular and Disabled.
Button type: Show a Link (clickable text), or a Button.
Button style: Show just text, or an icon, or both.
Caption: Text shown inside of a button and hopefully named something far more descriptive than Button.
Width : Set the width of the button automatically or set it with a fixed pixel size.
Background: Background color of the button.
Font Color: Color of text font inside of button.
Delete: Note in the upper right corner is the trash icon to delete this column.

Button Column event

By adding a Click Event, you can add actions that will occur when the button is clicked.

When customizing actions, you will be able to reference data of the row the button is in.

In the below example, a button column has been added, and the button pressed is on the third row with David Henderson as a contact.

When clicked, an Assign Value to Action Result is being run. The value assigned will be taken from the Name column as an action result, but only from the record of the row the button is clicked.

So EditableGrid - Name will contain the value David Henderson, since that's the row the button was clicked on.

Card Column

A Card column allows you to group up to six fields (including an image) in the same column.

Each card column will have the below options to configure.

Header title: the text shown in the header row of the grid.
- Show title: Toggle the visibility of the title in the header.
Width : Set the width automatically or set it with a fixed pixel size.
Fields: Selecting a field allows you to configure it to map to a specific field in the table.
Delete: Note in the upper right corner is the trash icon to delete this column.

Formula Column

The Formula column allows you to write an expression (formula) to evaluate a value.

Furthermore, with the AI Beta feature, you can get Method to create the expression for you.

Each formula column will have the below options to configure.

Header title: the text shown in the header row of the grid.
- Show title: Toggle the visibility of the title in the header.
Width : Set the width automatically or set it with a fixed pixel size.
Alignment: How the value is aligned within the cell of the grid.
Delete: Note in the upper right corner is the trash icon to delete this column.

For information on expressions, see the bottom of this article.

Field Columns

A Field column allows you to show the data from a particular field.

Name in database: The field name in the table.
Column type: You can set the column to Read only if you don't want users to edit this column. Linked fields will automatically be set to Read only.
Header title: the text shown in the header row of the grid.
- Show title: Toggle the visibility of the title in the header.
Width : Set the width automatically or set it with a fixed pixel size. You can further customize the width to be Small, Medium, or Large, relative to other columns in the grid.
Alignment: How the value is aligned within the cell of the grid.
Validation rules: Specify validation for the field column. For more information, see the article "Field Validation".
Column events: Add actions to the Change event for the field column. A change event occurs when the user makes any change to the data in the grid.
Delete: Note in the upper right corner is the trash icon to delete this column.

NOTE: There will be different options depending on the type of field for the column. For example, numeric fields will have an option to show a column total, date fields will show formatting for the date, and dropdown fields will show different options relating to their linked fields, among other things.

Grid: Views

The Views section allows you to set up filter views for the editable grid. In the below example, two filter views were created: All and Employees.

Add a view
Order: Click and drag to change the order of the filter views.
Default view: The default filter view for the grid.
View visibility: Whether or not the filter view is visible in the dropdown.
Show view selector: Whether or not the dropdown to choose a filter view is available. This will be default to hidden if there is only one filter to choose from.

Selecting a view in this section allows you to configure it.

Filter title: Set the title of the view in the Filter View dropdown.
Field order and visibility: You can set the order of the fields as well as visiblity for this filter view.
Filter: Set the selection criteria for what data can be shown in the grid. For more information on how a selection criteria works, please see our article on The Criteria Builder. Although the article deals with other controls, the concept is the same.
Sorting: How the data is to be sorted within the grid.
Delete: Note in the upper right corner is the trash icon to delete this view.

Grid: Display

Load state: The initial state when the screen loads.
Records per page: Select how many rows are shown in the Grid..
Show go to page: Show input field to allow users to type which page of the grid to navigate to if the grid has multiple pages.

Grid: Interactions

Search & filtering: Toggle search bar and filtering grid chips. ( & )
Sorting: Toggle sorting icon. ( )
Show / Hide columns: Toggle columns icon. ()
Export to CSV: Toggle the Export to CSV option in Other options menu.
Export to Mailchimp: Toggle the Export to Mailchimp option in Other options menu.
Refresh: Toggle Refresh grid option in Other options menu.
Select records: Toggle the checkbox column on the left of the grid to allow the user to select multiple records.
Reorder columns (Beta): Toggle ability to allow the user to hover over a column header (showing anicon) allowing them to temporarily reposition the columns in the grid.
Add lines: Toggle ability for user to add empty lines to add to the grid.
- Add button text: Configure the text on the button which will add more rows to insert data.
- Rows on add: How many new rows are added.
Delete records: Toggle the trashcan icon column () that allows the user to select a row for deletion. (This will not immediately delete the record).
- Delete confirmation dialog: When the grid is being saved, this will show a confirmation for deletion of selected records.

Grid: Grid events

Selecting Add row click allows you to set up a set of actions that occur when a user clicks a row.

NOTE: The Row Click event is only triggered when clicking on a card column, or when the grid is in read only mode.

Saving Data in the Editable Grid

Note, data is not automatically saved when a user adds or modifies data within the Editable Grid.

If a user navigates away from the screen and then comes back, the data will be lost.

In order to save the data on the Editable Grid, the action Save All must be executed.

Expression Reference

Here’s a list of all the supported expressions with examples on how to use them:

General Rules

All field references must be prefixed with @
(e.g., @fieldName).
String literals must be wrapped in ""
(e.g., "Hello").

Basic Math Operators

Operator	Description	Example	Result
`+`	Addition	`@Price + 5`	Adds 5 to the value in `@Price`
`-`	Subtraction	`@Total - @Discount`	Subtracts `@Discount` from `@Total`
`/`	Division	`@Amount / 2`	Divides `@Amount` by 2
`*`	Multiplication	`@Quantity * @UnitPrice`	Multiplies `@Quantity` and `@UnitPrice`
`%`	Modulo	`@Number % 3`	Returns remainder when `@Number` is divided by 3

Logical Operators

Operator	Description	Example	Result
`&&`	Logical AND	`@IsActive && @IsVerified`	Returns `true` if both are true
`\|\|`	Logical OR	`@IsActive \|\| @IsVerified`	Returns `true` if either are true

Math Functions

Function	Description	Example	Result
`Count(value1, value2, …)`	Counts the number of provided values	`Count(@Item1, @Item2, @Item3)`	Returns count of non-null values
`Sum(value1, value2, …)`	Adds all values together	`Sum(@Price1, @Price2, @Price3)`	Returns total sum
`Max(value1, value2, …)`	Returns the highest value	`Max(@Score1, @Score2, @Score3)`	Returns highest score
`Min(value1, value2, …)`	Returns the lowest value	`Min(@Score1, @Score2, @Score3)`	Returns lowest score
`Average(value1, value2, …)`	Returns the average	`Average(@Score1, @Score2, @Score3)`	Returns mean score
`Abs(value)`	Absolute value	`Abs(-5)`	Returns `5`
`Tan(value)`	Tangent of angle	`Tan(45)`	Returns `1`
`Sin(value)`	Sine of angle	`Sin(90)`	Returns `1`
`Cos(value)`	Cosine of angle	`Cos(0)`	Returns `1`
`Floor(value)`	Rounds down	`Floor(4.9)`	Returns `4`
`Ceiling(value)`	Rounds up	`Ceiling(4.1)`	Returns `5`
`Pow(value, exponent)`	Power of a number	`Pow(2, 3)`	Returns `8` (2³)
`Round(value, decimal places)`	Rounds to decimal places	`Round(5.678, 2)`	Returns `5.68`

Text Functions

Function	Description	Example	Result
`IsEmpty(text)`	Checks if text is empty	`IsEmpty(@Description)`	Returns `true` if `@Description` is empty
`IsNotEmpty(text)`	Checks if text is not empty	`IsNotEmpty(@Name)`	Returns `true` if `@Name` has content
`Length(text)`	Returns text length	`Length("Hello")`	Returns `5`
`Replace(text, replace, with)`	Replaces part of text	`Replace("apple", "p", "b")`	Returns `"abble"`
`Substring(text, start index)`	Gets substring from start index	`Substring("MethodCRM", 6)`	Returns `"CRM"`
`Substring(text, start index, length)`	Gets substring of length	`Substring("HelloWorld", 0, 5)`	Returns `"Hello"`
`Join(join value, value1, value2, …)`	Joins non-empty values	`Join("-", "A", "", "B")`	Returns `"A-B"`

Date Functions

Function	Description	Example	Result
`Date()`	Returns current date	`Date()`	Returns today's date
`Date(date)`	Converts string to date	`Date("2025-02-26")`	Returns date object
`Date(year, month, day)`	Constructs date	`Date(2025, 2, 26)`	Returns `2025-02-26`
`Day(date)`	Gets day of date	`Day("2025-02-26")`	Returns `26`
`Month(date)`	Gets month of date	`Month("2025-02-26")`	Returns `2`
`Year(date)`	Gets year of date	`Year("2025-02-26")`	Returns `2025`
`DayOfWeek(date)`	Gets day of week	`DayOfWeek("2025-02-26")`	Returns `Wednesday`
`DayOfYear(date)`	Gets day of year	`DayOfYear("2025-02-26")`	Returns `57`
`TotalDaysBetween(date1, date2)`	Days between two dates	`TotalDaysBetween("2025-02-26", "2025-01-01")`	Returns `56`
`TotalHoursBetween(date1, date2)`	Hours between two dates	`TotalHoursBetween("2025-02-26 12:00", "2025-02-25 12:00")`	Returns `24`
`AddDays(date, delta)`	Adds days to date	`AddDays("2025-02-26", 5)`	Returns `2025-03-02`
`AddMonths(date, delta)`	Adds months to date	`AddMonths("2025-02-26", 1)`	Returns `2025-03-26`
`AddYears(date, delta)`	Adds years to date	`AddYears("2025-02-26", 2)`	Returns `2027-02-26`

Conditional Functions

Function	Description	Example	Result
`If(condition, TrueExpression, FalseExpression)`	Returns value based on condition	`If(@Age > 18, "Adult", "Minor")`	Returns `"Adult"` if `@Age` is greater than 18

Formatting Functions

Function	Description	Example	Result
`Format(value, formatting)`	Formats number	`Format(12345.678, "#,###.00")`	Returns `"12,345.68"`
`Format(value, formatting, CultureCode)`	Formats as currency	`Format(100, "C", "en-US")`	Returns `"$100.00"`