Customineの基本的な事柄を説明している、「はじめてのカスタマイズ」ではレコード一覧画面の条件書式を設定する例を紹介しております。

こちらでは、レコード詳細画面と編集画面で条件書式を設定する例をご紹介したいと思います。


利用想定シーン

ここでは例として、kintoneのサンプルアプリにある「総務への依頼受付」のカスタマイズをしてみたいと思います。

このkintoneアプリの詳細画面で、「至急」の指定があったレコードに色表示をしてみます。

また、編集画面で納品希望日に過去の日付が指定された場合にも、色表示をするようにしてみましょう。


Customineの設定

それでは、アプリに対してカスタマイズをしていきます。Customine のアプリ選択画面から、依頼受付アプリを選択してカスタマイズの作成を始めます。


まず詳細画面の条件書式設定をしてみましょう。「至急」がチェックされたレコードなら、フィールドに色を付けてみます。

「やること」と「条件」はどちらから設定しても構いませんが、ここでは画面右側の条件から設定してみます。

これで条件の設定は完成です。


次にやることの設定をします。

  • 「やること」にカテゴリー：その他のUIのなかから「フィールド背景色を変更する」を選択します
    • 「フィールド」は「至急」のフィールドを選択します。他のフィールドを追加で選択しても勿論構いません
    • 「色」はお好みの色を設定してください。ここでは赤を設定しました


以上でやることの設定は完了です。

これで1つ設定が出来ました。「kintoneアプリへ登録」ボタンをクリックして、詳細画面の条件書式設定がうまく動いているか、試してみてください。


編集画面での条件書式設定

続いて、レコード追加や編集画面での条件書式を設定してみます。

納期希望日に過去の日付が選択されたら、色を塗ります（エラーにしてもよいのですが、ここでは色を塗って警告するだけに留めます）。


ここでも条件から先に設定してみましょう。

  • 「条件」にまず「フィールドの値を編集して値が変わった時」を選択します
    • 「フィールド」には「納期希望日」を選択します
    • 「一覧画面の鉛筆を押した時」は「一覧画面の鉛筆を押した時も含める」を選択します（これはひとまずどちらでも構いません）
  • さらに「フィールドの値が特定の値ならば」を追加します。ここで、色を塗りたい条件を指定します
    • 「フィールド」には「納期希望日」を選択します
    • 「条件」には「小さい(<)」を選択します
    • 「比較値」には「=today()」と入力します

これで、納品希望日に今日より過去が選択された場合、という条件が完成です。


次にやることの設定をします。

  • 「やること」にカテゴリー：その他のUIのなかから「フィールド背景色を変更する」を選択します
    • 「フィールド」は「納期希望日」のフィールドを選択します。他のフィールドを追加で選択しても勿論構いません
    • 「色」はお好みの色を設定してください。ここでは赤を設定しました


以上でやることの設定は完了です。

また1つ設定が出来ましたので、「kintoneアプリへ登録」ボタンをクリックして、編集画面で条件書式がうまく動いているか、試してみてください。


納期希望日を、過去、今日、明日以降と色々選択すると、あることに気づかれるかと思います。

反対の条件も追加する

編集画面では、ユーザーの入力で値がどんどん変わります。ですのでこれだけの設定だと、一回納期希望日を過去に設定すると、その後未来の日付を選択しても色が変わりません。


これではちょっと都合が悪いので、今日や未来の日付が選択された場合の条件書式も設定しておきましょう。

先程設定したアクションのメニューから、アクションを複製して必要なところを変えるのが簡単です。もちろん、新しくアクションを設定するのでも構いません。


ここでも、まず条件から先に設定します。

  • 「条件」にまず「フィールドの値を編集して値が変わった時」を選択します
    • 「フィールド」には「納期希望日」を選択します
    • 「一覧画面の鉛筆を押した時」は「一覧画面の鉛筆を押した時も含める」を選択します（これはどちらでも構いません）
  • さらに「フィールドの値が特定の値ならば」を追加します。ここで、色を塗りたい条件を指定します
    • 「フィールド」には「納期希望日」を選択します
    • 「条件」には「大きいか等しい(>=)」を選択します。ここがポイントになります
    • 「比較値」には「=today()」と入力します

これで、納品希望日に今日および未来の日付が選択された場合、という条件が完成です。


次にやることの設定をします。

  • 「やること」にカテゴリー：その他のUIのなかから「フィールド背景色を変更する」を選択します
    • 「フィールド」は「納期希望日」のフィールドを選択します。他のフィールドを追加で選択しても勿論構いません
    • 「色」はお好みの色を設定してください。ここでは緑を設定しました


以上でやることの設定は完了です。


ちょうど先ほど作成したアクションの、反対の条件を指定していることになります。

編集画面で直感的な条件書式を設定するには、この反対の条件を設定することがポイントになります。

これは日付フィールドに限った話ではなく、編集画面の条件書式設定ではいつでも考慮すべき点となります。


これで全ての設定が出来ましたので、「kintoneアプリへ登録」ボタンをクリックして、編集画面で条件書式がうまく動いているか、試してみてください。


まとめ

レコード詳細画面と編集画面での条件書式を設定するカスタマイズは以上になります。詳細画面や編集画面でも、書式設定を様々な条件で簡単に出来ることをご紹介しました。ぜひご活用ください！