こんにちは。IISの田口です。
今回もプリザンターについての投稿です。
大変遅くなりましたが、4/13の勉強会で発表したAPI連携の実例「プルダウンの連携」について公開します。

実践内容

2つのプルダウン（親プルダウン、子プルダウン）を連携し、親プルダウンの選択結果に応じて子プルダウンの選択肢を動的に変更させます。
具体的な例では下図のような費用の勘定科目の大項目の選択内容に応じて小項目の選択肢を変化させます。
fig1_実践内容

準備

以下の2テーブルを準備します。

親テーブル
タイトルに親プルダウン（大項目）の選択肢を登録する記録テーブル
子テーブルタイトルに子プルダウン（小項目）の選択肢を登録し、分類Aは親テーブルとのリンク項目を設定した記録テーブル
テスト用テーブル分類Aは親テーブルとのリンク項目、分類Bは子テーブルとのリンク項目とした記録テーブル

事前のポイント

今回のプルダウン連動についてポイントが2点あります。

DB上は、リンク設定した子テーブルの分類項目に親テーブル側の「ID値（IssueId／ResultId）」が登録される。
今回の場合では子テーブルの分類A（テーブルカラム名：ClassA）に親テーブルのResultIdが登録されます。
リンク項目を画面表示した場合、プルダウン選択肢のタグ（optionタグ）は「ID値（IssueId／ResultId）」と「Title」で生成される。
今回の場合では分類Aのhtmlは以下のようになります。

<select id="Results_ClassA" name="Results_ClassA" class="control-dropdown">
  <option value=“ID値”>Title</option>
  ･･･
</select>

出来ました！

事前のポイントを踏まえ、分類Aの変更後イベントとして以下のスクリプトを作成しました。

$(document).on("change", "#Results_ClassA", function(){
  var childSiteId = "4";
  var selectVal = $("#Results_ClassA").val();
  var uri = $("#BaseUrl").val().replace("items", "api_items") + childSiteId + "/get";
  var json = {
    "ApiKey": "",
    "Offset": 0,
    "View": {
      "ColumnFilterHash": {
        "ClassA": "[\"" + selectVal + "\"]"
      },
      "ColumnSorterHash": {
        "Title": "asc"
      }
    }
  };
  
  $.post(uri, JSON.stringify(json),"json")
  .done(function(data){
    $("#Results_ClassB").children().remove();
    for(var item of data.Response.Data){
      $("#Results_ClassB").append($("<option>").val(item.ResultId).text(item.Title));
    }
  })
  .fail(function(){
    //alert("失敗");
  })
  .always(function(){
    //alert("完了");
  });
});

少し解説

1.イベントは要素に直接指定せずに、$(document).on()で指定する

$("#Results_ClassA").on("change", function(){・・・のように要素に直接指定すると、更新画面の右上に表示する「前」「次」「再読込」ボタンをクリックするとイベントが消えてしまいます。
プリザンターのソースコードを読んでもイベント指定は$(document).on()で登録していますので、こちらがおすすめです。

2.システム内部でAPI連携する場合、POSTするjsonファイルにはAPIキーを設定しない

マニュアルには「ユーザ毎にAPIキーを発行する必要がある」とありますが、ログインしているシステムのWebサイトと利用するAPIのWebサイトが同一の場合、APIキーを設定しなくても（空文字を設定することで）APIは動作します。
また、設定する場合は必ずログインユーザのAPIキーを設定してください。他人のAPIキーでAPI操作した場合、操作後に別の画面に遷移するとログインユーザが変わってしまいます。

3.jsonファイルの検索条件

事前のポイントにあるとおり、子テーブルに対する検索条件は「分類A＝親プルダウンの選択結果（ID値）」となりますので、ViewのColumnFilterHashに設定します。

あとはソースを読んでいただければわかるかと思いますが、APIを使って子テーブルからデータを取得し、取得したデータを使って分類Bのプルダウン選択肢を再構成することで、動的変化を実現しています。選択肢の再構成は事前のポイントにあるとおり、ID値とタイトルを使ってoptionタブを再構成します。
なお、前回の私の記事では$.ajax()でtype:"post"を指定することで、APIへjsonファイルをPOSTしましたが、今回のサンプルは$.post()で実装しました。

最後に

前回の記事ではAPIの動作確認レベルでしたが、今回はより実践的な内容でAPIを利用してみました。動的変化は個人的には一番最初に実現したかった内容でしたし、イベントの追加とAPIでのデータ連係という目線では他にも色々活用できると思います。
皆さんの参考になれば幸いです。

イメージ情報システムBlog

プリザンターのAPI連携を試してみた！（実践編）