データ行がないときに、一覧のヘッダーだけが表示されて「これを消したい」と思ったことはありませんか?
本記事では一覧機能の“裏ワザ”第二弾として、データ行がないときに一覧のヘッダーを非表示にする方法を紹介します。
※本方法を適用するには、xslファイルのソースを一部編集する必要があります。編集前にはバックアップを取ることをおすすめします。
完成イメージ
データが1件もない場合、一覧ヘッダーの代わりに「お問い合わせデータはありません」と表示されるようにしています。
データが入ってくると、文言の代わりに一覧が表示されます。
次項から、データがない場合の一覧の出し分け方法を説明します。
作業手順
1. 一覧設定を「ソースデザイン」に変更
まずはデフォルトの一覧機能を作成します。
一覧の作成方法はこちら
作成後、「ソースデザイン」に切り替えます。
一覧はデフォルト機能で完成させてからソースデザインに切り替えることが重要です。
切り替え後は修正時に手戻りが発生しやすくなります。
2. xslでデータがない時の条件式を記述
xsl設定にあるソースに、以下のような条件式を追記します。
<!-- これ以上うえのソースは割愛 --> <!-- データ部分 --> <xsl:template match="/table"> <script type="text/javascript" src="{@jsPath}" charset="{@jsEncode}"></script> <form method="post" action="{@action}"> $hidden:table:extension$ <!-- ▽ここから追加記述 --> <xsl:variable name="count" select="pager/@offset_end" /> <xsl:choose> <xsl:when test="$count = 0"> <xsl:text>[ここにデータがない時に代わりに表示したい文言、もしくはNULL]</xsl:text> </xsl:when> <xsl:otherwise> [tableタグ以降のデフォルトソース] </xsl:otherwise> </xsl:choose> <!-- △ここかまで追加記述 --> </form> </xsl:template> </xsl:stylesheet>
この記述では、データの件数をカウントし、
0件であれば「データがありません」という文言を表示し、
1件以上であれば一覧を表示するようにしています。
otherwise
タグの中には、設定デザインで作成した一覧(データ行)のソースをそのまま貼り付ければOKです。
追記が終わったら、一覧画面を表示して挙動を確認しましょう。
まとめ
otherwise
タグの中に、元の一覧のソース(データ行)を入れるおわりに
一覧にデータがないとき、ヘッダーだけが表示されていると「データが正しく表示されていないのでは?」とユーザーが不安に感じることがあります。
ヘッダーの代わりに「データがありません」とメッセージを表示すると、利用者にとって安心できる画面になります。
また、条件式や表示箇所を工夫すれば、文字色や装飾を変更したり、より分かりやすいメッセージを出すことも可能です。
ぜひ試してみてください。