ブログ

編集画面でも条件書式をつかって入力欄の背景色・文字色を変えてみよう!

先日、条件書式プラグインが編集画面にも対応いたしました。
過去紹介したこちら(テーブル拡張 とテーブル集計を組み合わせてみよう!合計数の警告表示+行数制限編)のブログに対して、献立アプリの編集画面でも書式をセットしてみましょう。

前回のおさらい

前回の記事では、献立を管理するアプリを作りました。テーブル集計サブテーブルにメニューとカロリーを登録し、カロリーの合計値を計算するアプリです。

アプリのフィールド定義は以下のようになります

  フィールドタイプ 説明
  文字列(1行) 献立名
サブテーブル 種類(ドロップダウン) 主食、副菜、汁物、その他の定義をドロップダウンで保持
サブテーブル 品名(文字列(1行)) 品名を自由入力
サブテーブル カロリー(数値) カロリーをkcal単位で入力します

今回、条件書式プラグインを用いて、サブテーブルのカロリーが500カロリーを超えていたら該当箇所の書式を変更する、というルールを追加してみます。

設定後イメージ

編集画面

以下、実際の出来上がったアプリの編集中の画面です。
編集時に条件を満たした場合に指定の書式に変更します。

主菜を鯖の味噌煮から鶏もも照り焼き(大)に変えてみましょう。カロリーが500kcalを超えたことで書式が変わりました合計値も書式が変わりました

詳細画面

詳細画面でも同様の書式が適用されます。

一覧画面

また、一覧に表示するサブテーブルでも同様に色を変えることができます。

プラグイン設定

プラグインの設定として、サブテーブルのフィールド「カロリー」のフィールドに対して以下の条件を付けます。
 

項目
書式条件フィールド カロリー[テーブル]
形式 文字
条件式 >=(以上)
条件値 500
書式変更フィールド カロリー[テーブル]
文字色 #ee1b1b
背景色 #465cb4
文字サイズ やや大きい
文字装飾 太字

以下のように設定画面ではなっております。

設定業の右端の紙と鉛筆マークをクリックすることで編集できます。編集画面を「設定する」にすることで、編集画面で条件書式が有効になります

 

いかがだったでしょうか。条件書式を用いることでサブテーブルの編集時の表示がより見やすくなり、より作業がはかどりますね。

 

ブログ一覧に戻る