This article will guide you through the process of implementing inline-editing to your grid views, allowing users to effortlessly make changes to record values directly from the Live App.
This article covers the following topics:
Use Case
Inline editing enables users to conveniently modify fields directly from a grid, eliminating the need for navigating through different edit forms to update various records. With this feature, all changes can effortlessly be made from a single page.
For example, administrators of this business directory application can efficiently update businesses by simply clicking on any desired field within the grid for editing:
/How%20to%20Add%20Inline%20Editing%20to%20a%20Grid/inlineediting1.png)
Users will notice that editable fields are highlighted when using inline editing. By clicking on these fields, a small pop-up window will appear, allowing them to easily make updates.
Requirements
If this your first time creating an app, you'll need to know some basics about adding tables, fields, pages, and views. You can start by working through the articles in our Builder Basics section.
Other good resources can be found in our About Your Database and Working With Pages sections of the knowledge base.
Steps
1. Select the Page with the Grid
In the Pages section of the Builder, select the page that contains the grid you want to add inline editing to.
2. Open the Grid Editor
Select the grid on the page preview in the Builder to open the editor, or select the pen icon.
3. Go to Options Section to Enable Inline Editing
Head over to the Settings section and check the box next to "Inline editing":
/How%20to%20Add%20Inline%20Editing%20to%20a%20Grid/inlineediting2.png)
Disabling Inline Editing for Certain Fields
If you wish to restrict inline editing for specific fields, you have the option to do so. While enabling inline editing affects all editable fields, you can specify which fields should not allow this feature.
As an example, all fields in the grid below have inline editing enabled, but we would like to disable inline editing for the "Name" field:
/How%20to%20Add%20Inline%20Editing%20to%20a%20Grid/inline-editing3.webp)
To disable inline editing for a specific field, simply hover over the field column and click on the edit pen icon. This action will redirect you to the Column Properties section of the editor.
From there, check the box for "No" under "Allow Inline Editing". These steps can be repeated for any other fields that you would like disable inline editing for.
Non-Editable Fields
When inline editing is enabled, all fields on the view's table become editable. However, there are certain fields that cannot be edited as their values are automatically generated by your app or a connected table's field values.
For example, auto increment fields are automatically populated by your app with a unique value and therefore cannot be inline-edited.
Non-editable fields include:
-
Fields with conditional rules