2つのマスタDBのデータを連動プルダウンにする

こんにちは!若手エンジニアのスパ子です(‘-‘*)

今回は「部署マスタ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)

DBタイトル:workerMstDB
各フィールド設定:
・フィールド名:部署コード
   フィールドタイプ:数字・記号・アルファベット(32 bytes)
   差し替えキーワード:deptCode
・フィールド名:社員コード
   フィールドタイプ:数字・記号・アルファベット(32 bytes)
   差し替えキーワード:workerCode
・フィールド名:社員名
   フィールドタイプ:テキストフィールド(64 bytes)
   差し替えキーワード:workerName
(DBフィールド設定)
社員マスタDB

アンケートDB(通常DB)

DBタイトル:questionaryDB
各フィールド設定:
・フィールド名:部署コード
   フィールドタイプ:数字・記号・アルファベット(32 bytes)
   差し替えキーワード:deptCode
・フィールド名:部署名
   フィールドタイプ:テキストフィールド(128 bytes)
   差し替えキーワード:deptName
・フィールド名:社員コード
   フィールドタイプ:数字・記号・アルファベット(32 bytes)
   差し替えキーワード:workerCode
・フィールド名:部署名
   フィールドタイプ:テキストフィールド(64 bytes)
   差し替えキーワード:worker
・フィールド名:アンケート項目
   フィールドタイプ:セレクト
   差し替えキーワード:select
(DBフィールド設定)
アンケートDB

2. フォームの設定

アンケートDBより新規フォームを作成し、以下の設定にします。

(フォーム編集前イメージ)
フィールド設定

3. スパイラルAPIを発行

今回は「スパイラルAPI」を利用するため、スパイラル管理画面より「スパイラルAPI」を発行します。

(1)開発>スパイラルAPIをクリックします。
スパイラルAPI

(2)「トークン発行」をクリックします。
スパイラルAPI2

(3)各設定をおこない「発行する」をクリックします。
スパイラルAPI3

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();
?>
※APIタイトルとは
下記の赤枠内のことを指します。

APIタイトル
例)$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)スパイラル管理画面より、開発>カスタムプログラムをクリックします。
カスタムプログラム1

(2)新規作成をクリックします。
カスタムプログラム2

(3)各設定をおこない「作成」をクリックします。
カスタムプログラム3

(4)作成したカスタムプログラムの「編集」をクリックします。
カスタムプログラム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);
?>
※APIタイトルとは
下記の赤枠内のことを指します。

APIタイトル
例)$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>
※1APIトークンとは
下記の赤枠内のことを指します。

スパイラルAPIトークン
※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>

以上で設定は完了です。

最後まで読んでいただき、ありがとうございました(*^^*)!