1

<div id="sheet"></div>

1
2
3
4
5
6
7
8

const container = document.getElementById('sheet');
new Handsontable(container, {
  data: data, // 配列やオブジェクトのデータを指定
  minSpareRows: 1, // 下部の余白行の指定
  rowHeaders: true, // 列ヘッダを表示
  colHeaders: true, // 行ヘッダを表示
  contextMenu: true // 右クリックメニューを表示
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

/*
 * 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 !== 7199) 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: 'レコード番号.value'},
        {data: '会社名.value'},
        {data: '先方担当者名.value'},
        {data: '見込み時期.value'},
        {data: '確度.value'},
        {data: '製品名.value'},
        {data: '単価.value'},
        {data: 'ユーザー数.value'},
        {data: '小計.value'}
      ]
    });
  });
})();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

/*
 * update kintone record like Excel by handsontable sample program
 * Copyright (c) 2022 Cybozu
 *
 * Licensed under the MIT License
 * https://opensource.org/license/mit/
*/
(() => {
  // レコードを保存するためのメソッド
  'use strict';
  const saveRecords = (records, callback, errorCallback) => {
    kintone.api(kintone.api.url('/k/v1/records', true), 'PUT', {app: kintone.app.getId(), records: records},
      (resp) => {
        callback(resp);

      },
      (resp) => {
        errorCallback(resp);
      });
  };
  // kintoneのレコード更新時は、レコード番号などアップデートできないフィールドがあるので、除外するためのメソッド
  const setParams = (record) => {
    const result = {};
    for (const prop in record) {
      if (['レコード番号', '作成日時', '更新日時', '作成者', '更新者'].indexOf(prop) === -1) {
        result[prop] = record[prop];
      }
    }
    return result;
  };
    // 一覧ビュー表示用のイベントハンドラ
  kintone.events.on(['app.record.index.show'], (event) => {
    // ビューIDを指定する（指定したビューID以外は処理しない）
    if (event.viewId !== 7199) return;
    const records = event.records;
    const container = document.getElementById('sheet');
    container.innerHTML = ''; // ページ送りするとき重複してHandsontableが表示されないように初期化

    new Handsontable(container, {
      data: records,
      minSpareRows: 0,
      colHeaders: ['レコード番号', '会社名', '先方担当者名', '見込み時期', '確度', '製品名', '単価', 'ユーザー数', '小計'],
      contextMenu: false,
      // 必要に応じてreadOnlyの指定ができます。
      columns: [
        {data: 'レコード番号.value', readOnly: true},
        {data: '会社名.value'},
        {data: '先方担当者名.value'},
        {data: '見込み時期.value'},
        {data: '確度.value'},
        {data: '製品名.value'},
        {data: '単価.value'},
        {data: 'ユーザー数.value'},
        {data: '小計.value', readOnly: true}
      ],
      // スプレッドシートのセルが更新されると、下記メソッドが呼び出されます。
      // 呼び出されるaftarChangeメソッドは、引数changeに変更されたセルの詳細がわかり、引数sourceは何によって変更されたかがわかります。
      afterChange: (change, source) => {
        if (source === 'loadData') {
          return;
        }
        let i;
        const targets = [];
        // 引数changeのデータを読み取り、kintoneへ更新APIを発行します。
        for (i = 0; i < change.length; i++) {
          targets.push({
            id: records[change[i][0]]['レコード番号'].value,
            record: setParams(records[change[i][0]])
          });
        }
        saveRecords(targets, (resp) => {
          console.dir(resp);
        }, (resp) => {
          console.dir(resp);
        });
      }
    });
  });
})();

1
2
3
4
5
6
7
8
9

// 10行目、先方担当者名が編集された場合の例
[
  [
    9, // 変更があったセルの行数
    '先方担当者名.value', // 変更があったセルの列名
    'テスト太郎', // 変更される前のデータ
    'テスト次郎' // 変更された後のデータ
  ]
];