データ行がないときに、一覧のヘッダーだけが表示されて「これを消したい」と思ったことはありませんか?
本記事では一覧機能の“裏ワザ”第二弾として、データ行がないときに一覧のヘッダーを非表示にする方法を紹介します。
※本方法を適用するには、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タグの中に、元の一覧のソース(データ行)を入れるおわりに
一覧にデータがないとき、ヘッダーだけが表示されていると「データが正しく表示されていないのでは?」とユーザーが不安に感じることがあります。
ヘッダーの代わりに「データがありません」とメッセージを表示すると、利用者にとって安心できる画面になります。
また、条件式や表示箇所を工夫すれば、文字色や装飾を変更したり、より分かりやすいメッセージを出すことも可能です。
ぜひ試してみてください。