こんにちは!若手エンジニアのスパ子です(‘-‘*)
今回は「部署マスタDB」と「社員マスタDB」の2つのデータが連動するプルダウンを設置した「社員アンケートフォーム」を作成してみました♪
文章だと分かりづらいので、とりあえずDEMOを触ってみてください!
参考DEMOはこちら 「部署」を選択すると、選択された部署に所属する「社員名」が連動して表示されます。
処理の全体像は以下となります。
▼目次
1. DBの設定(部署マスタDB、社員マスタDB、アンケートDB)
2. フォームの設定
3. スパイラルAPIを発行
4. 部署マスタDBよりプルダウン作成(全体像①)
5. 社員データ返却用カスタムプログラムの作成(全体像③)
6. 部署プルダウン変更時のjQueryを埋め込み(全体像②)
7. 入力ページ再読込時のjQueryを埋め込み
8. 「部署名」「社員名」確認ページ表示用の値を設定
1. DBの設定(部署マスタDB、社員マスタDB、アンケートDB)
プルダウン表示する「部署マスタDB」「社員マスタDB」、アンケート結果を格納する「アンケートDB」を作成します。
※当記事内でご紹介するプログラムコードでは下記のDBタイトル・差し替えキーワードを利用します。別名で設定される場合は、都度、読み替えを行ってください。
部署マスタDB(通常DB)
DBタイトル:deptMstDB
各フィールド設定:
・フィールド名:部署コード
フィールドタイプ:数字・記号・アルファベット(32 bytes)
差し替えキーワード:deptCode
・フィールド名:部署名
フィールドタイプ:テキストフィールド(128 bytes)
差し替えキーワード:deptName
(DBフィールド設定)
社員マスタDB(通常DB)
DBタイトル:workerMstDB
各フィールド設定:
・フィールド名:部署コード
フィールドタイプ:数字・記号・アルファベット(32 bytes)
差し替えキーワード:deptCode
・フィールド名:社員コード
フィールドタイプ:数字・記号・アルファベット(32 bytes)
差し替えキーワード:workerCode
・フィールド名:社員名
フィールドタイプ:テキストフィールド(64 bytes)
差し替えキーワード:workerName
(DBフィールド設定)
アンケートDB(通常DB)
DBタイトル:questionaryDB
各フィールド設定:
・フィールド名:部署コード
フィールドタイプ:数字・記号・アルファベット(32 bytes)
差し替えキーワード:deptCode
・フィールド名:部署名
フィールドタイプ:テキストフィールド(128 bytes)
差し替えキーワード:deptName
・フィールド名:社員コード
フィールドタイプ:数字・記号・アルファベット(32 bytes)
差し替えキーワード:workerCode
・フィールド名:部署名
フィールドタイプ:テキストフィールド(64 bytes)
差し替えキーワード:worker
・フィールド名:アンケート項目
フィールドタイプ:セレクト
差し替えキーワード:select
(DBフィールド設定)
2. フォームの設定
アンケートDBより新規フォームを作成し、以下の設定にします。
(フォーム編集前イメージ)
3. スパイラルAPIを発行
今回は「スパイラルAPI」を利用するため、スパイラル管理画面より「スパイラルAPI」を発行します。
(1)開発>スパイラルAPIをクリックします。
(2)「トークン発行」をクリックします。
(3)各設定をおこない「発行する」をクリックします。
4. 部署マスタDBよりプルダウン作成(全体像①)
スパイラルAPI/PHPを利用し、「部署マスタDB」のデータで部署名のプルダウンを作成します。(全体像①)
(1)アンケートフォーム>入力ページの先頭に、以下の「部署マスタDB」のデータ取得処理を貼り付けます。※部分を書き換えてください。
<!-- SMP_DYNAMIC_PAGE DISPLAY_ERRORS=ON NAME=SAMPLE --> <?php $SPIRAL->setApiTokenTitle("※上記3で発行したAPIタイトル"); $selectdb1 = $SPIRAL->getDataBase("deptMstDB"); $selectdb1->addSelectFields("deptCode", "deptName"); $selectdb1->addSortField("deptCode"); $selectdb1->setLinesPerPage(1000); $searchResult1 = $selectdb1->doSelect(); ?>
下記の赤枠内のことを指します。

例)$SPIRAL->setApiTokenTitle(“sample”);
(2)アンケートフォーム>入力ページ内の以下の「部署コード」の<input>タグを削除します。
<input class="input $errorInputColor:deptCode$" type="text" name="deptCode" value="$deptCode$" maxlength="32" >
(3)アンケートフォーム>入力ページ内の「部署コード」の<input>タグがあった場所に、以下のプルダウン作成処理を貼り付けます。
<?php $list1 = $searchResult1["data"]; echo "<select class=\"deptCode\" name=\"deptCode\">\n"; echo "<option value=\"\">選択してください</option>\n"; foreach ($list1 as $select1){ $code1 = $select1["deptCode"]; $name1 = $select1["deptName"]; $check1 =($code1 == $SPIRAL->getParam("deptCode"))?"selected":""; echo "<option value=\"${code1}\" ${check1}>$name1</option>\n"; } echo "</select> \n"; ?>
5. 社員データ返却用カスタムプログラムの作成(全体像③)
選択された「部署名(部署コード)」に一致する社員データを取得し返却するカスタムプログラムを作成します。(全体像③)
(1)スパイラル管理画面より、開発>カスタムプログラムをクリックします。
(2)新規作成をクリックします。
(3)各設定をおこない「作成」をクリックします。
(4)作成したカスタムプログラムの「編集」をクリックします。
(5)「PHPスクリプト」に以下のコードを記載します。※部分を書き換えてください。
<?php $args = $SPIRAL->getArgs(); $deptCode = $args[0]; $SPIRAL->setApiTokenTitle("※上記3で発行したAPIタイトル"); $selectDB = $SPIRAL->getDataBase("workerMstDB"); $selectDB->addSelectFields("deptCode", "workerCode", "workerName"); $selectDB->addEqualCondition("deptCode", $deptCode); $selectDB->addSortField("workerCode"); $selectDB->setLinesPerPage(1000); $result = $selectDB->doSelect(); $list = $result["data"]; $worker_list = array(); foreach ($list as $data) { $worker_list[$data['workerCode']] = $data["workerName"]; } echo json_encode($worker_list); ?>
下記の赤枠内のことを指します。

