kintone のテーブルを活用したアプリで、1行の項目が多くなってしまった際に、入力がし辛いと思ったことはありませんでしょうか？

もちろん、横スクロールすればすべての項目が表示され、また「＋」ボタンも登場するのですが、これに気づかないユーザーも居たりするので、なかなか大変です。なんだか表示もちょっとおかしくなるので、出来ればこれは避けたい状況です。



そこで今回は、このような横長のテーブルを入力しやすくするカスタマイズを作成してみたいと思います。


Customineの基本的な事柄は、こちらの「はじめてのカスタマイズ」をご参照ください。


利用想定シーン

このカスタマイズでは、横長のテーブルであればアプリは問いません。お手元の kintone アプリでお試しください。

そのテーブルの上にスペースを配置し、そこにボタンを付けて、そのボタンごとに入力項目を出し分けて表示するようにしてみましょう。


kintoneの設定

まず、kintone上でテーブルの真上にスペースを追加して、要素IDを設定します。ここでは、要素IDは「button_space」としました。


Customineの設定

それでは、このアプリに対してカスタマイズをしてみます。まずは上記で追加したスペースにボタンを配置します。

ここでは、テーブルにあるフォームを2つに分類して、前半入力すべき項目群と後半入力すべき項目群に分けて入力しやすくすることを考えてみます。ということで、ボタンは2つ追加します。

  • 「やること」にカテゴリー：ボタンから「ボタンをスペースに配置する」を選択します
  • 「場所」は先ほど作成した「button_space」を選択します
  • 「ラベル」には例えば「入力項目：工程開始時」などと入力しておきます

これでやることの設定は完了です。続いて条件の方を設定してみます。

  • 「条件」にはデフォルトで設定される「追加画面・編集画面を表示した時」のままで利用します
  • 「一覧画面の鉛筆を押した時」は「一覧画面の鉛筆を押した時は含めない」を選択してください

これでボタンが1つ追加されました。

続いてボタンをもう1つ配置します。いま設定したアクションの右上の「…」メニューから「アクションを複製」を選択して、ラベルだけ変更するのが簡単です。

ラベルには「入力項目：工程終了時」などと入力しておきましょう。

これでボタンの配置は完了です。


初期状態の設定

追加画面や選択画面を開いたときどのような状態にしておいたら良いでしょうか？

これには一考の余地があります。ここでは見かけ上分かりやすいようにテーブル行の目印となる「No」というフィールド以外は全てのフィールドを非表示にする設定をしてみます。


このフィールドは、どちらのボタンを押したときにも表示させておくようにします。

  • 「やること」にカテゴリー：フィールドから「フィールドやグループを非表示にする」を選択します
  • 「フィールド」はテーブル内の「No」というフィールド以外の全てのフィールドを選択していきます

これでやることの設定は完了です。続いて条件の方を設定してみます。

  • 「条件」にはデフォルトで設定される「追加画面・編集画面を表示した時」のままで利用します
  • 「一覧画面の鉛筆を押した時」は「一覧画面の鉛筆を押した時は含めない」を選択してください

これで初期状態ではテーブルのフィールドは、1つのフィールドを除いて何も表示されなくなります。


項目の表示・非表示を設定

次に項目の表示非表示を設定します。ここで設定することは、以下のような考え方になります。

  • あるボタンを押したときに
  • 隠したいフィールドを非表示にする
  • 入力したいフィールドを表示する。これは、上記の設定と反対の設定になります
  • いつでも目印となるフィールドは常に表示しておく

この考え方に基づいて、早速設定してみましょう。まずは「工程開始時」のボタンを押した時の動きを設定します。

ここでは、いつでも入力させたいフィールドとして「No」というフィールドを指定することにします。

これでやることの設定は完了です。続いて条件の方を設定してみます。

  • 「条件」には「ボタンを押した時」を選択します
  • 「ボタン」には先ほど作成した工程開始時のボタンを選択します

これでこのボタンを押すと、不要なフィールドが隠れるようになりました。


そのまま、このアクションを複製して、今度は表示する項目を設定します。

  • 「やること」にカテゴリー：フィールドから「フィールドやグループを表示する」を選択します
  • 「フィールド」では、先ほどと反対に表示するフィールドを選択していきます。

これで表示非表示のセットが一式完成しました。同じボタンに対する設定で、お互いに反対の設定になっていることを確認してください。

もう1つのボタンに対する設定

あとは同じような設定を、もう1つのボタンに対して設定します。今度は工程終了時に表示する項目と、非表示にする項目を、上記のボタンとは真逆に設定します。言葉にするとややこしいのですが、以下の設定を見ていただければ一目瞭然かと思います。

表示・非表示を切り替える際には、このようにそれぞれ正反対の状態を設定することが必要になります。


ここまでで、「kintoneアプリへ登録」して動きを確認してみてください。

ボタンを押すことで、多数の列があるテーブルの幅が短くなって、入力しやすくなっていることを確認してください！


まとめ

横長のテーブルを入力しやすくするカスタマイズは以上になります。表示するフィールドと非表示にするフィールド、それにボタンの組み合わせが初めは混乱するかもしれませんが、一旦分かってしまえば組み合わせだけの話になりますので、すぐ理解できるかと思います。