Cybozu developer networkのTipsのURL:

https://developer.cybozu.io/hc/ja/articles/202341944 


アプリの一覧画面や詳細画面を見やすくするため、レコード一覧や詳細画面でフィールドの条件によってセルの背景色や文字色を変えたい時、ありますよね。

今回は、そんな時のカスタマイズをご紹介します!


アプリの確認

今回は例として、kintoneアプリストアにある総務への依頼受付を利用します。

追加したら「総務への受付依頼」アプリを確認してください。

変更は加えず、そのまま利用します。


やりたいこと

レコード一覧画面:

  • ステータスの背景色を変更する

  • ステータスが「未着手」の時は文字色を赤色にする

  • ステータスが「未着手」以外の時は文字色を青色にする

  • 「至急」が表示されている時は文字色を赤色にし、文字を少し大きくして強調する

レコード詳細画面:

  • 「至急」が表示されている時は文字色を赤色にし、文字を少し大きくして強調する


Customineの設定

Customineに「総務への受付依頼」アプリのカスタマイズを追加します。

まずは、レコード一覧画面を表示した時のカスタマイズを行います。


ステータスの背景色を変更する


やること

フィールド背景色を変更する」を選択します。

対象となるフィールドは「ステータス」です。色にはお好みの色を指定してください。

例では赤:255、緑:248、青:220を指定しています。


条件

一覧画面が表示された時に背景色を変更したいので「一覧画面を表示した時」を選択します。


ステータスが「未着手」の時は文字色を赤色にする


やること

フィールド文字色を変更する」を選択します。

対象となるフィールドは「ステータス」です。色にはお好みの色を指定してください。

例では赤:255、緑:0、青:0を指定しています。


条件

一覧画面が表示された時に背景色を変更したいので「一覧画面を表示した時」を選択します。

さらに、ステータスのフィールド値が「未着手」の時だけ文字色を変更したいので「フィールド値が特定の値ならば」を選択します。

フィールド値は「ステータス」を指定し、条件は「等しい」、比較値には「未着手」を指定します。

ステータスが「未着手」以外の時は文字色を青色にする


やること

フィールド文字色を変更する」を選択します。

対象となるフィールドは「ステータス」です。色にはお好みの色を指定してください。

例では赤:0、緑:0、青:255を指定しています。


条件

一覧画面が表示された時に背景色を変更したいので「一覧画面を表示した時」を選択します。

さらに、ステータスのフィールド値が「未着手」以外の時だけ文字色を変更したいので「フィールド値が特定の値ならば」を選択します。

フィールド値は「ステータス」を指定し、条件は「等しくない」、比較値には「未着手」を指定します。


一覧画面で「至急」が表示されている時は文字色を赤色にする


やること

フィールド文字色を変更する」を選択します。

対象となるフィールドは「至急」です。色にはお好みの色を指定してください。

例では赤:255、緑:0、青:0を指定しています。


条件

一覧画面が表示された時に文字色を変更したいので「一覧画面を表示した時」を選択します。

さらに、「至急」が表示されている時だけ文字色を変更したいので「フィールド値が特定の値ならば」を選択します。

フィールド値は「至急」を指定し、条件は「等しい」、比較値には「至急」を指定します。

一覧画面で「至急」が表示されている時は文字を少し大きくして強調する


やること

フィールドの文字を拡大縮小する」を選択します。

対象となるフィールドは「至急」です。倍率はお好みでご指定ください。

例では「1.3」を指定しています。


条件

アクション「一覧画面で「至急」が表示されている時は文字色を赤色にする」と同じ条件で文字を拡大したいので「他のアクションの実行が完了した時」を選択します。

アクションは「4」を指定します。


これでレコード一覧画面の設定は完了です。

続いて、レコード詳細画面を表示した時のカスタマイズを行っていきます。

詳細画面で「至急」が表示されている時は文字を少し大きくして強調する


やること

フィールド文字色を変更する」を選択します。

対象となるフィールドは「至急」です。色にはお好みの色を指定してください。

例では一覧画面と同様に、赤:255、緑:0、青:0を指定しています。


条件

詳細画面が表示された時に文字色を変更したいので「詳細画面を表示した時」を選択します。

さらに、「至急」が表示されている時だけ文字色を変更したいので「フィールド値が特定の値ならば」を選択します。

フィールド値は「至急」を指定し、条件は「等しい」、比較値には「至急」を指定します。


詳細画面で「至急」が表示されている時は文字を少し大きくして強調する


やること

フィールドの文字を拡大縮小する」を選択します。

対象となるフィールドは「至急」です。倍率はお好みでご指定ください。

例では「1.3」を指定しています。


条件

アクション「詳細画面で「至急」が表示されている時は文字色を赤色にする」と同じ条件で文字を拡大したいので「他のアクションの実行が完了した時」を選択します。

アクションは「6」を指定します。


これで設定は完了です。

「kintoneアプリへ登録」し、動作を確認してみましょう!

「総務への受付依頼」アプリにレコードを登録し、一覧画面や詳細画面を表示すると、

背景色や文字色が変わっているのが確認できましたでしょうか?


まとめ

アプリを見やすく使いやすくするために、背景色や文字色を変えたい!というケースは多いと思います。

ぜひ色々試してみてくださいね。

もし分からないことがありましたら、フォーラムの方でご質問ください。