フォームでデータを入力する際、こんなお困りごとありませんか?
・商品一覧のExcelファイルから商品コードをコピペするのが面倒
・担当者の入れ替えがあり、その都度「担当者」の選択肢を修正しないといけない
今回は、レコードリストブロックとJavaScriptと組み合わせてデータの入力を簡単にするソースをご紹介いたします。
このソースによって、ボタンをクリックすると担当者の一覧が表示され、一覧から名前をクリックすると自動でフォームに反映すると言ったことが可能になります。
・商品一覧のExcelファイルから商品コードをコピペするのが面倒
・担当者の入れ替えがあり、その都度「担当者」の選択肢を修正しないといけない
今回は、レコードリストブロックとJavaScriptと組み合わせてデータの入力を簡単にするソースをご紹介いたします。
このソースによって、ボタンをクリックすると担当者の一覧が表示され、一覧から名前をクリックすると自動でフォームに反映すると言ったことが可能になります。
ソースコード
フォーム
・検索ボタン
クリックしたら一覧表が表示されるボタンを設置します。
URL部分を対象の一覧ページのURLに差し替えてください。
・フォームのdata-bid
URL部分を対象の一覧ページのURLに差し替えてください。
<input type="button" value="担当者検索" onClick="window.open('[一覧のページのURL]', 'new', 'width=880,height=800,scrollbars=yes,resizable=yes,status=yes')" class="searchBTN">
レコードリストブロック(一覧)
必要に応じて検索項目、表示項目を設定します。
一覧表にソースの追加は必要ありません。
一覧表にソースの追加は必要ありません。
レコードアイテムブロック(詳細ページ)
ページを表示した瞬間にフォームに値を返し、詳細ページを閉じるJavaScriptを記載します。
[反映先のフォームのdata-bid]部分を先に確認したdata-bidと差し替えてください。
選択したレコードから反映するデータはメールアドレスと名前だけなのでvalue001、value002と2セット分処理が記載されていますが、「子画面(自画面)のhiddenから値取得」、「親画面の項目取得」、「値セット」 をそれぞれ追加いただくことで反映項目を追加可能です。
・javaScript
表示の瞬間ページを閉じるため、「ページを閉じデータを反映いたします。」というメッセージと、javaScriptで値を取得するためのhiddenを用意します
反映項目を追加した場合はjavaScriptに合わせてhiddenを追加してください。
・HTML(レコードアイテム)
[反映先のフォームのdata-bid]部分を先に確認したdata-bidと差し替えてください。
選択したレコードから反映するデータはメールアドレスと名前だけなのでvalue001、value002と2セット分処理が記載されていますが、「子画面(自画面)のhiddenから値取得」、「親画面の項目取得」、「値セット」 をそれぞれ追加いただくことで反映項目を追加可能です。
・javaScript
function LCOPY() {
// 親画面のdocument取得
var openerDoc = window.opener && window.opener.document;
if (!openerDoc) return;
// 親画面の対象フォーム取得
var form = openerDoc.querySelector('[data-bid="[反映先のフォームのdata-bid]"]');
if (!form) return;
// ===== 子画面(自画面)のhiddenから値取得 =====
var value001 = document.getElementById('value001')?.value;
var value002 = document.getElementById('value002')?.value;
// ===== 親画面の項目取得 =====
var valueid001 = form.querySelector('[name="f01"]');//反映先の項目の識別名を指定
var valueid002 = form.querySelector('[name="f02"]');
// ===== 値セット =====
if (valueid001 && value001 !== undefined) valueid001.value = value001;
if (valueid002 && value002 !== undefined) valueid002.value = value002;
// ウィンドウを閉じる
window.close();
}
// 読み込み時に自動実行
document.addEventListener('DOMContentLoaded', function() {
LCOPY();
});
反映項目を追加した場合はjavaScriptに合わせてhiddenを追加してください。
・HTML(レコードアイテム)
<input type="button" value="担当者検索" onClick="window.open('[一覧のページのURL]', 'new', 'width=880,height=800,scrollbars=yes,resizable=yes,status=yes')" class="searchBTN">
最後に
以上で一覧から選択するとフォームに反映させる機能を実装可能です。
担当者を割り振る以外にも商品一覧から商品を選んだり、候補日から日程を選んだりといろんなシーンで
使用ができますのでぜひお試しください。
担当者を割り振る以外にも商品一覧から商品を選んだり、候補日から日程を選んだりといろんなシーンで
使用ができますのでぜひお試しください。