開発情報・ナレッジ

投稿者: 株式会社ゴンドラ 2025年8月19日 (火)

データ行がないときに一覧のヘッダーを非表示にする方法

データ行がないときに、一覧のヘッダーだけが表示されて「これを消したい」と思ったことはありませんか?
本記事では一覧機能の“裏ワザ”第二弾として、データ行がないときに一覧のヘッダーを非表示にする方法を紹介します。

※本方法を適用するには、xslファイルのソースを一部編集する必要があります。編集前にはバックアップを取ることをおすすめします。

完成イメージ

データが1件もない場合、一覧ヘッダーの代わりに「お問い合わせデータはありません」と表示されるようにしています。
データが入ってくると、文言の代わりに一覧が表示されます。

次項から、データがない場合の一覧の出し分け方法を説明します。

作業手順

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タグの中に、元の一覧のソース(データ行)を入れる
  • おわりに

    一覧にデータがないとき、ヘッダーだけが表示されていると「データが正しく表示されていないのでは?」とユーザーが不安に感じることがあります。
    ヘッダーの代わりに「データがありません」とメッセージを表示すると、利用者にとって安心できる画面になります。

    また、条件式や表示箇所を工夫すれば、文字色や装飾を変更したり、より分かりやすいメッセージを出すことも可能です。
    ぜひ試してみてください。

    解決しない場合はこちら コンテンツに関しての
    要望はこちら