Articles in this section

How to Add Inline Editing to a Table

Avatar
Odalis
Updated
Follow

Scenario

Inline editing allows users to edit fields directly from a table, without using a form. So instead of jumping between edit forms to update different records, all changes can be made from the same page.

For example, admins of this business directory app can quickly make updates to businesses by clicking on any field on the table they want to edit:

2017-05-25_09-56-26.png

You’ll see that fields that are editable with inline editing will be highlighted. When clicked, a small pop-up window will show up so an update can be made.

Note: Changes made through inline editing won’t trigger record rules or emails. Those are only triggered by updates submitted through a form.

Requirements

If this your first time creating an app, you'll need to know some basics about adding objects, fields, pages, and views. You can start by watching our "Introducing Knack" video tour and then working through the articles in our Builder Basics section. Other good resources can be found in our designing the database and building pages sections of the knowledge base. 

Steps

Select the Page with the Table

In the Pages section of the builder, select the page that holds the table you want to add inline editing to.

Open the Table Editor

Click on the table on that page to open the editor.

Go to Options Section to Enable Inline Editing

Go to the Options section and check the box next to “Inline Editing”:

2017-05-24_16-57-19.png

Disable Inline Editing for Certain Fields

When inline editing is enabled, it will affect any editable fields. However, if there are fields where you don’t want to allow inline editing, you can specify that.

For example, in the table below, all fields have inline editing enabled. But we don’t want the Business ID field to have inline editing enabled.

2017-05-25_09-52-29.png

To remove inline editing from that field, go to the Columns section of the editor. Hover over the Business ID column and click the edit “pencil” icon:

2017-05-25_09-48-57.png

Then set the “Allow Inline Editing” property to No:

2018-02-18_11-58-03.png

That process can be repeated for any fields that shouldn’t have inline editing enabled.

Notes & Troubleshooting

Non-Editable Fields

When inline editing is enabled, it makes any editable field available for inline editing. Non-editable fields are those whose values are generated by your app.

For example, auto increment fields are automatically populated by your app with a unique value. Non-editable fields include:

Related articles