kintoneでExcelライクな画面を実現するHandsontableを使ってみた

kintoneの公式サイトにExcelのような表形式でkintoneのアプリを扱える方法が公開されていたので試してみます。

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

Kintoneとは？

Kintoneとは、Cybozuが提供する業務アプリケーションを作成・運用できるクラウドサービスです。Kintoneを使うことで、コードをほとんど書かずに様々な業務アプリケーションを構築し、業務プロセスを効率化することができます。
また、JavaScriptを使ってカスタマイズすることで、より高度な機能を実装することも可能です。

KintoneのJavaScript開発

KintoneのJavaScript開発では、Kintoneのカスタマイズ機能を利用して、フォームやレコードの表示・動作を制御したり、外部のシステムと連携させたりすることができます。
アプリの設定画面からJavaScriptファイルをアップロードすることでアプリ上で利用可能になります。

Handsontableとは？

Handsontableは、ウェブページにExcel風のスプレッドシートを簡単に組み込むことができるJavaScriptライブラリです。
このライブラリを利用すると、データグリッド機能をウェブアプリケーションに追加することができます。
今回は無料ライセンスを利用しますが、商用には有料のライセンスを購入する必要があります。

KintoneでHandsontableを使う

まず最初に利用するアプリを設計します。
在庫管理を想定した、次のようなアプリを作りました。

コード

/*
 * show kintone record like Excel by handsontable sample program
 * Copyright (c) 2022 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
(() => {
    'use strict';
    kintone.events.on(['app.record.index.show'], (event) => {
      // ビューIDを指定する（指定したビューID以外は処理しない）
      if (event.viewId !== 5520152) return;
      const records = event.records;
      // カスタマイズビュー設定時に登録したHTMLの要素を指定します。
      const container = document.getElementById('sheet');
      container.innerHTML = ''; // ページ送りするとき重複してHandsontableが表示されないように初期化
      // Handsontableをインスタンス化
      new Handsontable(container, {
        // kintoneのレコードデータを指定
        data: records,
        minSpareRows: 0,
        // カラムのヘッダーを指定
        colHeaders: ['商品コード', '商品名', '在庫', '受注ナンバー', '出荷日'],
        contextMenu: false,
        // dataオプションのどの列を表示するか指定する。
        columns: [
          {data: 'product_code.value'},
          {data: 'product_name.value'},
          {data: 'stock.value'},
          {data: 'order_number.value'},
          {data: 'shipping_dat.value'},
        ]
      });
    });
  })();

Cubouz CDNの設定と作成したjsファイル(handsontables.js)を設定します。

• JavaScript URL
  https://js.cybozu.com/handsontable/6.2.2/handsontable.full.min.js
• CSS URL
  https://js.cybozu.com/handsontable/6.2.2/handsontable.full.min.css

注意点としてビューIDは自身のkintoneのアプリIDを設定してください。

// ビューIDを指定する（指定したビューID以外は処理しない）
      if (event.viewId !== 5520152) return;

以下のようにカスタムビューのデータが表示されます。