カテゴリー
【アプリ作成のコツ】条件付きスタイル設定をマスターして、より見やすいアプリに！
AppSuiteでデータを管理していてデータ量が増えてくると、一覧画面が見にくくなってしまったり、必要なデータを探しづらくなってしまったりしますよね🙄
AppSuiteでは以下のように優先度などのそれぞれの部品に入力された値の内容によって、その部品の文字色や文字書式、背景色を設定できるのはご存知でしょうか。
今回はタスク管理のアプリを例にして、その設定方法をご紹介いたします😉文字色や背景を工夫することで、より見やすいアプリを作成してみてください！
事前準備
部品に条件書式を設定する前に、アプリの詳細画面設定にて部品の設定は済ませておきましょう！
今回は「優先度」という部品の項目別に色を分けたいので、［プルダウン］部品で「優先度」という名前の部品を作成しています。
条件付きスタイル設定
［アプリケーション設定］の［メニュー］から「条件付きスタイル」を選択します。
プルダウンメニューから「優先度」を選択します。
「条件付きスタイルの追加」をクリックします。
すると、追加画面が表示されるので［条件］から「一致する」を選択し、設定したい項目を選びます。
※「選択値あり」を選択すると値があった場合、すべてが該当し、「選択値なし」を選択すると、値がない場合に該当します。
今回は「緊急」の優先度の場合を設定していきます。優先度が一番高いので［塗りつぶし］の色を「赤(#f44336)」に、フォントの色を太くして見やすいように「白（#ffffff）」にしました。
設定された条件付きスタイルの見え方は［塗りつぶし］に反映されるので、確認ができます。
設定が完了したら［追加］をクリックします。
これで、「優先度」部品の「緊急」項目の条件付きスタイル設定が完了しました。
引き続き、残りの項目にも条件付きスタイルの設定をしていきます。これで、設定が完了です。
一覧画面に追加する
最後に一覧画面を作成します。
一覧画面作成画面から、「優先度」をドラッグアンドドロップして追加します。
これで、一覧画面に色付きで優先度が表示されるようになりました。
※条件付きスタイル設定は、以下のように詳細画面にも反映されます。
いつものアプリにひと工夫するだけで、業務効率がグッと上がります！ぜひ、［条件付きスタイル設定］を試してみてください😁
