開発情報・ナレッジ

投稿者:SPIRERS ナレッジ向上チーム 2021年11月26日 (金)

一覧表からの情報反映

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

デモはこちら

レコードリスト

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

レコードリスト ※ リスト部分抜粋
      <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>
          </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は、登録フォーム内にセットするため、任意の名前を入れる
  document.getElementById( "inputEmail" ).value = email;
  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 でのやり方はこちら

解決しない場合はこちら コンテンツに関しての
要望はこちら