cybozu developer network

カテゴリー内の他の記事

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

(著者:kintone エバンジェリスト 村濱 一樹

Index

はじめに

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

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

GitHub mura-/kintone_handsontable.js

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

※viewIdはカスタマイズビュー設定時のviewIdを入力してください。

デモ環境

こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/39/

デモ環境の利用は、事前に cybozu developer network のメンバー登録が必要です。画面右上の「サインイン」ボタンよりご登録ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。

サンプルアプリの設定

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

前回記事の「kintone カスタマイズでの導入方法 - サンプルアプリの準備」の項目を参考にしてください。

カスタマイズで利用している Handsontable は、v7.0.0 以降 MIT ライセンスではなくなりました。
このカスタマイズでは、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 で確認したものになります。

記事に関するフィードバック

記事のコメント欄は記事に対するフィードバックをする場となっております。
右の記事フィードバックのためのガイドを参照してコメントしてください。
記事のリンク切れなど、気になる点がある場合も、こちらのフォームからフィードバックいただけますと幸いです。

Avatar
oota

サンプルソースをもとにExcelシートを作成すると、kintoneの標準のフィルターが機能しなくなります。 サンプルコード(https://gist.github.com/mura-/b06966117dd25aaedd64 参考)の207行目~210行目を コメントアウトし、131行目の「data」に通常通りrecordsを設定するとフィルター機能が正常に動作するようになりました。 参考までに

ootaにより編集されました
Avatar
cybozu development team

ootaさん
cybozu.com developer network事務局です。

コメントありがとうございます!
是非ご活用ください!

Avatar
John Gilmore

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?

 

Avatar
cybozu Development team

John Gilmore 様

お世話になっております。cybozu developer network 事務局です。

参考情報として、
レコード追加画面が表示されたときのイベントで返却されるイベントオブジェクトに
レコードが再利用であるかどうかを判断するための reuse プロパティがあります。
この reuse プロパティを使用して、条件分岐をすれば実現できる可能性があります。

また、こちらは記事へのフィードバックのためのコメント欄となっています。
John 様が行いたいことは、記事から発展した内容であるため、cybozu developer コミュニティ のご利用をお願いいたします。

サインインしてコメントを残してください。