例)$SPIRAL->setApiTokenTitle(“sample”);
6. 部署プルダウン変更時のjQueryを埋め込み(全体像②)
部署プルダウンが変更された時、「部署名(部署コード)」をカスタムプログラムに送信し、戻り値の社員データで社員プルダウンを作成するプログラムを埋め込みます。(全体像②)
(1)アンケートフォーム>入力ページ内の以下の「社員コード」の<input>タグを削除します。
<input class="input $errorInputColor:workerCode$" type="text" name="workerCode" value="$workerCode$" maxlength="32" >
(2)アンケートフォーム>入力ページ内の「社員コード」の<input>タグがあった場所に、以下のプルダウン作成処理を貼り付けます。
<select class="workerCode" name="workerCode" value=""> <option value="">選択してください</option> </select>
(3)ajaxを利用するため、jQueryを読み込みます。
(4)以下のコードを入力フォームに貼り付けます。※部分を書き換えてください。
<script type="text/javascript"> $(function(){ $('[name=deptCode]').on('change', function(){ var dept_val = $(this).val(); $.ajax({ url: "https://www.pi-pe.co.jp/api/service/custom_program/run/request?spiral_api_token=※1上記3で発行したAPIトークン&title=※2上記5で作成したカスタムプログラムタイトル&arg=" + dept_val, type: 'POST', dataType: 'json', data: { dept : dept_val }, success:function(data){ $('.workerCode option').remove(); setResult(data); }, error:function(){ console.log("失敗しました"); } }); }); function setResult(data) { var jsStr = JSON.stringify(data); var jsObject = JSON.parse(jsStr); var js = JSON.parse(jsObject["output"]); $.each(js, function(workerCode, workerName){ $('.workerCode').append($('<option >').text(workerName).attr('value', workerCode)); }); } }); </script>
下記の赤枠内のことを指します。

※2カスタムプログラムタイトルとは
下記の赤枠内のことを指します。

7. 入力ページ再読込時のjQueryを埋め込み
①確認ページから「戻る」を押した場合②入力エラーとなった場合、選択した「部署名」「社員名」を再設定する処理をアンケートフォーム>入力ページ記載します。
<script> $(function() { var deptCode = $('.deptCode').val(); $.ajax({ url: "https://www.pi-pe.co.jp/api/service/custom_program/run/request?spiral_api_token=上記3で発行したAPIトークン&title=上記5で作成したカスタムプログラムタイトル&arg=" + deptCode, type: 'POST', dataType: 'json', data: { dept : deptCode }, success:function(data){ $('.workerCode option').remove(); setResult(data); }, error:function(){ console.log("失敗しました"); } }); }); function setResult(data) { var jsStr = JSON.stringify(data); var jsObject = JSON.parse(jsStr); var js = JSON.parse(jsObject["output"]); var selectWorkerCode = $('#workerCode').val(); $('.workerCode').append($('<option >').text("選択してください")); $.each(js, function(workerCode, workerName){ $('.workerCode').append($('<option >').text(workerName).attr('value', workerCode)); $('.workerCode').val(selectWorkerCode); }); }; </script>
8. 「部署名」「社員名」確認ページ表示用の値を設定
選択された「部署」「社員名」プルダウンのラベル名をテキストフォールドに格納し、確認ページで表示できるように設定します。
(1)アンケートフォーム>入力ページの黄色部分を追加します。
$form:hidden$ <input type="hidden" class="deptName" name="deptName" value="$deptName$"> <input type="hidden" class="worker" name="worker" value="$worker$"> <input type="hidden" id="workerCode" name="workerCode" value="$workerCode$">
(2)アンケートフォーム>入力ページの<form>タグにid=”check”をつけます。
<form method="post" action="/regist/Reg2" id="check">
(3)アンケートフォームの入力ページに以下の処理を追記します。
<script> $(function(){ $('#check').submit(function(){ // 選択されている「部署名」 var selectDeptCode = $('.deptCode option:selected').text(); $(".deptName").val(selectDeptCode); // 選択されている「社員名」 var selectWorkerCode = $('.workerCode option:selected').text(); $(".worker").val(selectWorkerCode); // 選択されている「社員コード」 var workerCode = $('.workerCode').val(); $("#workerCode").val(workerCode); }); }); </script>
以上で設定は完了です。
最後まで読んでいただき、ありがとうございました(*^^*)!