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

Posted at 2024 年 04 月 14 日

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

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

Kintoneとは?

業務データのバラバラを解決するkintoneとは?

Handsontableとは?

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

KintoneでHandsontableを使う

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

種類

フィールド名

フィールドコード

文字列(1行)

商品コード

product_code

文字列(1行)

商品名

product_name

数値

在庫

stock

文字列(1行)

受注ナンバー

order_number

日付

出荷日

shipping_dat

コード

/*
 * 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)を設定します。

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

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

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