アプリの一覧画面や詳細画面を見やすくするため、レコード一覧や詳細画面でフィールドの条件によってセルの背景色や文字色を変えたい時、ありますよね。
今回は、そんな時のカスタマイズをご紹介します！
アプリの確認
今回は例として、kintoneアプリストアにある総務への依頼受付を利用します。
追加したら「総務への受付依頼」アプリを確認してください。
変更は加えず、そのまま利用します。
やりたいこと
レコード一覧画面：
ステータスの背景色を変更する
ステータスが「未着手」の時は文字色を赤色にする
ステータスが「未着手」以外の時は文字色を青色にする
「至急」が表示されている時は文字色を赤色にし、文字を少し大きくして強調する
レコード詳細画面：
「至急」が表示されている時は文字色を赤色にし、文字を少し大きくして強調する
Customineの設定
Customineに「総務への受付依頼」アプリのカスタマイズを追加します。
まずは、レコード一覧画面を表示した時のカスタマイズを行います。
一覧画面でステータスの背景色を変更する
やること
「フィールド背景色を変更する」を選択します。
対象となるフィールドは「ステータス」です。色にはお好みの色を指定してください。
例では赤(R)：255、緑(G)：248、青(B)：220を指定しています。
RGB指定をする場合は以下の部分をクリックし、RGBモードにします。
条件
一覧画面が表示された時に背景色を変更したいので「一覧画面を表示した時」を選択します。
一覧画面でステータスが「未着手」の時は文字色を赤色にする
やること
「フィールド文字色を変更する」を選択します。
対象となるフィールドは「ステータス」です。色にはお好みの色を指定してください。
例では赤(R)：255、緑(G)：0、青(B)：0を指定しています。
条件
一覧画面が表示された時に背景色を変更したいので「一覧画面を表示した時」を選択します。
さらに、ステータスのフィールド値が「未着手」の時だけ文字色を変更したいので「フィールド値が特定の値ならば」を選択します。
フィールド値は「ステータス」を指定し、条件は「等しい」、比較値には「未着手」を指定します。
一覧画面でステータスが「未着手」以外の時は文字色を青色にする
やること
「フィールド文字色を変更する」を選択します。
対象となるフィールドは「ステータス」です。色にはお好みの色を指定してください。
例では赤(R)：0、緑(G)：0、青(B)：255を指定しています。
条件
一覧画面が表示された時に背景色を変更したいので「一覧画面を表示した時」を選択します。
さらに、ステータスのフィールド値が「未着手」以外の時だけ文字色を変更したいので「フィールド値が特定の値ならば」を選択します。
フィールド値は「ステータス」を指定し、条件は「等しくない」、比較値には「未着手」を指定します。
一覧画面で「至急」が表示されている時は文字色を赤色にする
やること
「フィールド文字色を変更する」を選択します。
対象となるフィールドは「至急」です。色にはお好みの色を指定してください。
例では赤(R)：255、緑(G)：0、青(B)：0を指定しています。
条件
一覧画面が表示された時に文字色を変更したいので「一覧画面を表示した時」を選択します。
さらに、「至急」が表示されている時だけ文字色を変更したいので「フィールド値が特定の値ならば」を選択します。
フィールド値は「至急」を指定し、条件は「等しい」、比較値には「至急」を指定します。
一覧画面で「至急」が表示されている時は文字を少し大きくして強調する
やること
「フィールドの文字を拡大縮小する」を選択します。
対象となるフィールドは「至急」です。倍率はお好みでご指定ください。
例では「1.3」を指定しています。
条件
アクション「一覧画面で「至急」が表示されている時は文字色を赤色にする」と同じ条件で文字を拡大したいので「他のアクションの実行が完了した時」を選択します。
アクションは「4」を指定します。
これでレコード一覧画面の設定は完了です。
続いて、レコード詳細画面を表示した時のカスタマイズを行っていきます。
詳細画面で「至急」が表示されている時は文字色を赤色にする
やること
「フィールド文字色を変更する」を選択します。
対象となるフィールドは「至急」です。色にはお好みの色を指定してください。
例では一覧画面と同様に、赤(R)：255、緑(G)：0、青(B)：0を指定しています。
条件
詳細画面が表示された時に文字色を変更したいので「詳細画面を表示した時」を選択します。
さらに、「至急」が表示されている時だけ文字色を変更したいので「フィールド値が特定の値ならば」を選択します。
フィールド値は「至急」を指定し、条件は「等しい」、比較値には「至急」を指定します。
詳細画面で「至急」が表示されている時は文字を少し大きくして強調する
やること
「フィールドの文字を拡大縮小する」を選択します。
対象となるフィールドは「至急」です。倍率はお好みでご指定ください。
例では「1.3」を指定しています。
条件
アクション「詳細画面で「至急」が表示されている時は文字色を赤色にする」と同じ条件で文字を拡大したいので「他のアクションの実行が完了した時」を選択します。
アクションは「6」を指定します。
これで設定は完了です。
「kintoneアプリへ登録」し、動作を確認してみましょう！
「総務への受付依頼」アプリにレコードを登録し、一覧画面や詳細画面を表示すると、
背景色や文字色が変わっているのが確認できましたでしょうか？
まとめ
アプリを見やすく使いやすくするために、背景色や文字色を変えたい！というケースは多いと思います。
ぜひ色々試してみてくださいね。
また、実際に作成してみられてご不明な点などございましたら、お気軽にチャットでご質問ください。