テーブルの行に対する入力で、複数の候補から選択させて入力したり、多段プルダウンで入力させたりと、ちょっと入力方法を特殊にカスタマイズしたいケースは多々あるかと思います。


今回は、テーブルに入力する専用の「入力欄」を作成し、ここからテーブルにデータを入力するカスタマイズを作成してみたいと思います。 出来上がりのイメージは、このような形です。テーブルの下にある追加ボタンを押すと、入力した内容が上のテーブルにセットされます。


kintoneアプリのフォーム設定

まず、kintoneのフォームを設定します。


ここでは、テーブルの下に同じような入力欄を持つ入力エリアを用意しました。また、その下にボタンを設置するようのスペースを配置しています。


Customineの設定：編集画面のカスタマイズ

フォームの設定が出来ましたので、早速追加・編集画面の見た目をカスタマイズしていきます。利用するやることは以下のとおりです。

設定はこのような感じになります。


「追加ボタン」を押した時の動作

続いて、ボタンが押されたときの動作を作成していきます。このカスタマイズの肝になる部分ですので、ひとつひとつ見ていきます。

まず、ボタンが押されたらテーブルに行を追加する部分のカスタマイズです。これは「テーブルに行を追加する」を利用します。


ここで注意する必要があるのが「各フィールドの値」のフィールドマッピングの設定です。


この様に、先程テーブル外に設置した入力エリアの値を、テーブルの各フィールドにマッピングするようにします。


これで、ボタンが押された時に、入力エリアに入れた内容がテーブルに行として追加されます。 ここまでで一度「kintoneに登録」して、動作を確認してみてください。


動作させてみると、いくつか気になるところが出てくるかと思いますので、今度はその部分に手を入れていきます。


空の行の扱いについて

見た目上いくつか気になるところがあるかと思いますが、まず、追加画面で1行目にある空の行について考えます。これを残さず綺麗なテーブルにしたいですね。

また初期の1行目に限らず、空の行が入力できないようにしておいたほうが、レコードとしては見やすくなりそうなので、そのようなカスタマイズをしてみます。


「空の行とは何か」を決める

空の行を削除する前に、まず「空の行とは何か」を決めておきます。
この例の場合、「キー」というフィールドが空白の場合は空の行とみなすことが出来ますので、簡単です。


これがもしラジオボタンだけの場合や、初期値が入っているような行ですと、「どういう場合に空の行とみなすのか」というのを予め運用ルールとして決めておく必要がありますので、ご注意ください。

必要に応じて、テーブルにフィールドを追加する必要があるかも知れません。


空の行を消すカスタマイズ

では実際に、空の行を消すカスタマイズをしてみます。これは「テーブルに行を追加」のアクションが完了した時に、毎回実行します。


流れとしては以下のとおりです。

ポイントは2つです。


1つ目は、「取得したレコードを絞り込む」ときには、空の行ではない条件を設定することです。 もし1つのフィールドだけでは絞り込めない場合、「取得したレコードを絞り込む」を数珠つなぎに繋いでいくつでも条件を絞り込むことが可能です。


もう1つは、「レコードをテーブルに書き出す」際に、「既存の行」を「クリアする」設定にすることです。こうすることで、絞り込んだ結果のみでテーブルを上書きすることが出来ます。


入力エリアのカスタマイズ

もう1つの気になる点、入力エリアの各値がテーブル追加後にも残っている点です。

これは単に、テーブル追加後に「フィールド値をクリアする」でフィールドをクリアすれば良いでしょう。

初期値が必要なタイプの入力であれば、「フィールド値をまとめてセットする」を使って初期値をまとめてセットすると良いと思います。


以上でカスタマイズは完成です！


まとめ

テーブルに行を追加する「入力エリア」は、色々工夫することが出来ると思います。


ここでは簡単に文字列（1行）と日付・時刻のみを扱いましたが、工夫することで例えば「別kintoneアプリから複数レコード選択して」追加したり、「住所をプルダウンで入力する」のように、多段プルダウンで入力したりすることも可能ですのでお試しください。


ただし、選択して入力した項目については、その後テーブルで変更しては困る場合もあるかと思いますので、その場合には該当の列は「フィールドを無効化する」で編集できないようにしておくようにしてください。


もしなにか分からないことがありましたら、チャットサポートにてお問い合わせください。