セレクトフィールド入力コントロールを変更したい

フォームブロック上でのセレクトフィールド入力コントロールは「ラジオボタン」と「プルダウン」が選択できます。
ビジュアル設定の場合はフィールド設定画面で入力コントロールの切り替えが可能ですが、ソース設定の場合はソース全体を入れ替える必要があります。

本記事ではソース入れ替え方法をご案内いたします。

なぜソースの入れ替えが必要なのか

セレクトフィールドのラジオボタンとプルダウンではソース記述が異なるため、ソースの入れ替えが必要となります。

【ラジオボタン】
<div class="sp-form-selection-vertical">
    <label class="sp-form-selection" th:each="option : ${fields['f01'].options}">
      <input type="radio" th:name="${fields['f01'].name}" th:value="${option.id}" th:checked="${inputs['f01'] == #strings.toString(option.id)}">
      <span class="sp-form-selection-label" th:text="${option.label}">Item</span>
    </label>
</div>

【プルダウン】
<div class="sp-form-dropdown">
    <select class="sp-form-control" th:name="${fields['f01'].name}">
      <option value="" th:text="${fields['f01'].unselectedLabel}" th:selected="${inputs['f01'] == null}">Select option</option>
      <option th:each="option : ${fields['f01'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f01'] == #strings.toString(option.id)}">Item</option>
    </select>
    <span class="sp-form-dropdown-icon"></span>
</div>

SPIRAL ver.2ではソース追加が容易に行えるため、
1から記述を書き直すのではなく用意されているソースに入れ替える方法がおすすめです。

本記事ではセレクトフィールドを例に説明しますが、
「日時」「日付」「月日」「時刻」フィールドの入力コントロール変更時でも同じ手順で変更可能です。

ソース入れ替え手順

（1）既存ソースを一式削除

削除する部分は、フィールド名が記載されているコメントアウトタグから
class名「sp-form-item sp-form-field」に紐づくdiv閉じタグまでです。

<!--/* セレクト(select) */--> 
  <sp:input-field name="f01"></sp:input-field> 
  <div class="sp-form-item sp-form-field">
　　　⁝
  </div>

（2）＋ボタンから「フィールド」を選択

（3）フィールド設定から該当のセレクトフィールドを追加

（4）入力コントロールを選択し、追加ボタンを押下

（5）プレビューを確認し、問題なければ保存

おまけ
ビジュアル設定のフォームブロックも、
入力コントロールのプルダウンを選択するだけで簡単に変更可能です。

最後に

設定後は動作確認を必ず行い、動作に問題がないか確認をしてください。
また、不具合や他にもこういう事やりたいなどあれば、下記の「コンテンツに関しての要望はこちら」からご連絡ください。

開発情報・ナレッジ