開発情報・ナレッジ

投稿者:SPIRERS ナレッジ向上チーム 2021年11月26日 (金)

登録データの内容に応じて一覧表の表示を出し分けする方法

スパイラルで一覧表を作成していると、「こんなことできたらいいな・・・」と感じる機会があるのではないでしょうか?

今回は、XSLソースを編集して、電話番号のフィールドに値がある場合のみ「アイコンと電話番号」を表示させて、値がない場合は「番号なし」と表示されるよう、データの出し分けをする方法をご紹介します。

デモはこちら

「設定デザイン」で一覧表の項目を設定

まずは、一覧表の「設定デザイン」で表示させたいフィールドを追加しておきます。詳しい設定方法は、スパイラルサポートサイト「一覧表・単票 」をご覧ください。

フィールドを追加したら、保存をクリックします。

「ソースデザイン」でXSLを編集する

それでは、XSLソースの構造を見ていきましょう。

【XSL】

XSLソース内「データ部分」は<table>で構成されています。

【データ部分】

上図から、<xsl:for-each select=”data/record”>以降は一覧表のフィールド(項目)の値に関する記述ということが分かります。

黄色で囲まれた部分の<xsl:choose>は、偶数行と奇数行の背景色を出しわける、場合分け処理が記載されています。この<xsl:choose>を使用して、電話番号のデータも場合分け処理させます!
「データ部分」の<xsl:value-of select=”usr_phone” />を下記のように変更すると・・・
※<xsl:value-of select=”usr_●●●●(電話番号フィールドに設定した、差替キーワードが入ります)” />

<xsl:choose>
 <xsl:when test="usr_phone != ''">
  <i class="fas fa-phone-volume"></i> <xsl:value-of select="usr_phone" />
 </xsl:when>
 <xsl:otherwise>
  電話番号なし
 </xsl:otherwise>
</xsl:choose>

※カスタマイズ後の一覧表は事前に「設定デザイン」でスタイル変更しています。

カスタマイズ完了です!

Font Awesome の追加方法電話のアイコンはFont Awesomeを使用しています。
使用する場合は、一覧表設定画面の「ページ編集」の<head>内に下記リンクを導入してください。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
解決しない場合はこちら コンテンツに関しての
要望はこちら