Handsontableを使ってkintoneをExcelライクに入力しよう その2

（著者：kintone エバンジェリスト 村濱 一樹）

はじめに

前回、HandsontableをつかってExcelのように入力ができるようなTipsを公開しましたが、今回は前回の閲覧・編集に加えて、レコードの追加・削除にも対応したいと思います。

前回記事のコードをベースに修正していきますので前回記事も参照ください。
コードはこちらに公開しています。

GitHub mura-/kintone_handsontable.js

基本的に上記をコピーして必要な部分を書き換えれば動くとは思いますが、必要に応じてコードを参照しながら下記をお読みください。

サンプルアプリ、JavaScript、CSSの設定

前回と同様のアプリ設定を用います。

前回記事の「サンプルアプリの準備」の項目を参考にしてください。

コードの改修の解説

レコードの追加に対応する

前回のsaveRecordsメソッドを拡張し、追加・更新両方に対応するようにします。

今回は、追加・更新のためにbulkRequestを利用しました。

bulkRequestは本来複数アプリへのレコード一括処理をするためにありますが、もちろん同じアプリにも使えます。これを使うことで１回のAPIの呼び出しだけでkintoneのレコード更新が済みますし、なにより追加・更新処理どちらかでエラーが有った場合はロールバックされるので安全です。

引数には、kintoneのレコードデータ(records)と、Handsontable上でセルが編集された際に取得できる配列（changeDatas）を指定することとします。

レコードの削除に対応する handsontableの設定 削除は、コンテキストメニュー（右クリックメニュー）から実行できるようにしたいと思います。 まず、handsontableのコンテキストメニューオプションを設定します。デフォルトで機能はたくさんあるのですが、今回は行削除(remove_row)だけに対応します。

削除メソッドの作成 次に、削除用メソッド(deleteRecords)を作成します。 引数には、kintoneのレコードデータ(records)と、削除する行(index)・削除できる行数(amount)を指定できるようにします。 削除するべきレコード番号を抽出して、削除APIを呼び出します。

データを同期する

データの乖離が起きないよう、追加・更新・削除のタイミングでデータを再同期します。

• データ取得メソッドの作成 今回は特に検索条件を指定しませんが、下記のように並び替えだけはレコード番号昇順にしてください。降順だとレコードを追加した行が一番先頭に表示されてしまいます。 また、limitも500と指定することで500件まで表示することができます。

• 追加・更新・削除時に同期する 下記のように、追加・更新・削除時のcallbackメソッドに同期するメソッドを指定します。 handsontableはloadDataメソッドがあり、引数に取得したkintoneレコードデータを指定することで再同期することができます。 また、同期することにより、フォーム設定画面で指定したデフォルト値が表示されたり、計算フィールドのレコードが計算されて表示されるなどのメリットもあります。

データを定期的に同期する

追加・更新・削除時でなくとも、長く画面を開いていればデータが乖離する場合があります。
今回はデータを定期的に同期する処理もいれてみました。

注意点

• 今回のコードは表示できるデータ件数は500件まで、更新は100件までとなっています。コードをカスタマイズすることで、絞り込みやデータの条件を増やすことができます。
• APIの呼び出し回数は１アプリ１日あたり上限10,000回です。今回は同期処理をいれていますが、必要に応じて同期間隔を遅くしてください。開きっぱなしに注意してください。

最後に

これでExcelライクな操作方法で一通りのことができるようになりました。一括でデータを追加、更新したい場合や、削除したい場合に便利ですね。もっと便利に使えるように、近いうちにプラグインを開発して公開します。
当記事について何か不明な点があればお気軽にコメントをください。

<<Handsontableを使ってkintoneをExcelライクに入力しよう その1

デモ環境

https://dev-demo.cybozu.com/k/39/

※デモ環境についての説明はこちら