3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

AppSheet UX設定について

Last updated at Posted at 2022-09-30

前置き

前回はAppSheetの概要を紹介させていただきましたが、
今回はアプリの見栄え、Excelでいうところの条件付き書式のような設定を紹介させていただきます。

前回の「AppSheet触ってみた」の記事はこちらから
https://qiita.com/shoyo0111/items/57432f35d9d81fcdefd6

Format Rulesについて

AppSheetのサイドメニューから[UX]をクリックします。
前回も紹介させていただきましたが、UXはアプリの見栄えなどを設定できる項目になります。

上部タブの[Format Rules]をクリックします。
ここでは条件に応じて項目に色を付けたり、文字を太字にしたりなど、Excelでいうところの条件付き書式のような設定が行えます。

[New Format Rule] をクリックして条件を追加していきます。
New Format rules.png

クリックすると以下のような、条件を追加できる画面が表示されます。

Format Rules.png
①Rule name : ルールの名称
②For this data : 元データとなるデータベース
③If this condition is true : ルールの数式
④Format these columns and actions : ルールの条件を適用させるカラム(複数選択可)

visual Format.png
⑤Icon : ④で選択したカラムの先頭に表示させるアイコン
⑥Highlight color : アイコンの色。⑤で指定しない場合は選択した色の丸印のアイコンが表示される。
⑦Text color : ④で選択したカラムの文字の色を変更できる

Text Format.png
⑧Text size : テキストサイズの変更
⑨Underline : 下線を引く
⑩Bold : 太字に変更
⑪Italic : 斜体に変更
⑫Uppercase : 英小文字を英大文字に変更
⑬Strikethrough : 取り消し線を引く

実際に設定してみる

条件は「ステータスカラムが完了だったら」[名前]のカラムに設定値を適用で設定しました。
数式.png

設定値は以下の通りです。
・チェックマークのアイコンを表示
・アイコンの色は青、テキストの色は赤
・文字は太字で取り消し線を追加
設定値.png

アプリ上の見栄えはこんな感じです。
しっかりと条件が反映されてますね。
アプリ画面.png

最後に

ステータスやカテゴリなどに合わせて文字の色やアイコンなどを付けるとアプリが華やかになりそうですね。
(あまりやりすぎるとごちゃごちゃしそうですが)

是非簡単に設定できるので試してみてください。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?