一覧表示のように詳細表示のテーブルで１行ごとに背景色をつけて見やすくする : gusuku support

今回は一覧表示のように詳細表示でのテーブルに１行ごとの背景色をつけ、見やすくするカスタマイズ例をご紹介します！

kintoneアプリ例での注意点：

はじめに本カスタマイズではkintoneアプリ側にて、カスタマインでのみ用いる数値フィールドを設定し、テーブルに行番号を設定するためのフィールドとして用いる必要があります。このための数値フィールドを追加しておきましょう。

ここでは新規追加する数値フィールドを、フィールド名　および　フィールドコードは「明細テーブル行番号」として設定します。

次のようなアプリを例に、カスタマイズの方法を説明します。

まず、テーブルの行を識別するために、やること「テーブルの列に行番号をセットする」でテーブルに行番号をセットしておきます。

行番号は常に上から１，２，３・・・の順番で付番するため、「テーブルに行を追加または削除した時」の条件でアクションを作成しておきます。

また、明細テーブル行番号　フィールドについては、「追加画面・編集画面を表示した時」にユーザーが値を入力できないよう、「フィールドを無効化する」で入力不可にしておきます。

続いて、詳細画面を表示した時のカスタマイズです。

ここでは条件「詳細画面を表示した時」に、「２つの値を比較して条件を満たすならば」を併せて使います。具体的には次の設定となります。

この条件に対し、やること「フィールド背景色を変更する」で背景色を変更します。

フィールド背景色を変更するについてはもう少し丁寧に説明します。

まず、色を変更する対象とすべきフィールドはテーブルに指定したすべてのフィールドとなります。（カスタマイズ例として例示しているアプリケーションであれば、明細テーブルのすべてのフィールドとなります。次の画像も併せてご確認下さい。）

また、ここで設定する背景色につきましてはkintone全てのデザインテーマで使われている色でもある #EEEEEE を設定していただくのが、kintoneの色デザイン設定を崩さない事からおススメです！

以上でカスタマイズは完了です。

カスタマイズが完了したら、「kintone アプリへ登録」ボタンを押し、動作を確認してみてください。

以前より見やすいテーブル表示となりましたでしょうか？

カスタマイズについてご質問がありましたら、チャットでお問合せください！