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

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

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

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

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

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

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

動作サンプル

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

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

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

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

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

 ▼サンプルアプリ

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

テーブルに設置したフィールド:
(テーブルのフィールドコード:Table)

フィールド名フィールドコードフィールドタイプ備考
行編集行編集チェックボックス選択肢:▼(1つだけ設定)※必須
日付日付日付
種別種別ドロップダウン選択肢:交通費、宿泊費等
項目項目文字列(1行)
金額金額数値
添付ファイル添付ファイル添付ファイル

▼サンプルコード:

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

        // チェックボックスがチェックされた場合に作動させる
        if (event.changes.field.value.length !== 0) {

            // コピー挿入するテーブル行のデータ作成
            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の知識がなくて、それでも業務で利用しているアプリにこの機能が必要だ!という方は、ぜひご相談ください。

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

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

kintone導入・活用のご相談はこちら!

こんな悩みを抱えていませんか?

◇ kintone導入がなかなか進まない
◇ アプリが思ったような動きをしてくれない・・・
◇ カスタマイズやプラグインをどう選んだらいいの??
◇ 業務改善の進め方がよくわからない

サイボウズ公認 kintone エバンジェリストの 松田正太郎があなたの相談相手になります。
保有しているkintone認定資格:
・kintone認定アソシエイト(2017)
・kintone認定アプリデザインスペシャリスト(2017)
・kintone認定カスタマイズスペシャリスト(2020)

★業務改善アドバイス、kintone構築支援
★連携サービス・プラグイン選定支援、カスタマイズ
★詳細ヒアリングの上、御社に最適なプランを提案します
★初回打合せ(2時間程度)は無料。まずはお問い合わせください!(WebミーティングOK)