kintone2019年3月13日（更新: 2019/3/13)

kintoneのテーブルに行コピー機能を作る（kintoneカスタマイズ入門）

kintoneのテーブルをもっと使いやすくする
動作サンプル
基本的な考え方とアイデア
▼サンプルアプリ
▼サンプルコード：
ソースコードの概要：
もっと詳しく勉強したい方のために
自社のアプリに展開したい人は

※ 本記事は 2019年3月13日に公開した内容です。kintone の画面や仕様はその後変更されている場合があります。

みなさん、こんにちは。プロジェクト・アスノート代表の松田です。

突然始まった、kintoneカスタマイズのコンテンツです。ちょっと前にリリースした記事「ド素人が始めたkintoneカスタマイズ」（通称、ドシキンカス）で、これからは正しいkintoneカスタマイズに向けた記事も書いていくぞ宣言をしたわけですが、初っ端から実践編で申し訳ありません。

ド素人が始めたkintoneカスタマイズ（ドシキンカス）〜初心者がはじめの一歩を踏み出すための虎の巻〜

kintoneのテーブルをもっと使いやすくする

kintoneのテーブル（サブテーブル）よく使ってますよね。いつもテーブルがあるアプリを使っていて感じていたことがあります。

テーブルの行コピー機能がほしい！

例えば経費精算などのアプリをkintoneで作った場合、行をコピーして、金額や日付だけ変更して入力を簡略化したい、ということです。今回は、そんな場合に使える「行コピー機能」を、なるべくシンプルな形で実現してみたいと思います。

動作サンプル

旅費精算アプリの例です。ホテル名と金額が入力された行をコピーしています。これだけでも操作としてはかなり簡素化されますね！

基本的な考え方とアイデア

チェックボックスを使った行コピースイッチを発明

行をコピーするためのトリガーですが、カッコいいボタンを設置するのがいいのかもしれませんが、私にはできません。なのでもっと簡単に実現できる新しい方法を発明する必要があります。

そこで、次のような方法を考えてみました。まず、テーブルにチェックボックスフィールドを設置します（フィールドコード：行編集）チェックボックスの選択肢は１つだけ。「▼」や「行コピー」等
ポイントとしては、以下の点行をコピーするのはレコードの編集画面なので、チェックボックスフィールドであれば、トリガーとしてフィールド値変更時イベントを使うことができます。
デメリットとしては、テーブル内のフィールド列の非表示は、標準のAPIではできないため、詳細画面でもこの列が見えてしまう（DOM操作を行うカスタマイズを行えば可能ですが、非推奨なのでココではこのままにしておきます）。

▼サンプルアプリ

サンプルとして図のようなアプリを作りました。行コピーボタンとして利用するチェックボックス以外は好みに応じて適当に配置しても大丈夫です。ここでは旅費精算を例にして、テーブルの中に以下のようなフィールドを配置しました。

テーブルに設置したフィールド：
（テーブルのフィールドコード：Table）

フィールド名	フィールドコード	フィールドタイプ	備考
行編集	行編集	チェックボックス	選択肢：▼（１つだけ設定）※必須
日付	日付	日付

種別| 種別| ドロップダウン| 選択肢：交通費、宿泊費等
項目| 項目| 文字列（１行）|

金額| 金額| 数値|

添付ファイル| 添付ファイル| 添付ファイル|

▼サンプルコード：

(function () {
    "use strict";
    const events = [
        'app.record.create.change.行編集',
        'app.record.edit.change.行編集'
    ];
    kintone.events.on(events, function(event) {

        // チェックボックスがチェックされた場合に作動させる

            // コピー挿入するテーブル行のデータ作成
            const addRowData = { "value": event.changes.row.value };

            // 指定された行のデータをeventオブジェクトの既存テーブル最下行に挿入
            event.record['Table']['value'].push(addRowData);

            // チェックボックスのクリアー
            event.changes.field.value = [];

            return event;
        }
    });
})();

ソースコードの概要：

チェックボックスであれば、レコード編集画面で「フィールド値変更時イベント」が使えます。このイベントをキャッチして、チェックボックスがクリックされたテーブル行のデータを取得し、既存のテーブルデータに挿入します。

データのレコードへの反映は、eventオブジェクトのreturnという形で行なっていますので、ドシキンカスで言うところの「レベル2」のカスタマイズと言うことになります。

このカスタマイズのポイントは、次の3つになるかと思います。

行コピーのトリガーとして、チェックボックスの値変更時イベントを使うところ
テーブル更新用の配列データの理解と取り扱い
行コピーと同時に、チェックボックスの値をクリアーすることで、あたかも行コピースイッチとしてのみ働くように見せるようにしたこと

もっと詳しく勉強したい方のために

これを作った私も非プログラマーです。

何をどのように考えてこのカスタマイズを作ったのか、その考え方と過程を少し詳し目にお話ししたいと思っています。長くなりますので続きは別の記事で。

自社のアプリに展開したい人は

簡単な kintoneカスタマイズの知識のある人は、自力で実装できると思います。カスタマイズやJavaScriptの知識がなくて、それでも業務で利用しているアプリにこの機能が必要だ！という方は、ぜひご相談ください。

サンプルのままでいいのかどうか？やりたいことに対して、どのような方法がベストなのかについて検討し、実装のサポートをいたします（有償サポート）。

お問い合わせフォームからぜひ気軽に相談ください。