5.11.3　JavaScriptプラグインパーツの使用例

(1)　ガイドバーツとRESTサーバとの連携

業務コンテンツでガイドバーツとRESTサーバを連携する場合の，JavaScriptプラグインの使用例について説明します。

■処理の概要

• テキストボックスパーツの入力値を基にRESTサーバを呼び出す。

• RESTサーバから返却された結果を，次のガイドパーツに出力する。

■RESTサーバの前提

• 呼び出し先URL：http://testserver/status

• 呼び出しパラメタ：parameter1

• 返却する結果：[{"status":0},{"status":1}]というステータスの配列

■業務フロー

図5‒12　ガイドバーツとRESTサーバの連携

■設定手順

1. クエリ入力のプロセスノードにテキストボックスパーツを配置する。

2. JavaScriptプラグインパーツを配置する。

3. JavaScriptプラグインパーツに入力パラメタを追加して，次の内容を設定する。

   図5‒13　JavaScriptプラグインパーツの設定内容（クエリ入力）

   JavaScriptプラグインパーツの設定内容を次に示します。

   • プラグイン名

   RestCheck

   • URL

   http://testserver/status

   • JavaScript

   var client = ucnpJavaScriptPluginManager.getRestClient();
   client.addParameter("parameter1", input0);
   var serverResult = client.execute();

   • パラメタ名（パーツからの入力）

   input0

   JavaScriptに記述した処理内容を次に示します。

   • テキストボックスパーツの入力値を，変数input0（入力パラメタ）から変数parameter1（呼び出しパラメタ）に設定する。

   • 返却する結果を，変数serverResultに格納する。

4. テキストボックスパーツから入力パラメタにマッピング線を引く。

   図5‒14　クエリ入力のマッピング

5. 結果出力のプロセスノードにラベルパーツを配置する。

6. 手順2と同じ名前のJavaScriptプラグインパーツを配置する。

7. JavaScriptプラグインパーツに出力パラメタを追加して，次の内容を設定する。

   図5‒15　JavaScriptプラグインパーツの設定内容（結果出力）

   JavaScriptプラグインパーツの設定内容を次に示します。

   • プラグイン名

   RestCheck

   • JavaScript

   var result = "Result:" + serverResult[0].status;

   • パラメタ名（パーツへの出力）

   result

   JavaScriptに記述した処理内容を次に示します。

   • クエリ入力に配置した同じ名前のJavaScriptプラグインパーツが変数serverResultに格納した結果のステータス配列から，先頭のstatusの値を取得し，「Result:」というリード文と連結して，変数resultに設定する。

8. 出力パラメタからラベルパーツにマッピング線を引く。

   図5‒16　結果出力のマッピング

■実行結果

この業務コンテンツを実行すると，RESTサーバから返却された結果のステータス配列[{"status":0},{"status":1}]から先頭のstatusの値を取得し，結果出力のラベルに「Result:0」が出力される。

ページの先頭へ

(2)　ガイドバーツの入力値のチェック

業務コンテンツでガイドバーツの入力値をチェックする場合の，JavaScriptプラグインの使用例について説明します。

■処理の概要

• RESTサーバから初期値を取得してガイドパーツに表示する。

• 値を入力して次へボタンをクリックすると入力値をチェックし，チェック条件を満たさない場合はエラーメッセージを出力する。

■RESTサーバの前提

• 呼び出し先URL：http://testserver:1880/restapi

• 返却する結果：{"initvalues":{"text0":"50","text1":"30"}}という初期値の配列（JSON形式）

■業務フロー

図5‒17　ガイドバーツの入力値のチェック

■設定手順

1. クエリ入力のプロセスノードにテキストボックスパーツを配置する。

2. JavaScriptプラグインパーツを配置する。

3. JavaScriptプラグインパーツに入力パラメタおよび出力パラメタを追加して，次の内容を設定する。

   図5‒18　JavaScriptプラグインパーツの設定内容（クエリ入力）

   JavaScriptプラグインパーツの設定内容を次に示します。

   • プラグイン名

   RestCheck

   • URL

   http://testserver:1880/restapi

   • JavaScript

   if (ucnpJavaScriptPluginManager.isInput()) {
     // 入力で次へボタンの時にはバリデーション実施
     var param = ucnpJavaScriptPluginManager.getParam();
     var type = param.get("ucnp.button.type");
     if (type == "show_next_page") {
       var retMap = ucnpJavaScriptPluginManager.getReturnMap();
       if (100 < input0) {
         var errorParts = new java.util.ArrayList();
         errorParts.add("input0");
         retMap.put("ucnp.error.params.list", errorParts);
         retMap.put("ucnp.error.message", "エラー!");
       }
     }
   } else {
     // 初期値取得
     var client = ucnpJavaScriptPluginManager.getRestClient();
     var serverResult = client.execute();
     var initval = serverResult.initvalues.text0;
   }

   • パラメタ名（パーツからの入力）

   input0

   • パラメタ名（パーツへの出力）

   initval

   JavaScriptに記述した処理内容を次に示します。

   • isInputメソッドの戻り値がfalseの場合は，テキストボックスパーツに初期値を表示するため，RESTサーバからinitvalues.text0の値（初期値）を取得して，出力パラメタに対応する変数initvalに設定する。

   • 戻るボタンまたは次へボタンをクリックした場合は，isInputメソッドの戻り値がtrueとなる。getParamメソッドからucnp.button.typeの値を取得してボタンの種別を判定し，show_next_page（次へボタン）の場合はバリデーション（入力値のチェック）を行う。

   • エラーメッセージを設定するためのMapオブジェクトをgetReturnMapメソッドから取得して，変数retMapに設定する。

   • テキストボックスパーツの入力値を変数input0（入力パラメタ）から取得し，100より大きい場合は，強調表示するパラメタのリストをucnp.error.params.listに設定し，「エラー!」という文字列をucnp.error.messageに設定する。

4. テキストボックスパーツから入力パラメタ，出力パラメタからテキストボックスパーツに，それぞれマッピング線を引く。

   図5‒19　クエリ入力のマッピング

■実行結果

• この業務コンテンツを実行すると，RESTサーバから返却された結果{"initvalues":{"text0":"50","text1":"30"}}から先頭の値（初期値）を取得し，初期値「50」が入力された状態でテキストボックスが表示される。

  図5‒20　初期値の表示

• テキストボックスに「101」を入力して次へボタンをクリックすると，エラーメッセージが表示され，テキストボックスが強調表示される。また，次のノードへの遷移が抑止される。

  図5‒21　エラーメッセージの表示

• 戻るボタンをクリックした場合はエラーメッセージは表示されず，テキストボックスに100以下の値を入力して次へボタンをクリックすると，エラーにならずに次のノードに遷移する。

ページの先頭へ