技術者情報 顧客登録更新画面において、入力値の制御やチェックを行う

顧客登録/登録画面をカスタマイズし、入力値の制御やチェックを行えるJSプラグインを紹介します。
このJSプラグインにより、セレクトボックスが連動し選択肢が変化します。
セレクトボックスの項目連動定義についてはREST APIを利用します。

ここではJSプラグインの実例や、プラグイン上で必要な値の確認方法を紹介します。


機能概要
1.  セレクトボックスが連動する前の初期表示になります。
    すべてのセレクトボックスが未選択の状態です。



2. No.8大項目の「大項目B」を選択しチェックすると、「大項目B」の配下である「中項目」のみ表示されます。
    特定の検索条件の入力を満たしていなければ検索押下時に検索できないようにしています。
    セレクトボックス選択後、REST APIを利用した定義が取得されます。



3. 「英数字」項目、「実数」項目に対応フォーマットで入力し、「登録」ボタンを押下します。
    No.8英数字とNo.8実数の入力フォーマットが正しいかチェックし、一致しない場合はアラートダイアログが表示されます。



項目対応表

No.	名前	型
1	大項目	セレクトボックス
2	中項目	セレクトボックス
3	英数字	テキストボックス
4	実数	テキストボックス

 

事前設定
顧客登録/変更画面上に、顧客に紐づく拡張シートNo.8定義であり、No.8大項目、No.8中項目に使用する階層構造データを表現してます。
この定義から作成されたデータを元に、セレクトボックスの選択肢が変化します。

※セレクト型項目の項目連動定義については、別途拡張シートに定義しているものとし、REST APIで定義を取得して利用する 




マニフェストファイルの作成

JSプラグインの動作に必要なマニフェストファイルを作成します。
詳細はJSプラグインの作成マニュアルをご覧ください。
menu_typeについては、顧客登録/変更画面であるため「3_006，3_007」です。

manifest.json

{     "plugin_name": {         "ja": "サンプルプラグイン08",         "en": "sample plugin08",         "zh": "插件的例子08",         "ko": "샘플 플러그인08"     },     "menu_type":0,     "target" : ["3_006","3_007"],     "note": {         "ja": "登録更新画面において、入力値の制御やチェックを行う",         "en": "Control and check the input value on the registration update screen",         "zh": "在注册更新屏幕上控制并检查输入值",         "ko": "등록 업데이트 화면에서 입력 값의 제어 및 검사를 수행"     },     "version":"ver 1.0",     "author":"softbrain" }

必要な値の確認

JSプラグインの動作に必要になる内部コードを確認します。
本機能で必要な値は以下です。
  ・REST API認証情報（APIトークン）

＜REST API認証情報（APIトークン）＞

REST APIでデータ連携を行うために必要な認証情報です。
詳細についてはAPI連携についてを確認してください。
また認証方法は「ユーザー認証」と「APIトークン認証」に2通りありますが、今回の例では「APIトークン認証」を利用します。 

Javascriptの作成

実際に作成するJavascriptファイルです。

APIトークンなどは事前に確認した値を設定します。 

js/sample01.js

