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

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

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

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

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

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

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

動作サンプル

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

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

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

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

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

 ▼サンプルアプリ

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

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

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

▼サンプルコード:

ソースコードの概要:

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

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

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

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

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

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

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

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

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

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

kintone認定アプリデザインスペシャリスト 松田正太郎があなたの相談相手になります。
★初回打合せ(2時間程度を想定)は無料で対応します。
/* ページリンク */