Insert and Delete Rows from an Excel-like Custom View
This article introduces how to insert and delete rows from an Excel-like custom view using Handsontable.
The code used in this article is based on the Create an Excel-like Custom View article. It is recommended to read that article before this current article.
Refer to the Initial Setup section of the Create an Excel-like Custom View article and follow the steps to build the Kintone App.
As of v7.0.0, Handsontable is no longer released under the MIT license. The latest version will not be hosted on the Kintone CDN. If you wish to use versions beyond v7.0.0, please purchase the necessary license from the Handsontable website , and use it under their license terms.
Turn off the pagination
Since this sample does not support Enable pagination , turn the Enable pagination option off.
- Navigate to the App Settings and select the Views tab.
- Select Edit from the custom view made above.
- Uncheck Enable pagination and click Save.
Implement the Handsontable Customization
This section will explain the sample code above.
The Bulk Request API can run multiple API requests sequentially to multiple Apps. Any error will result in a rollback.
The arguments are Kintone's record data (
records) and an array retrieved when a cell is edited (
To delete records, users need to use the context menu (right-click menu) on the Excel-like interface. The context menu needs to be set up in the code. The context menu option is set to
Next, a delete method (
deleteRecords) is created. The arguments are Kintone's record data (
records), the row index (
index) and the number of rows (
amount) that are to be deleted. The record numbers that are to be deleted are retrieved, and the Delete Records API is called.
When deleting a row, the method specified in the
event is called and is used to update the data in Kintone. Inside the event, the
deleteRecords method is called, and the data is deleted.
Data needs to be synchronized to prevent data discrepancy when inserting, updating, or deleting data.
First, the records are retrieved and sorted. As shown in the example below, the records are sorted in ascending order of record numbers, and the limit is specified to 500 to display up to 500 records. Descending order will cause the new row to be displayed at the top.
Next, the data is synchronized using the callback method and Handsontable's loadData method . The retrieved Kintone record is specified as an argument to synchronize. By synchronizing, the default value specified in the form setting screen is displayed, and records in the Calculated field are calculated and displayed.
Synchronize data at regular intervals
Data discrepancy can occur if the screen is open for a long time. The example below shows how to auto-sync data at regular intervals.
- The maximum number of records that can be updated at once is 100.
- This sample can display up to 500 records of data. The code can be further customized to display more data. Refer to the
Code Examples For Bulk Record Retrieval article for more details.
- This sample does not support enable pagination because the number of data that can be displayed is limited.
- Note that Kintone has a maximum number of REST API calls it can call in a day. Since the sample code in this article uses a synchronization process, slow down the synchronization interval if necessary. Leaving the browser open with this page can result in unnecessary API calls.
The contents of this article were checked with the September 2023 version of Kintone.