Implement Highly Useful UX Features in an Excel-like Custom View
In the Create an Excel-like Custom View article and the Insert and Delete rows from an Excel-like Custom View article, we introduced how to customize Kintone into an Excel-like custom view using Handsontable. These articles use the Community version of Handsontable (v6.2.2).
This article introduces how to implement the Commercial version of Handsontable (v12.4.0), which includes advanced features such as column filtering and nested rows.
Use Cases of Kintone and the Commercial License of Handsontable
- Create Kintone customizations for internal usage
Since the commercial license only charges the developers, users of apps that are customized with Handsontable do not need to pay for the license. Use Handsontable to customize Kintone for providing intuitive user interfaces for the App users.
- Develop and sell Kintone plug-ins
If the plug-in developer has the commercial license, Handsontable won't charge end-users for using the library within the plug-in.
Using the latest Commercial license Handsontable to customize Kintone enables the following:
- Features for placing buttons to download data as CSV
- Features to create parent-child rows
- Features to add filters in columns
This section goes through the steps of building a Kintone App and the required settings before implementing the Handsontable customization.
Set up the Field Settings
First, create a new App.
Set the fields in the sample App as follows.
|Field Type||Field Name||Field Code||Notes|
|Record number||Record Number||record_number|
|Text||Person in Charge||person_in_charge|
|Radio button||Success Rate||success_rate||Specify any options, for example, "A", "B", and "C"|
|Drop-down||Product Name||product_name||Specify any product name, for example, "Kintone"|
|Table||Table||table||Insert the fields "Day of Visit" and "Visit Details"|
|Datetime||Day of Visit||day_visit||Set inside "Table"|
|Text||Visit Details||visit_details||Set inside "Table"|
Set up a Custom View
Navigate to the App settings, and click on the View tab.
On the HTML Code option, enter the following HTML and click Save.
Click on Update App to apply the changes.
Refer to the following article for more details on custom views:
Navigate to the Download ZIP tab and download the ZIP file
Extract the ZIP file.
Click the Add File button to add the following files from the extracted Zip file, and click Save:
Click on Update App to apply the changes.
Manually enter a few records of sample data. The customization in this article will convert the data into a spreadsheet-like interface with Handsontable's advanced features.
Implement the Handsontable Customization
For View ID, enter the View ID noted from the Set up a Custom View section.
In this sample, the record is displayed by retrieving
event.records from the record list page's event object.
An array of objects are created with
event.records.map and sent to the data object in Handsontable (line 15). Note that the names must match the headers specified in
colHeaders (line 35).
To attach child rows, an array of fields in the table are passed to
__children (line 25). Additionally,
nestedRows is set to
true (line 37).
Since this is for evaluation purposes,
licenseKey is specified as
non-commercial-and-evaluation (line 40).
The result of this sample is as shown below.
About the Commercial Version of Handsontable
The Commercial license allows users to use the latest Handsontable features. End-users using the developed product will not need to pay for the license. The Commercial license also comes with premium support.
For details on the plan, see the Handsontable pricing page .
Here are some features that differ from the Community version.
Enables a configurable drop-down menu for the table's column headers.
Enables multiple levels of nested column headers to group columns.
Enables filtering of data by values or by a set of conditions. Filters can be customized to allow more complex filtering.
Allows more control over sorting. The following example shows that the sort feature is turned off for the "Brand" column.
The feature introduced in this article that enables nested rows. Reflecting the parent-child relationship of the data in the table makes the table easier to read.
Enables exporting of data to CSV format.