AppSheetで爆速ノーコードアプリ開発 その6 - Format Rulesで画面を装飾する
カカト@ノーコード開発推しです。
「AppSheetで爆速ノーコードアプリ開発」と題して、ノーコードアプリ開発ツール 「AppSheet」の基本的な使い方の説明を連載形式で投稿しています。
前回、検温結果の一覧画面を作りましたが、見た目が味気ないのでAppSheetのFormat Rulesという機能を使い、画面に表示されるデータに少し装飾を付けたいと思います。
それでは早速実装していきましょう。
Format Rulesとは?
Format Rulesを使うことで、レコード行やデータに対し文字を大きくしたり、色を変えたりすることができます。
”Rules"という名前の通り、AppSheetの関数を使ってルール(条件)を作成すると、その条件に一致したものに対して定義したフォーマット適用してくれます。
見た方が早いので、早速ルールを作ってみましょう。
検温履歴の"調子"のFormat Ruleを作る
検温履歴の "調子" に対してルールを作っていきます。
まずはAppSheetの「UX」メニューをクリックし、「Format Rules」タブをクリックします。
New Format Ruleをクリックします。
ルール作成の画面が表示されるので、以下の内容で入力していきます。
・Rule name:調子(良好)
・For this data:検温履歴
・If this condition is true: = [調子] = "良好"
・Format these columns and actions : 調子
解説すると、調子(良好)というルール名で、"検温履歴"表の"調子"列に対し、値が "良好" だった際のルールを定義しています。
続いて下にスクロールし、「Visual Format」→「Icon」 に、"smile" のアイコンを検索してクリックします。
併せて、Highlight colorとText colorに青を選択します。
検温履歴の一覧を表示してみると、調子列の値の表示が以下のように変わりました。
※調子が良好以外を選択している場合は変わりませんので、データ追加するなどしてみてください。
これで、調子に"良好"が選択されたときのルールとフォーマットの作成は完了です。
簡単ですね。
"少し悪い"、"かなり悪い"にも同様にルールを作成していきましょう。
今作ったルールに表示されている、「Copy」ボタンをクリックします。
すると、"調子(良好)"のルールがコピーされ新しいルールが作成されますので、各項目を以下で入力します。
・Rule name:調子(少し悪い)
・For this data:検温履歴
・If this condition is true: = [調子] = "少し悪い"
・Format these columns and actions : 調子
Visual FormatのIconには、"frown"のアイコンをセットし、Highlight colorとText colorにはオレンジをセットします。
同じように、調子(かなり悪い)も作成しましょう。
Iconや色は以下としました。
はい、これで調子のFormat Rule作成は完了です。
検温履歴の調子の表示が、Format Ruleに設定した内容で表示されるか確認してください。
検温履歴の"体温"が37.5度以上の場合のFormat Ruleを作る
次に、体温の方もルール作成してみます。
体温が37.5度以上の場合は目立つようにしたいので、以下の内容でFormat Ruleを新規作成してください。
・Rule name:体温が37.5以上
・For this data:検温履歴
・If this condition is true: = [体温] >= 37.5
・Format these columns and actions : 体温
フォーマットですが、Iconは設定せず、Text colorを赤にして、「Text Format」→「Text size」を1.5(倍)、「Bold」をONにしてみます。
このあたりでSAVEしておきましょう。
さて、表示が変わったか見てみると、
体温が38度ですので、37.5度を超えたため表示が変わったのが確認できました。
試しに、37.5度未満で入力してみると、
Format Ruleが適用されないことも確認できました。
Format Rulesですが、App関数を使うことで色々なパターンの条件とそれに応じた装飾をすることができますので、上記であげた例以外も試してみてください。
次回予告
次回の投稿は以下の内容を予定しています。
・Slice機能を使い、データを絞り込み表示する
最後までお読みいただき、ありがとうございました。
この記事が気に入ったらサポートをしてみませんか?