一覧機能の検索で、日時をカレンダーで指定できたり、チェックボックスをプルダウン形式に変えられたら便利だなと思ったことはありませんか？
本記事では、一覧機能の“裏ワザ”第四弾として、検索項目の入力タイプを変更する方法をいくつかご紹介します。
※本方法を適用するにはxslファイルを編集する必要があります。作業前にはバックアップを取ることをおすすめします。
反映イメージ
上記例では、以下の3つを実装しています。
・日時フィールド：テキスト入力からカレンダー入力へ変更
・チェックボックス：複数選択をプルダウン形式へ変更
・不要な選択肢を非表示に変更
ここから、それぞれの設定方法を順に説明します。
日時フィールドをカレンダー入力に変更
▼変更前
<!-- 登録日時 -->
<xsl:template match="usr_registDate">
<tr class="smp-sf-row">
<td class="smp-sf-head" style="border:1px solid #999999; padding:5px; font-size:9pt; color:#202020; font-weight:bold; background-color:#DEDEDE; width:150px;">
登録日時
</td>
<td class="smp-sf-body" style="border: 1px solid rgb(153, 153, 153); padding: 5px; background-color: rgb(255, 255, 255); font-size: 9pt; width: 500px;">
<table style="width:100%; font-size:inherit; font-weight:inherit; color:inherit;">
<tr>
<td>
<div>
<input type="text" name="{main/value1/@name}">
<xsl:if test=".">
<xsl:attribute name="value">
<xsl:value-of select="main/value1" />
</xsl:attribute>
</xsl:if>
</input>
から
<input type="text" name="{main/value2/@name}">
<xsl:if test=".">
<xsl:attribute name="value">
<xsl:value-of select="main/value2" />
</xsl:attribute>
</xsl:if>
</input>
まで
</div>
</td>
<td style="display:none;">
<input type="hidden" name="{option/action/@name}" value="0" />
</td>
</tr>
</table>
<span class="notice" style="font-size:9pt;">
</span>
</td>
</tr>
</xsl:template>▼変更後
<!-- 登録日時 -->
<xsl:template match="usr_registDate">
<tr class="smp-sf-row">
<td class="smp-sf-head"
style="border:1px solid #999999; padding:5px; font-size:9pt; color:#202020; font-weight:bold; background-color:#DEDEDE; width:150px;">
登録日時
</td>
<td class="smp-sf-body"
style="border: 1px solid rgb(153, 153, 153); padding: 5px; background-color: rgb(255, 255, 255); font-size: 9pt; width: 500px;">
<table style="width:100%; font-size:inherit; font-weight:inherit; color:inherit;">
<tr>
<td>
<div>
<input type="datetime-local" name="{main/value1/@name}" min="2024-07-01T00:00" max="2030-12-31T00:00">
<xsl:if test=".">
<xsl:attribute name="value">
<xsl:value-of select="main/value1" />
</xsl:attribute>
</xsl:if>
</input>
から
<input type="datetime-local" name="{main/value2/@name}" min="2024-07-01T00:00" max="2030-12-31T00:00">
<xsl:if test=".">
<xsl:attribute name="value">
<xsl:value-of select="main/value2" />
</xsl:attribute>
</xsl:if>
</input>
まで
</div>
</td>
<td style="display:none;">
<input type="hidden" name="{option/action/@name}" value="0" />
</td>
</tr>
</table>
<span class="notice" style="font-size:9pt;">
</span>
</td>
</tr>
</xsl:template>
ポイント解説
type="text" を type="datetime-local" に変更すると、日付＋時間をカレンダーから指定できるようになります。min や max 属性を指定すると、入力可能な範囲を制限できます。チェックボックスをプルダウン形式に変更
▼変更前
<!-- ステータス -->
<xsl:template match="usr_status">
<tr class="smp-sf-row">
<td class="smp-sf-head" style="border:1px solid #999999; padding:5px; font-size:9pt; color:#202020; font-weight:bold; background-color:#DEDEDE; width:150px;">
ステータス
</td>
<td class="smp-sf-body" style="border: 1px solid rgb(153, 153, 153); padding: 5px; background-color: rgb(255, 255, 255); font-size: 9pt; width: 500px;">
<table style="width:100%; font-size:inherit; font-weight:inherit; color:inherit;">
<tr>
<td>
<div>
<xsl:for-each select="main/select">
<div>
<xsl:if test="not(@newLine = 't')">
<xsl:attribute name="style">float:left;</xsl:attribute>
</xsl:if>
<label>
<span>
<input type="checkbox" name="{../@name}" value="{@value}">
<xsl:if test="@selected = 't'">
<xsl:attribute name="checked">t</xsl:attribute>
</xsl:if>
</input>
<xsl:value-of select="." />
</span>
</label>
</div>
</xsl:for-each>
</div>
</td>
<td style="display:none;">
<input type="hidden" name="{option/action/@name}" value="0" />
</td>
</tr>
</table>
<span class="notice" style="font-size:9pt;">
</span>
</td>
</tr>
</xsl:template>▼変更後
<!-- ステータス -->
<xsl:template match="usr_status">
<tr class="smp-sf-row">
<td class="smp-sf-head"
style="border:1px solid #999999; padding:5px; font-size:9pt; color:#202020; font-weight:bold; background-color:#DEDEDE; width:150px;">
ステータス
</td>
<td class="smp-sf-body" style="border: 1px solid rgb(153, 153, 153); padding: 5px; background-color: rgb(255, 255, 255); font-size: 9pt; width: 500px;">
<table style="width:100%; font-size:inherit; font-weight:inherit; color:inherit;">
<tr>
<td>
<div>
<select name="{main/@name}">
<option value="">▼選択してください。</option>
<xsl:for-each select="main/select">
<option value="{@value}">
<xsl:if test="@selected = 't'">
<xsl:attribute name="selected">t</xsl:attribute>
</xsl:if>
<xsl:value-of select="." />
</option>
</xsl:for-each>
</select>
</div>
</td>
<td style="display:none;">
<input type="hidden" name="{option/action/@name}" value="0" />
</td>
</tr>
</table>
<span class="notice" style="font-size:9pt;">
</span>
</td>
</tr>
</xsl:template>
ポイント解説
先頭に「選択してください」といった空選択肢を追加しています。
選択肢は XML の
元のチェックボックス表示部分を置き換えるだけで、簡単にプルダウンへ変更可能です。
@selected="t" を利用して初期選択状態を保持しています。<select> 要素から動的に生成しています。不要な選択肢を非表示にする
▼変更前
<!-- 重要度 -->
<xsl:template match="usr_importance">
<tr class="smp-sf-row">
<td class="smp-sf-head" style="border:1px solid #999999; padding:5px; font-size:9pt; color:#202020; font-weight:bold; background-color:#DEDEDE; width:150px;">
重要度
</td>
<td class="smp-sf-body" style="border: 1px solid rgb(153, 153, 153); padding: 5px; background-color: rgb(255, 255, 255); font-size: 9pt; width: 500px;">
<table style="width:100%; font-size:inherit; font-weight:inherit; color:inherit;">
<tr>
<td>
<div>
<xsl:for-each select="main/select">
<div>
<xsl:if test="not(@newLine = 't')">
<xsl:attribute name="style">float:left;</xsl:attribute>
</xsl:if>
<label>
<span>
<input type="checkbox" name="{../@name}" value="{@value}">
<xsl:if test="@selected = 't'">
<xsl:attribute name="checked">t</xsl:attribute>
</xsl:if>
</input>
<xsl:value-of select="." />
</span>
</label>
</div>
</xsl:for-each>
</div>
</td>
<td style="display:none;">
<input type="hidden" name="{option/action/@name}" value="0" />
</td>
</tr>
</table>
<span class="notice" style="font-size:9pt;">
</span>
</td>
</tr>
</xsl:template>▼変更後
<!-- 重要度 -->
<xsl:template match="usr_importance">
<!-- 除外する値のリスト -->
<xsl:variable name="excludedValues" select="'|5|6|7|'" />
<tr class="smp-sf-row">
<td class="smp-sf-head"
style="border:1px solid #999999; padding:5px; font-size:9pt; color:#202020; font-weight:bold; background-color:#DEDEDE; width:150px;">
重要度
</td>
<td class="smp-sf-body"
style="border: 1px solid rgb(153, 153, 153); padding: 5px; background-color: rgb(255, 255, 255); font-size: 9pt; width: 500px;">
<table style="width:100%; font-size:inherit; font-weight:inherit; color:inherit;">
<tr>
<td>
<div>
<xsl:for-each select="main/select">
<!-- 除外リストに含まれない場合に処理を実行 -->
<xsl:if test="not(contains($excludedValues, concat('|', @value, '|')))">
<div>
<xsl:if test="not(@newLine = 't')">
<xsl:attribute name="style">float:left;</xsl:attribute>
</xsl:if>
<label>
<span>
<input type="checkbox" name="{../@name}" value="{@value}">
<xsl:if test="@selected = 't'">
<xsl:attribute name="checked">t</xsl:attribute>
</xsl:if>
</input>
<xsl:value-of select="." />
</span>
</label>
</div>
</xsl:if>
</xsl:for-each>
</div>
</td>
<td style="display:none;">
<input type="hidden" name="{option/action/@name}" value="0" />
</td>
</tr>
</table>
<span class="notice" style="font-size:9pt;">
</span>
</td>
</tr>
</xsl:template>
ポイント解説
除外したい値を
「|1|2|」といった形式で区切ることで、値「12」を「1」と誤判定しないように工夫しています。
xsl:variable に保持し、判定条件で利用します。xsl:if で「除外リストに含まれていない場合のみ表示」と分岐させています。編集が完了したら、一覧画面を表示して動作を確認しましょう。
まとめ
本記事のポイント
検索項目の入力タイプは xsl の編集で柔軟に変更できる
日時は
チェックボックスをプルダウンに置き換えることで UI をすっきり整理できる
不要な選択肢は
datetime-local でカレンダー入力に切り替え可能xsl:if や xsl:variable を活用して非表示にできるおわりに
一覧機能の検索画面は、ちょっとした工夫で使いやすさが大きく変わります。
入力タイプを変更するだけでも、ユーザーの操作性やミス防止につながります。
今回紹介した方法をベースに、システムの用途にあわせてカスタマイズを広げてみてください。
【お知らせ】本実装の構築代行・カスタマイズを承ります
記事でご紹介した内容や、貴社の要件に合わせた柔軟なカスタマイズ開発を承っております。
SPIRALの専門チームが要件定義から実装まで一貫してサポートいたしますので、まずはお見積もりをご依頼ください。
