一覧上で「完了」したものと「未完了」のもの、重要な項目などをひと目で区別したい場合があります。
本記事では一覧機能の“裏ワザ”第一弾として、値に応じて一覧項目の背景色を変える方法を紹介します。
※背景色を変更するには、xslファイルのソースを一部編集する必要があります。編集前にはバックアップを取ることをおすすめします。
完成イメージ
上記例では、ステータスが「対応完了」の行のみ背景色をグレー（#D3D3D3）にしています。
それ以外のステータスはデフォルト色のままです。
次項から、特定の値のときに背景色を変える方法を説明します。
作業手順
1. 一覧設定を「ソースデザイン」に変更
まずはデフォルトの一覧機能を作成します。
一覧の作成方法はこちら
作成後、「ソースデザイン」に切り替えます。
一覧はデフォルト機能で完成させてからソースデザインに切り替えることが重要です。
切り替え後は修正時に手戻りが発生しやすくなります。
2. xslで条件式を記述
xsl設定にあるソースに、以下のような条件式とCSSを記述します。
<xsl:when test="[条件式記載する箇所]"> [cssを記載する箇所] </xsl:when>
条件式はtest=""の中に記述します。
<xsl:when test="usr_status = '対応完了'"> border-width:0px 1px;border-style:solid;border-color:#999999;padding:5px;font-size:10pt;color:#444444;background-color:#D3D3D3; </xsl:when>
条件式で参照する項目は
usr_[差し替えキーワード]形式で指定します。
セレクト項目はIDではなく、セレクト名で指定します。
3. 背景色を変えたいデータ行に条件式を追記
xslソースには、ページャー・ヘッダー・データ行などの記述があります。
このうち、データ行部分に上記の条件式を追加します。
作業が終わったら、一覧画面を表示して挙動を確認しましょう。
まとめ
usr_[差し替えキーワード]形式で指定おわりに
CSSのbackground-colorを変更すれば、好きな色にできます。
また、背景色を行全体ではなく、特定のセルだけに適用することも可能です。
条件式を工夫すれば、特定の文字が含まれる場合に色を変えるなど、柔軟なカスタマイズができます。
ぜひ試してみてください。
