レコードリスト（一覧表）からフォームへ反映する方法

レコードリストと JavaScript でリストの情報を入力画面に反映する方法を紹介いたします。
こちらを使って、ボタンをクリックすると担当者の一覧が表示され、IDを選択すると自動的に反映すると言ったことが可能です。デモはこちら

変更・改訂履歴

[ 2023.04.07 ] 改訂
レコードリストのaタグの閉じタグ抜けを修正
[ 2023.11.08 ] 改訂
不具合により、デモリンクを一時的に非表示
[ 2023.01.19 ] 改訂
デモリンクを追加

レコードリスト

レコードリストでは、入力画面へ反映させたい情報とクリックで発火するイベントを設定します。

レコードリスト ※ リスト部分抜粋

      <tbody> 
        <tr th:each="record, stat : ${pageRecords}">
          <!--/* (ID) (_id) */-->
          <sp:record-data-field name="f_id"></sp:record-data-field> 
          <td>
            <!-- 
              【追加】aタグを設定している箇所に データリンクにイベントを設置引数に値をセット
              カンマ区切りで入力画面へ反映したい内容を追加
              ${record['f01']} の ''内の値は、データフィールド一覧から値を選択した際に表示される name属性 となります。
            -->
            <a href="#" th:onclick="|LCOPY('${record['f01']}','${record['f02']}')|"><span th:text="${record['f_id']}">12345</span></a>
          </td> 
          <!--/* メールアドレス (email) */-->
          <sp:record-data-field name="f01"></sp:record-data-field> 
          <td>
            <span th:text="${record['f01']}">spiral@example.com</span>
          </td> 
          <!--/* 担当者名 (charge) */-->
          <sp:record-data-field name="f02"></sp:record-data-field> 
          <td>
            <span th:text="${record['f02']}">Example</span>
          </td> 
        </tr> 
      </tbody>

クリックイベントが起こった際に動作する、JavaScript のコードを記載します。

JavaScript

// イベント処理で設定している引数と同じ数だけ、関数でも引数をセット
function LCOPY(email,name){
  // 引数にセットされている値をを 入力画面にセットした値に代入
  // ""内のIDは、登録フォーム内にセットするため、任意の名前を入れる
  window.opener.document.getElementById( "inputEmail" ).value = email;
  window.opener.document.getElementById( "inputName" ).value = name;
  
  window.close();
  return;　
}

レコードリストのブロック設定が完了しましたら、ページにてブロックを埋め込みます。

登録フォーム

登録画面では、先ほど作成したレコードリストをから入力画面へ値を受け取る箇所に id を設定します。

登録フォーム

<!-- 【PB】 反映したい箇所にid の追加  -->
<input type="email" class="sp-form-control" name="f02" th:value="${inputs['f02']}" id="inputEmail"> 


<!-- 【PB】 反映したい箇所にid の追加  -->
<input type="text" class="sp-form-control" name="f03" th:value="${inputs['f03']}" id="inputName">

最後にレコードリスト画面を立ち上げるボタンの設置を行います。

登録フォーム

<!-- 【PB】 一覧表示用のボタンとなります
            ${pages['xxx'].path} の xxx の箇所には、ページリンクを追加した際に表示される値を入力してください。
 -->
<input style="width: 150px;" type="button" value="　担当者選択　" th:onclick="|window.open('${pages['xxx'].path}', 'new', 'width=880,height=800,scrollbars=yes,resizable=yes,status=yes')|">

${pages['xxx'].path} 箇所は、
「＋」ボタンよりリンクを選択し、サイト内ページ選択で、出力された値から取得します。
下記内容の href の部分となります。
この設定をしておくことで、テスト環境の場合テスト環境のURL、本番環境の場合は本番のURLに差し変わります。

<a th:href="${pages['xxx'].path}" th:text="${pages['xxx'].title ?: pages['xxx'].displayName ?: '404'}"></a>

ソースコードも添付しておきます。
① chargeList.html（担当者一覧画面ブロック要素のHTML）
　→ onclickイベント追加（引数もセット）
② chargeList.js（担当者一覧画面ブロック要素のHTML）
　→ 入力画面へ反映処理
③ appChargeSelect.html（入力画面ブロック要素のHTML）
　→ 反映する input へ id 追加
　→ 選択ボタンの設置
不具合やもっとこうしたほうがいい等あれば、リクエストボードよりご指摘ください。

ver.1 でのやり方はこちら

開発情報・ナレッジ

変更・改訂履歴

レコードリスト

登録フォーム

関連記事