前ステップの値を元にタグや項目を出し分ける方法

ソース設定の登録/更新フォームブロックで、前のステップで入力した値をもとに文言や入力項目を出し分けたり、セレクトの一部のラベルだけを出力するための記述方法をご紹介いたします。

前ステップで入力した値を呼び出すには

ソース設定の登録/更新フォームでは、

inputs['f0X']

のように記述することで前のステップで入力した値を呼び出すことができます。
※セレクト、マルチセレクトフィールドはラベルIDのみが出力されます。
※「f0X」の「X」の部分はフィールドIDが入ります。
フィールドIDの確認場所

日時、日付、月日、時刻フィールドの値を呼び出す際には、以下のように単位ごとに指定する必要があります。

年	inputs['f0X:year']
月	inputs['f0X:month']
日	inputs['f0X:day']
時	inputs['f0X:hour']
分	inputs['f0X:minute']
秒	inputs['f0X:second']

前ステップで特定のフィールドが入力された場合にタグを表示

テキスト、テキストエリア、メールアドレス、セレクト、整数、数値、電話番号、ファイル、パスワード

<th:block th:if="${inputs['f0X']}">
    <!--/* 出力するタグを記載 */-->
</th:block>

マルチセレクト

<th:block th:if="${#strings.toString(inputs['f0X']) != '[]'}">
    <!--/* 出力するタグを記載 */-->
</th:block>

日時、日付

<th:block th:if="${inputs['f0X:year']}">
    <!--/* 出力するタグを記載 */-->
</th:block>

月日

<th:block th:if="${inputs['f0X:month']}">
    <!--/* 出力するタグを記載 */-->
</th:block>

時刻

<th:block th:if="${inputs['f0X:hour']}">
    <!--/* 出力するタグを記載 */-->
</th:block>

前ステップのセレクトで選択したラベルによってタグを出し分ける

<th:block th:if="${inputs['f0X'] == '1'}">
    <!--/* ラベル1が選択されている場合に出力するタグを記載 */-->
</th:block>
<th:block th:if="${inputs['f0X'] == '2'}">
    <!--/* ラベル2が選択されている場合に出力するタグを記載 */-->
</th:block>

前ステップのセレクトで選択したラベルによって現ステップでのラベルを出し分ける

「th:each」が記載されているタグに、下記の「th:if」の記述を追加します。
下記のth:ifの記述は、前ステップのセレクトのラベルが「1」のときは「1,2」を、「2」のときは「3,4」のラベルを出力する際の記述例です。

th:if="${(inputs['f0X'] == '1' AND (option.id == 1 OR option.id == 2)) OR (inputs['f0X'] == '2' AND (option.id == 3 OR option.id == 4))}"

実際のソース編集例

「f0X」の「X」は前ステップのセレクトのフィールドのIDを、「f0Y」の「Y」は現ステップのセレクトのフィールドのIDに変更してください。

ラジオ

<sp:input-field name="f0Y"></sp:input-field>
<div class="sp-form-item sp-form-field">
  <div class="sp-form-label">
    <th:block th:text="${fields['f0Y'].label}">
      Label
    </th:block>
    <span class="sp-form-required" th:if="${fields['f0Y'].required}" th:text="${fields['f0Y'].requiredIndicator}">*</span>
  </div>
  <div class="sp-form-data">
      <div class="sp-form-selection-vertical" th:switch="${inputs['f0X']}">
        <label class="sp-form-selection" th:each="option : ${fields['f0Y'].options}" th:if="${(inputs['f0X'] == '1' AND (option.id == 1 OR option.id == 2)) OR (inputs['f0X'] =='2' AND (option.id == 3 OR option.id == 4))}">
          <input type="radio" th:name="${fields['f0Y'].name}" th:value="${option.id}" th:checked="${inputs['f0Y'] == #strings.toString(option.id)}">
          <span class="sp-form-selection-label" th:text="${option.label}">Item</span>
        </label>
      </div>
    <span class="sp-form-noted" th:if="${fields['f0Y'].help != null}" th:text="${fields['f0Y'].help}">Help text</span>
    <span class="sp-form-error" th:if="${errors['f0Y'] != null}" th:text="${errors['f0Y'].message}">Error message</span>
  </div>
</div>

プルダウン

<div class="sp-form-item sp-form-field">
  <div class="sp-form-label">
    <th:block th:text="${fields['f0Y'].label}">
      Label
    </th:block>
    <span class="sp-form-required" th:if="${fields['f0Y'].required}" th:text="${fields['f0Y'].requiredIndicator}">*</span>
  </div>
  <div class="sp-form-data">
      <div class="sp-form-dropdown">
        <select class="sp-form-control" th:name="${fields['f0Y'].name}">
          <option value="" th:text="${fields['f0Y'].unselectedLabel}" th:selected="${inputs['f0Y'] == null}">Select option</option>
          <option th:each="option : ${fields['f0Y'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0Y'] == #strings.toString(option.id)}" th:if="${(inputs['f0X'] == '1' AND (option.id == 1 OR option.id == 2)) OR (inputs['f0X'] == '2' AND (option.id == 3 OR option.id == 4))}">Item</option>
        </select>
        <span class="sp-form-dropdown-icon"></span>
      </div>
    <span class="sp-form-noted" th:if="${fields['f0Y'].help != null}" th:text="${fields['f0Y'].help}">Help text</span>
    <span class="sp-form-error" th:if="${errors['f0Y'] != null}" th:text="${errors['f0Y'].message}">Error message</span>
  </div>
</div>

開発情報・ナレッジ