(著者:kintone エバンジェリスト 村濱 一樹)
はじめに
前回、HandsontableをつかってExcelのように入力ができるようなTipsを公開しましたが、今回は前回の閲覧・編集に加えて、レコードの追加・削除にも対応したいと思います。
前回記事のコードをベースに修正していきますので前回記事も参照ください。
コードはこちらに公開しています。
GitHub mura-/kintone_handsontable.js
基本的に上記をコピーして必要な部分を書き換えれば動くとは思いますが、必要に応じてコードを参照しながら下記をお読みください。
※viewIdはカスタマイズビュー設定時のviewIdを入力してください。
デモ環境
こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/39/
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。
サンプルアプリの設定
前回と同様のアプリ設定を用います。
前回記事の「kintone カスタマイズでの導入方法 - サンプルアプリの準備」の項目を参考にしてください。
このカスタマイズでは、MIT ライセンスである v6.2.2 を利用しています(ライセンス表記)。
v7.0.0 以降を利用する際は Handsontable の HP で有償ライセンスを購入し、ライセンス条件に従ってご利用ください。
詳細は、Cybozu CDN ライセンス対応ガイド をご参照ください。
コードの改修の解説
レコードの追加に対応する
前回のsaveRecordsメソッドを拡張し、追加・更新両方に対応するようにします。
今回は、追加・更新のためにbulkRequestを利用しました。
bulkRequestは本来複数アプリへのレコード一括処理をするためにありますが、もちろん同じアプリにも使えます。これを使うことで1回の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の呼び出し回数は1アプリ1日あたり上限10,000回です。今回は同期処理をいれていますが、必要に応じて同期間隔を遅くしてください。開きっぱなしに注意してください。
最後に
これでExcelライクな操作方法で一通りのことができるようになりました。一括でデータを追加、更新したい場合や、削除したい場合に便利ですね。もっと便利に使えるように、Handsontableを利用したkintone スプレッドシートプラグインを開発して公開しています。
<<Handsontableを使ってkintoneをExcelライクに入力しよう その1 - 基本編
このTipsは、2022年7月版 kintone で確認したものになります。
サンプルソースをもとにExcelシートを作成すると、kintoneの標準のフィルターが機能しなくなります。 サンプルコード(https://gist.github.com/mura-/b06966117dd25aaedd64 参考)の207行目~210行目を コメントアウトし、131行目の「data」に通常通りrecordsを設定するとフィルター機能が正常に動作するようになりました。 参考までに
ootaさん
cybozu.com developer network事務局です。
コメントありがとうございます!
是非ご活用ください!
I would like to save a record as a new record, i.e. duplicate the record, while using handsontable. Is it possible to do so?
John Gilmore 様
お世話になっております。cybozu developer network 事務局です。
参考情報として、
レコード追加画面が表示されたときのイベントで返却されるイベントオブジェクトに
レコードが再利用であるかどうかを判断するための reuse プロパティがあります。
この reuse プロパティを使用して、条件分岐をすれば実現できる可能性があります。
また、こちらは記事へのフィードバックのためのコメント欄となっています。
John 様が行いたいことは、記事から発展した内容であるため、cybozu developer コミュニティ のご利用をお願いいたします。