登録フォームを開いた際に、会員DBに登録済みのデータは自動で入力させたい場合のカスタマイズ方法をご紹介いたします。
データが引き継がれて入力の手間が省けることはもちろんのこと、他にも様々なメリットがあるため、ぜひ活用してみてください。
データが引き継がれて入力の手間が省けることはもちろんのこと、他にも様々なメリットがあるため、ぜひ活用してみてください。
イメージ
1つのフォームブロックを認証ページと非認証ページで使用し、認証ページ(ログイン時)は認証DBの中のデータを引継ぐことができます。
データを引継ぐことで、入力の手間が省けるだけでなく
・フォーム改修時に1つのフォームブロックだけを修正すればよくなる。
・会員と非会員を合算したうえでの締切設定をできる。
といったメリットもあります。
・フォーム改修時に1つのフォームブロックだけを修正すればよくなる。
・会員と非会員を合算したうえでの締切設定をできる。
といったメリットもあります。
ページ側設定
ページのPHPタブに、ログインの有無をフォームブロックに渡すための記載をします。
非認証ページ
<?php $SPIRAL->setTHValue("loginFlg",false); ?>
認証ページ
<?php $SPIRAL->setTHValue("loginFlg",true); ?>
フィールドごとのソース
"f0XX"の"XX"の個所は、登録フォームで使用しているDBのフィールドのIDに変更してください。
"siteClient.record[XX]"の"XX"の箇所は、認証DBの引継ぎたいフィールドのIDに変更してください。
ログインしていない場合は登録フォームのソースを、ログインしている場合は更新フォームのソースを表示するようにしています。
"siteClient.record[XX]"の"XX"の箇所は、認証DBの引継ぎたいフィールドのIDに変更してください。
ログインしていない場合は登録フォームのソースを、ログインしている場合は更新フォームのソースを表示するようにしています。
※「パスワード」「日時」「ファイル」は対応していません。
テキスト
<sp:input-field name="f0XX"></sp:input-field> <div class="sp-form-item sp-form-field"> <div class="sp-form-label"> <th:block th:text="${fields['f0XX'].label}"> Label </th:block> <span class="sp-form-required" th:if="${fields['f0XX'].required}" th:text="${fields['f0XX'].requiredIndicator}">*</span> </div> <div class="sp-form-data"> <th:block th:if="${#strings.toString(inputs) ne '{}' || cp.result.value['loginFlg'] eq false}"> <input type="text" class="sp-form-control" th:name="${fields['f0XX'].name}" th:value="${inputs['f0XX']}"> </th:block> <th:block th:if="${#strings.toString(inputs) eq '{}' && cp.result.value['loginFlg'] eq true}"> <input type="text" class="sp-form-control" th:name="${fields['f0XX'].name}" th:value="${siteClient.record[XX]}"> </th:block> <span class="sp-form-noted" th:if="${fields['f0XX'].help != null}" th:text="${fields['f0XX'].help}">Help text</span> <span class="sp-form-error" th:if="${errors['f0XX'] != null}" th:text="${errors['f0XX'].message}">Error message</span> </div> </div>
テキストエリア
<sp:input-field name="f0XX"></sp:input-field> <div class="sp-form-item sp-form-field"> <div class="sp-form-label"> <th:block th:text="${fields['f0XX'].label}"> Label </th:block> <span class="sp-form-required" th:if="${fields['f0XX'].required}" th:text="${fields['f0XX'].requiredIndicator}">*</span> </div> <div class="sp-form-data"> <th:block th:if="${#strings.toString(inputs) ne '{}' || cp.result.value['loginFlg'] eq false}"> <textarea class="sp-form-control" th:name="${fields['f0XX'].name}" th:text="${inputs['f0XX']}"></textarea> </th:block> <th:block th:if="${#strings.toString(inputs) eq '{}' && cp.result.value['loginFlg'] eq true}"> <textarea class="sp-form-control" th:name="${fields['f0XX'].name}" th:text="${siteClient.record[XX]}"></textarea> </th:block> <span class="sp-form-noted" th:if="${fields['f0XX'].help != null}" th:text="${fields['f0XX'].help}">Help text</span> <span class="sp-form-error" th:if="${errors['f0XX'] != null}" th:text="${errors['f0XX'].message}">Error message</span> </div> </div>
メールアドレス
<sp:input-field name="f0XX"></sp:input-field> <div class="sp-form-item sp-form-field"> <div class="sp-form-label"> <th:block th:text="${fields['f0XX'].label}"> Label </th:block> <span class="sp-form-required" th:if="${fields['f0XX'].required}" th:text="${fields['f0XX'].requiredIndicator}">*</span> </div> <div class="sp-form-data"> <th:block th:if="${#strings.toString(inputs) ne '{}' || cp.result.value['loginFlg'] eq false}"> <input type="email" class="sp-form-control" th:name="${fields['f0XX'].name}" th:value="${inputs['f0XX']}"> </th:block> <th:block th:if="${#strings.toString(inputs) eq '{}' && cp.result.value['loginFlg'] eq true}"> <input type="email" class="sp-form-control" th:name="${fields['f0XX'].name}" th:value="${siteClient.record[XX]}"> </th:block> <div th:if="${fields['f0XX'].collation}"> <span class="sp-form-email-reenter" th:text="${fields['f0XX'].reenterLabel}">Re-enter to confirm</span> <input type="email" class="sp-form-control" th:name="${fields['f0XX:reenter'].name}" th:value="${inputs['f0XX:reenter']}"> </div> <span class="sp-form-noted" th:if="${fields['f0XX'].help != null}" th:text="${fields['f0XX'].help}">Help text</span> <span class="sp-form-error" th:if="${errors['f0XX'] != null}" th:text="${errors['f0XX'].message}">Error message</span> </div> </div>
セレクト(ラジオ)
<sp:input-field name="f0XX"></sp:input-field> <div class="sp-form-item sp-form-field"> <div class="sp-form-label"> <th:block th:text="${fields['f0XX'].label}"> Label </th:block> <span class="sp-form-required" th:if="${fields['f0XX'].required}" th:text="${fields['f0XX'].requiredIndicator}">*</span> </div> <div class="sp-form-data"> <div class="sp-form-selection-vertical"> <label class="sp-form-selection" th:each="option : ${fields['f0XX'].options}"> <th:block th:if="${#strings.toString(inputs) ne '{}' || cp.result.value['loginFlg'] eq false}"> <input type="radio" th:name="${fields['f0XX'].name}" th:value="${option.id}" th:checked="${inputs['f0XX'] == #strings.toString(option.id)}"> </th:block> <th:block th:if="${#strings.toString(inputs) eq '{}' && cp.result.value['loginFlg'] eq true}"> <input type="radio" th:name="${fields['f0XX'].name}" th:value="${option.id}" th:checked="${#strings.toString(siteClient.record[XX]?.id) == #strings.toString(option.id)}"> </th:block> <span class="sp-form-selection-label" th:text="${option.label}">Item</span> </label> </div> <span class="sp-form-noted" th:if="${fields['f0XX'].help != null}" th:text="${fields['f0XX'].help}">Help text</span> <span class="sp-form-error" th:if="${errors['f0XX'] != null}" th:text="${errors['f0XX'].message}">Error message</span> </div> </div>
セレクト(プルダウン)
<sp:input-field name="f0XX"></sp:input-field> <div class="sp-form-item sp-form-field"> <div class="sp-form-label"> <th:block th:text="${fields['f0XX'].label}"> Label </th:block> <span class="sp-form-required" th:if="${fields['f0XX'].required}" th:text="${fields['f0XX'].requiredIndicator}">*</span> </div> <div class="sp-form-data"> <div class="sp-form-dropdown"> <th:block th:if="${#strings.toString(inputs) ne '{}' || cp.result.value['loginFlg'] eq false}"> <select class="sp-form-control" th:name="${fields['f0XX'].name}"> <option value="" th:text="${fields['f0XX'].unselectedLabel}" th:selected="${inputs['f0XX'] == null}">Select option</option> <option th:each="option : ${fields['f0XX'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${inputs['f0XX'] == #strings.toString(option.id)}">Item</option> </select> </th:block> <th:block th:if="${#strings.toString(inputs) eq '{}' && cp.result.value['loginFlg'] eq true}"> <select class="sp-form-control" th:name="${fields['f0XX'].name}" th:with="default=${#maps.containsKey(inputs, 'f0XX') ? inputs['f0XX'] : #strings.toString(siteClient.record[XX]?.id)}"> <option value="" th:text="${fields['f0XX'].unselectedLabel}" th:selected="${default == null}">Select option</option> <option th:each="option : ${fields['f0XX'].options}" th:value="${option.id}" th:text="${option.label}" th:selected="${default == #strings.toString(option.id)}">Item</option> </select> </th:block> <span class="sp-form-dropdown-icon"></span> </div> <span class="sp-form-noted" th:if="${fields['f0XX'].help != null}" th:text="${fields['f0XX'].help}">Help text</span> <span class="sp-form-error" th:if="${errors['f0XX'] != null}" th:text="${errors['f0XX'].message}">Error message</span> </div> </div>
マルチセレクト
<sp:input-field name="f0XX"></sp:input-field> <div class="sp-form-item sp-form-field"> <div class="sp-form-label"> <th:block th:text="${fields['f0XX'].label}"> Label </th:block> <span class="sp-form-required" th:if="${fields['f0XX'].required}" th:text="${fields['f0XX'].requiredIndicator}">*</span> </div> <div class="sp-form-data"> <div class="sp-form-selection-vertical"> <th:block th:if="${#strings.toString(inputs) ne '{}' || cp.result.value['loginFlg'] eq false}"> <label class="sp-form-selection" th:each="option : ${fields['f0XX'].options}"> <input type="checkbox" th:name="${fields['f0XX'].name}" th:value="${option.id}" th:checked="${inputs['f0XX'] != null ? #lists.contains(inputs['f0XX'], #strings.toString(option.id)) : false}"> <span class="sp-form-selection-label" th:text="${option.label}">Item</span> </label> </th:block> <th:block th:if="${#strings.toString(inputs) eq '{}' && cp.result.value['loginFlg'] eq true}"> <label class="sp-form-selection" th:with="default=${#maps.containsKey(inputs, 'f0XX') ? inputs['f0XX'] : siteClient.record[XX]?.![#strings.toString(id)]}" th:each="option : ${fields['f0XX'].options}"> <input type="checkbox" th:name="${fields['f0XX'].name}" th:value="${option.id}" th:checked="${default != null ? #lists.contains(default, #strings.toString(option.id)) : false}"> <span class="sp-form-selection-label" th:text="${option.label}">Item</span> </label> </th:block> </div> <span class="sp-form-noted" th:if="${fields['f0XX'].help != null}" th:text="${fields['f0XX'].help}">Help text</span> <span class="sp-form-error" th:if="${errors['f0XX'] != null}" th:text="${errors['f0XX'].message}">Error message</span> </div> </div>
整数
<sp:input-field name="f0XX"></sp:input-field> <div class="sp-form-item sp-form-field"> <div class="sp-form-label"> <th:block th:text="${fields['f0XX'].label}"> Label </th:block> <span class="sp-form-required" th:if="${fields['f0XX'].required}" th:text="${fields['f0XX'].requiredIndicator}">*</span> </div> <div class="sp-form-data"> <th:block th:if="${#strings.toString(inputs) ne '{}' || cp.result.value['loginFlg'] eq false}"> <input type="number" class="sp-form-control sp-form-number" th:name="${fields['f0XX'].name}" th:value="${inputs['f0XX']}"> </th:block> <th:block th:if="${#strings.toString(inputs) eq '{}' && cp.result.value['loginFlg'] eq true}"> <input type="number" class="sp-form-control sp-form-number" th:name="${fields['f0XX'].name}" th:value="${siteClient.record[XX]}"> </th:block> <span class="sp-form-noted" th:if="${fields['f0XX'].help != null}" th:text="${fields['f0XX'].help}">Help text</span> <span class="sp-form-error" th:if="${errors['f0XX'] != null}" th:text="${errors['f0XX'].message}">Error message</span> </div> </div>
数値
<sp:input-field name="f0XX"></sp:input-field> <div class="sp-form-item sp-form-field"> <div class="sp-form-label"> <th:block th:text="${fields['f0XX'].label}"> Label </th:block> <span class="sp-form-required" th:if="${fields['f0XX'].required}" th:text="${fields['f0XX'].requiredIndicator}">*</span> </div> <div class="sp-form-data"> <th:block th:if="${#strings.toString(inputs) ne '{}' || cp.result.value['loginFlg'] eq false}"> <input type="number" class="sp-form-control sp-form-number" th:name="${fields['f0XX'].name}" step="any" th:value="${inputs['f0XX']}"> </th:block> <th:block th:if="${#strings.toString(inputs) eq '{}' && cp.result.value['loginFlg'] eq true}"> <input type="number" class="sp-form-control sp-form-number" th:name="${fields['f0XX'].name}" step="any" th:value="${siteClient.record[XX]}"> </th:block> <span class="sp-form-noted" th:if="${fields['f0XX'].help != null}" th:text="${fields['f0XX'].help}">Help text</span> <span class="sp-form-error" th:if="${errors['f0XX'] != null}" th:text="${errors['f0XX'].message}">Error message</span> </div> </div>
電話番号
<sp:input-field name="f0XX"></sp:input-field> <div class="sp-form-item sp-form-field"> <div class="sp-form-label"> <th:block th:text="${fields['f0XX'].label}"> Label </th:block> <span class="sp-form-required" th:if="${fields['f0XX'].required}" th:text="${fields['f0XX'].requiredIndicator}">*</span> </div> <div class="sp-form-data"> <div class="sp-form-phone"> <th:block th:if="${#strings.toString(inputs) ne '{}' || cp.result.value['loginFlg'] eq false}"> <div class="sp-form-dropdown" th:if="${fields['f0XX'].countryCode == null}"> <select class="sp-form-control" th:name="${fields['f0XX:countryCode'].name}"> <option value="" th:text="${fields['f0XX'].unselectedCodeLabel}" th:selected="${inputs['f0XX:countryCode'] == null}">Select option</option> <option th:each="countryCode : ${fields['f0XX'].countryCodes}" th:value="${countryCode.country.alpha2Code}" th:text="|${countryCode.country.alpha2Code}(+${countryCode.code})|" th:selected="${inputs['f0XX:countryCode'] == countryCode.country.alpha2Code}">Item</option> </select> <span class="sp-form-dropdown-icon"></span> </div> <input type="tel" class="sp-form-control" th:name="${fields['f0XX'].name}" th:value="${inputs['f0XX']}"> </th:block> <th:block th:if="${#strings.toString(inputs) eq '{}' && cp.result.value['loginFlg'] eq true}"> <div class="sp-form-dropdown" th:if="${fields['f0XX'].countryCode == null}"> <select class="sp-form-control" th:name="${fields['f0XX:countryCode'].name}" th:with="defaultCountryCode=${#maps.containsKey(inputs, 'f0XX:code') ? inputs['f0XX:code'] : siteClient.record[XX]?.countryCode?.country?.alpha2Code}"> <option value="" th:text="${fields['f0XX'].unselectedCodeLabel}" th:selected="${defaultCountryCode == null}">Select option</option> <option th:each="countryCode : ${fields['f0XX'].countryCodes}" th:value="${countryCode.country.alpha2Code}" th:text="|${countryCode.country.alpha2Code}(+${countryCode.code})|" th:selected="${defaultCountryCode == countryCode.country.alpha2Code}">Item</option> </select> <span class="sp-form-dropdown-icon"></span> </div> <input type="tel" class="sp-form-control" th:name="${fields['f0XX'].name}" th:value="${#maps.containsKey(inputs, 'f0XX') ? inputs['f0XX'] : siteClient.record[XX]?.nationalNumber}"> </th:block> </div> <span class="sp-form-noted" th:if="${fields['f0XX'].help != null}" th:text="${fields['f0XX'].help}">Help text</span> <span class="sp-form-error" th:if="${errors['f0XX'] != null}" th:text="${errors['f0XX'].message}">Error message</span> </div> </div>
日付
<sp:input-field name="f0XX"></sp:input-field> <div class="sp-form-item sp-form-field"> <div class="sp-form-label"> <th:block th:text="${fields['f0XX'].label}"> Label </th:block> <span class="sp-form-required" th:if="${fields['f0XX'].required}" th:text="${fields['f0XX'].requiredIndicator}">*</span> </div> <div class="sp-form-data"> <div class="sp-form-datetimes"> <div class="sp-form-date"> <th:block th:if="${#strings.toString(inputs) ne '{}' || cp.result.value['loginFlg'] eq false}"> <input type="number" class="sp-form-control" th:name="${fields['f0XX:year'].name}" th:value="${inputs['f0XX:year']}"> <span class="sp-form-date-separator">/</span> <input type="number" class="sp-form-control" th:name="${fields['f0XX:month'].name}" th:value="${inputs['f0XX:month']}"> <span class="sp-form-date-separator">/</span> <input type="number" class="sp-form-control" th:name="${fields['f0XX:day'].name}" th:value="${inputs['f0XX:day']}"> </th:block> <th:block th:if="${#strings.toString(inputs) eq '{}' && cp.result.value['loginFlg'] eq true}"> <input type="number" class="sp-form-control" th:name="${fields['f0XX:year'].name}" th:value="${#maps.containsKey(inputs, 'f0XX:year') ? inputs['f0XX:year'] : siteClient.record[XX]?.year}"> <span class="sp-form-date-separator">/</span> <input type="number" class="sp-form-control" th:name="${fields['f0XX:month'].name}" th:value="${#maps.containsKey(inputs, 'f0XX:month') ? inputs['f0XX:month'] : siteClient.record[XX]?.month}"> <span class="sp-form-date-separator">/</span> <input type="number" class="sp-form-control" th:name="${fields['f0XX:day'].name}" th:value="${#maps.containsKey(inputs, 'f0XX:day') ? inputs['f0XX:day'] : siteClient.record[XX]?.day}"> </th:block> </div> </div> <span class="sp-form-noted" th:if="${fields['f0XX'].help != null}" th:text="${fields['f0XX'].help}">Help text</span> <span class="sp-form-error" th:if="${errors['f0XX'] != null}" th:text="${errors['f0XX'].message}">Error message</span> </div> </div>
月日
<sp:input-field name="f0XX"></sp:input-field> <div class="sp-form-item sp-form-field"> <div class="sp-form-label"> <th:block th:text="${fields['f0XX'].label}"> Label </th:block> <span class="sp-form-required" th:if="${fields['f0XX'].required}" th:text="${fields['f0XX'].requiredIndicator}">*</span> </div> <div class="sp-form-data"> <div class="sp-form-datetimes"> <div class="sp-form-date"> <th:block th:if="${#strings.toString(inputs) ne '{}' || cp.result.value['loginFlg'] eq false}"> <input type="number" class="sp-form-control" th:name="${fields['f0XX:month'].name}" th:value="${inputs['f0XX:month']}"> <span class="sp-form-date-separator">/</span> <input type="number" class="sp-form-control" th:name="${fields['f0XX:day'].name}" th:value="${inputs['f0XX:day']}"> </th:block> <th:block th:if="${#strings.toString(inputs) eq '{}' && cp.result.value['loginFlg'] eq true}"> <input type="number" class="sp-form-control" th:name="${fields['f0XX:month'].name}" th:value="${#maps.containsKey(inputs, 'f0XX:month') ? inputs['f0XX:month'] : siteClient.record[XX]?.month}"> <span class="sp-form-date-separator">/</span> <input type="number" class="sp-form-control" th:name="${fields['f0XX:day'].name}" th:value="${#maps.containsKey(inputs, 'f0XX:day') ? inputs['f0XX:day'] : siteClient.record[XX]?.day}"> </th:block> </div> </div> <span class="sp-form-noted" th:if="${fields['f0XX'].help != null}" th:text="${fields['f0XX'].help}">Help text</span> <span class="sp-form-error" th:if="${errors['f0XX'] != null}" th:text="${errors['f0XX'].message}">Error message</span> </div> </div>
時刻
<sp:input-field name="f0XX"></sp:input-field> <div class="sp-form-item sp-form-field"> <div class="sp-form-label"> <th:block th:text="${fields['f0XX'].label}"> Label </th:block> <span class="sp-form-required" th:if="${fields['f0XX'].required}" th:text="${fields['f0XX'].requiredIndicator}">*</span> </div> <div class="sp-form-data"> <div class="sp-form-datetimes"> <div class="sp-form-time"> <th:block th:if="${#strings.toString(inputs) ne '{}' || cp.result.value['loginFlg'] eq false}"> <input type="number" class="sp-form-control" th:name="${fields['f0XX:hour'].name}" th:value="${inputs['f0XX:hour']}"> <span class="sp-form-date-separator">:</span> <input type="number" class="sp-form-control" th:name="${fields['f0XX:minute'].name}" th:value="${inputs['f0XX:minute']}"> <span class="sp-form-date-separator">:</span> <input type="number" class="sp-form-control" th:name="${fields['f0XX:second'].name}" th:value="${inputs['f0XX:second']}"> </th:block> <th:block th:if="${#strings.toString(inputs) eq '{}' && cp.result.value['loginFlg'] eq true}"> <input type="number" class="sp-form-control" th:name="${fields['f0XX:hour'].name}" th:value="${#maps.containsKey(inputs, 'f0XX:hour') ? inputs['f0XX:hour'] : siteClient.record[XX]?.hour}"> <span class="sp-form-date-separator">:</span> <input type="number" class="sp-form-control" th:name="${fields['f0XX:minute'].name}" th:value="${#maps.containsKey(inputs, 'f0XX:minute') ? inputs['f0XX:minute'] : siteClient.record[XX]?.minute}"> <span class="sp-form-date-separator">:</span> <input type="number" class="sp-form-control" th:name="${fields['f0XX:second'].name}" th:value="${#maps.containsKey(inputs, 'f0XX:second') ? inputs['f0XX:second'] : siteClient.record[XX]?.second}"> </th:block> </div> </div> <span class="sp-form-noted" th:if="${fields['f0XX'].help != null}" th:text="${fields['f0XX'].help}">Help text</span> <span class="sp-form-error" th:if="${errors['f0XX'] != null}" th:text="${errors['f0XX'].message}">Error message</span> </div> </div>
ソースの編集例
登録フォームに使用している申請DBの氏名フィールドがID:1、
会員DBの呼び出したい氏名フィールドがID:2の場合は、以下のように変更します。
会員DBの呼び出したい氏名フィールドがID:2の場合は、以下のように変更します。
<input type="text" class="sp-form-control" th:name="${fields['f01'].name}" th:value="${siteClient.record[2]}">