/*! * eSM プラグインサンプル08 ver 1.0 * 顧客登録変更画面 項目制御スクリプト * https://www.softbrain.co.jp/ * Copyright (c) SOFTBRAIN Co.,Ltd. */  // APIトークン var token = '968dea36-1137-42d3-bb81-cdeb0a806103'; // eSMのコンテキストパスを取得 var contextPath = window.location.protocol + '//' + window.location.host + '/' + document.URL.split('/')[3]; // リクエストRestAPIのパス var restApiUrl = '/rest/v1/entities/search'; // 選択定義格納用連想配列  var selVisibleDict = {}; // 大項目のセレクトボックス名 var selPrimaryItemName = "EXT_3_CUST_SELECT_4"; // 中項目のセレクトボックス名 var selSecondaryItemName = "EXT_3_CUST_SELECT_3"; // 中項目の初期表示選択のバックアップ  var selOrigOptions = [];   // 変更ボタン用関数の存在チェック  if(typeof submitForm == "function")  {      //submitFormをフック     var origin = submitForm;     // submitForm関数を上書き     submitForm = function(){         // 入力値のフォーマットチェック         if(!checkInputFormat()) {             return;          }             //オリジナルのsubmitFormを呼び出す         return origin.apply(null, arguments);      } } // 登録ボタン用関数の存在チェック  if(typeof check_text == "function")  {       //check_textをフック     var origin = check_text;     // check_text関数を上書き     check_text = function(){         // 入力値のフォーマットチェック          if(!checkInputFormat()) {              return;         }          //オリジナルのcheck_textを呼び出す         return origin.apply(null, arguments);     }   }  /**   * 入力値のチェック  */  function checkInputFormat() {      var result = true;      // 英数字チェック     var inputChar = $('input:text[name="EXT_3_CUST_VARCHAR_1"]');     if(inputChar.size() && $(inputChar).val().length > 0 && !$(inputChar).val().match(/^[A-Za-z0-9]*$/)) {         alert('No.8英数字の入力値が不正です。英数字のみ入力可能です。');          result = false;     }      // 実数チェック      var inputNum = $('input:text[name="EXT_3_CUST_VARCHAR_2"]');     if(inputNum.size() && $(inputNum).val().length > 0 && !$(inputNum).val().match(/^[-]*([1-9]\d*|0)(\.\d+)$/)) {         alert('No.8実数の入力値が不正です。実数(例:1.1)のみ入力可能です。');          result = false;      }     return result; } /**   * チェックボックスの表示設定の構築  */  function setSelectboxVisibleDictionary() {      // RestAPIのURLの構築     var urlStr = contextPath + restApiUrl;       // 送信データ     var data = {         searchCondition: {             targetObjectName: "customize_20135"         },         columnCodes: [10106,10107],         sortKeys: [{              columnCode: 10106,             desc: false          }],         fromIndex: 1     };      // RestAPIへリクエストを送信     $.ajax({         url:urlStr, // RestAPIのURL           type:'POST', // HTTPメソッド         headers: { // リクエストヘッダー             'X-Auth-API-Token' : token         },         contentType: 'application/json',         data:JSON.stringify(data),         dataType:'json', // 受信データタイプ          cache: false, // キャッシュを無効          timespan:1000 // タイムアウト時間(msec)      }).done(function(data){         // レスポンスから定義データを取得         var values = data.values;          $(values).each(function(i, o){             var col1 = o.item_data[0].text;             var col2 = o.item_data[1].text;             selVisibleDict[col2] = col1;         });         // 選択の削除          setCheckboxVisible(false);     }).fail(function(XMLHttpRequest, textStatus, errorThrown){         // 問題が発生した場合は警告ダイアログ表示         alert(errorThrown);     }); }  /**  * セレクトボックスに変更イベントを設定  *   * @param selBoxName セレクトボックス名   */   function setChangeEvent(selBoxName) {     var selBox = $('[name="' + selBoxName + '"]')      var selDict = {};     if(selBox.size()) {         $(selBox).change(function(){              // 中項目セレクトボックス表示変更設定              setCheckboxVisible(true);         });      }      return selDict;  }  /**   * 中項目セレクトボックス表示変更設定  */  function setCheckboxVisible(remove) {     // 大項目セレクトボックスの取得     var primarySelBox = $('[name="' + selPrimaryItemName + '"]');     if(primarySelBox.size()) {          // 大項目セレクトボックス選択取得         var priVal = $(primarySelBox).val();          var priText = $(primarySelBox).find('option:selected').text();         // 中項目チェックボックスの取得          var secondarySelBox = $('[name="' + selSecondaryItemName+ '"]');         if(secondarySelBox.size()) {              var options = $(secondarySelBox).find('option');              if(options.size() && remove == true) {                 // すべての要素を一旦消す                  $(options).each(function(i, o){                      $(o).remove();                 });                 // 初期の選択を追加                 $(selOrigOptions).each(function(i, o){                     $(secondarySelBox).append(o);                 });             }               // 不要な選択を消す              var newOptions = $(secondarySelBox).find('option');             if(newOptions.size()) {                 $(newOptions).each(function(i, o){                     // 選択設定に合わせて中項目の表示非表示を切り替える                     if(priVal != 0) {                         // 大項目の選択設定に合わせて表示切替                         var text = selVisibleDict[$(o).html()];                          if($(o).val() != 0 && priText != text) {                              $(o).remove();                         }                     }                  });             }          }      }  } /**   * セレクトボックスの連想配列を作成  *  * @param selBoxName セレクトボックス名  */  function createItemDictionary(selBoxName) {      var selBox = $('[name="' + selBoxName + '"]');      var selDict = {};     if(selBox.size()) {          var options = $(selBox).find('option');         if(options.size()) {             $(options).each(function(i, o){                 var text = $(o).html();                  selDict[text] = o;             });          }      }      return selDict; }   /**   * セレクトボックスの選択を取得   *  * @param selBoxName セレクトボックス名  */  function getSelectboxOptions(selBoxName) {     var selBox = $('[name="' + selBoxName + '"]');     var origOptions = [];     if(selBox.size()) {         var options = $(selBox).find('option');         if(options.size()) {             $(options).each(function(i, o){                 // optionのHTMLを配列に格納                 origOptions.push($(o).prop('outerHTML'));             });         }     }     return origOptions; }  /**  * ページロード時のイベント処理  *   * 初期チェック状態の設定  * チェックボックス連動のための連想配列作成  */ $(document).ready(function(){     // 大項目のセレクトボックス変更イベントリスナーを設定     setChangeEvent(selPrimaryItemName);     // 中項目の初期選択のbackup取得     selOrigOptions = getSelectboxOptions(selSecondaryItemName);     // チェックボックス非表示判定の連想配列作成(RestAPI呼び出し)     setSelectboxVisibleDictionary(); });

 
作成が完了したらmanifest.jsonとともにzipファイルに圧縮し、eセールスマネージャーへアップロードを行います。 
 
仕様書
今回のサンプルプログラムの仕様書を公開しています。
以下のリンクよりダウンロードしてください。     
 

管理番号：1451 / 作成日時：