技術者情報 検索画面において、検索条件の設定の簡易化・入力値の制御やチェックを行う
-
検索細画面をカスタマイズし、検索条件設定の簡易化・入力値の制御やチェックを行えるJSプラグインを紹介します。
このJSプラグインにより、チェックボックスが連動し選択肢が変化します。
チェックボックスの項目連動定義についてはREST APIを利用します。
ここではJSプラグインの実例や、プラグイン上で必要な値の確認方法を紹介します。
機能概要
1. チェックボックスが連動する前の初期表示になります。
大項目、および中項目はすべてのチェックボックスが未チェックの状態です。
2. No.7大項目の「大項目A」を選択しチェックすると、「大項目A」の配下である「中項目」のみ表示されます。
特定の検索条件の入力を満たしていなければ検索押下時に検索できないようにしています。
チェックボックス選択後、REST APIを利用した定義が取得されます。
3. No.7大項目の「大項目A」・「大項目C」を選択しチェックすると、「大項目A」・「大項目C」の配下である「中項目」のみ表示されます。
特定の検索条件の入力を満たしていなければ検索押下時に検索できないようにしています。
チェックボックス選択後、REST APIを利用した定義が取得されます。
項目対応表
No. 名前 型 1 フラグ チェックボックス 2 大項目 チェックボックス 3 中項目 チェックボックス
事前設定
顧客検索画面上に、顧客に紐づく拡張シートNo.7定義であり、No.7大項目、No.7中項目に使用する階層構造データを表現してます。
この定義から作成されたデータを元に、チェックボックスの選択時制御を行います。
※チェックボックスの項目連動定義については、別途拡張シートに定義しているものとし、REST APIで定義を取得して利用する
※本サンプルでは顧客検索を使用する
マニフェストファイルの作成
JSプラグインの動作に必要なマニフェストファイルを作成します。
詳細はJSプラグインの作成マニュアルをご覧ください。
menu_typeについては、顧客検索画面であるため「3_001」です。
manifest.json
{
"plugin_name": {
"ja": "サンプルプラグイン07",
"en": "sample plugin07",
"zh": "插件的例子07",
"ko": "샘플 플러그인07"
},
"menu_type":0,
"target" : ["3_001"],
"note": {
"ja": "検索条件の設定の簡易化・入力値の制御やチェックを行う",
"en": "Simplify search condition settings-Control and check input values",
"zh": "简化搜索条件设置-控制和检查输入值",
"ko": "검색 조건 설정의 단순화 · 입력 값의 제어 및 검사를 수행"
},
"version":"ver 1.0",
"author":"softbrain"
}
必要な値の確認
JSプラグインの動作に必要になる内部コードを確認します。
本機能で必要な値は以下です。
・REST API認証情報（APIトークン）
＜REST API認証情報（APIトークン）＞
REST APIでデータ連携を行うために必要な認証情報です。
Javascriptの作成
詳細についてはAPI連携についてを確認してください。
また認証方法は「ユーザー認証」と「APIトークン認証」に2通りありますが、今回の例では「APIトークン認証」を利用します。
実際に作成するJavascriptファイルです。
APIトークンなどは事前に確認した値を設定します。
js/sample01.js
/*!
* eSM プラグインサンプル07 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 chkVisibleDict = {};
// 大項目格納用連想配列
var chkPrimaryItemDict = {};
// 中項目格納用連想配列
var chkSecondaryItemDict = {};
// 大項目のチェックボックス名
var chkPrimaryItemName = "CUSTOMER_10097";
// 中項目のチェックボックス名
var chkSecondaryItemName = "CUSTOMER_10098";
//onSearchをフック
var origin = onSearch;
// onSearch関数を上書き
onSearch = function(){
// NOT検索の一致チェック(大項目、中項目)
if($('#select_10097_not_search').prop("checked") != $('#select_10098_not_search').prop("checked")) {
alert("No.7大項目とNo.7中項目の「NOT検索」はチェック状態を一致させてください！");
return;
}
//オリジナルのonSearchを呼び出す
return origin.apply(null, arguments);
}
/**
* チェックボックスの選択制御関数のフック
* ※対象関数が後入れのためreadyで実行
*/
function changeOnClickCheckFunction() {
//onClickAllCheckForSelectをフック
var originAllCheck = onClickAllCheckForSelect;
// onClickAllCheckForSelect関数を上書き
onClickAllCheckForSelect = function(){
//オリジナルのoriginAllCheckを呼び出す
var result = originAllCheck.apply(null, arguments);
// 大項目のチェックボックス選択制御の場合は中項目の表示設定を更新
if(arguments != null && arguments.length == 2 && arguments[1] == chkPrimaryItemName) {
setCheckboxVisible();
}
return result;
}
//onClickAllUncheckForSelectをフック
var originAllUncheck = onClickAllUncheckForSelect;
// onClickAllUncheckForSelect関数を上書き
onClickAllUncheckForSelect = function(){
//オリジナルのoriginAllUncheckを呼び出す
var result = originAllUncheck.apply(null, arguments);
// 大項目のチェックボックス選択制御の場合は中項目の表示設定を更新
if(arguments != null && arguments.length == 2 && arguments[1] == chkPrimaryItemName) {
setCheckboxVisible();
}
return result;
}
//onClickReverseForSelectをフック
var originReverse = onClickReverseForSelect;
// onClickReverseForSelect関数を上書き
onClickReverseForSelect = function(){
//オリジナルのoriginReverseを呼び出す
var result = originReverse.apply(null, arguments);
// 大項目のチェックボックス選択制御の場合は中項目の表示設定を更新
if(arguments != null && arguments.length == 2 && arguments[1] == chkPrimaryItemName) {
setCheckboxVisible();
}
return result;
}
}
/**
* チェックボックスの表示設定の構築
*/
function setCheckboxVisibleDictionary() {
// RestAPIのURLの構築
var urlStr = contextPath + restApiUrl;
// 送信データ
var data = {
searchCondition: {
targetObjectName: "customize_20134"
},
columnCodes: [10099,10100],
sortKeys: [{
columnCode: 10099,
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;
chkVisibleDict[col2] = col1;
});
}).fail(function(XMLHttpRequest, textStatus, errorThrown){
// 問題が発生した場合は警告ダイアログ表示
alert(errorThrown);
});
}
/**
* チェックボックスに変更イベントを設定
*
* @param chkGroupName チェックボックス名
*/
function setChangeEvent(chkGroupName) {
var chkBox = $('[name="' + chkGroupName + '"]')
var chkDict = {};
if(chkBox.size()) {
$(chkBox).each(function(i, o){
$(o).change(function(){
// 中項目チェックボックス表示変更設定
setCheckboxVisible();
});
});
}
return chkDict;
}
/**
* 中項目チェックボックス表示変更設定
*/
function setCheckboxVisible() {
// 大項目チェックボックス選択配列
chkArry = [];
// 大項目チェックボックスの取得
var primaryChkBox = $('[name="' + chkPrimaryItemName + '"]');
if(primaryChkBox.size()) {
$(primaryChkBox).each(function(i, o){
if($(o).prop("checked")) {
chkArry.push(getCheckboxText(o));
}
});
}
// 中項目チェックボックスの取得
var secondaryChkBox = $('[name="' + chkSecondaryItemName+ '"]');
if(secondaryChkBox.size()) {
$(secondaryChkBox).each(function(i, o){
// 選択設定に合わせて中項目の表示非表示を切り替える
if(chkArry.length == 0) {
// 大項目未選択は全表示
$(o).closest('li').show();
} else {
// 大項目の選択設定に合わせて表示切替
var text = chkVisibleDict[getCheckboxText(o)];
if($.inArray(text, chkArry) == -1) {
$(o).prop("checked", false);
$(o).closest('li').hide();
} else {
$(o).closest('li').show();
}
}
});
}
}
/**
* チェックボックスの連想配列を作成
*
* @param chkGroupName チェックボックス名
*/
function createItemDictionary(chkGroupName) {
var chkBox = $('[name="' + chkGroupName + '"]')
var chkDict = {};
if(chkBox.size()) {
$(chkBox).each(function(i, o){
var text = getCheckboxText(o);
chkDict[text] = o;
});
}
return chkDict;
}
/**
* チェックボックスのラベルを取得
*
* @param chkBox チェックボックスオブジェクト
*/
function getCheckboxText(chkBox) {
// チェックボックスのHTMLを取得
var chkHtml = $(chkBox).prop('outerHTML');
// チェックボックスの親のHTMLを取得
var parHtml = $(chkBox).parent().html();
// 親のHTMLからチェックボックスのHTMLを引く
var text = parHtml.replace(chkHtml, '');
// 改行、タブを消去 ※IE11ではtrim()効かないため
text = text.replace(/\r|\n|\t/g, "");
return text;
}
/**
* ページロード時のイベント処理
*
* 初期チェック状態の設定
* チェックボックス連動のための連想配列作成
*/
$(document).ready(function(){
// チェックボックス制御関数のフック設定
changeOnClickCheckFunction();
// 初期設定 フラグAをチェック済みにする
if($('#checkbox_10096_1').size()) {
$('#checkbox_10096_1').prop('checked', true);
}
// 大項目の連想配列作成
chkPrimaryItemDict = createItemDictionary(chkPrimaryItemName);
// 大項目のチェックボックス変更イベントリスナーを設定
setChangeEvent(chkPrimaryItemName);
// 中項目の連想配列作成
chkSecondaryItemDict = createItemDictionary(chkSecondaryItemName);
// チェックボックス非表示判定の連想配列作成(RestAPI呼び出し)
setCheckboxVisibleDictionary();
});
作成が完了したらmanifest.jsonとともにzipファイルに圧縮し、eセールスマネージャーへアップロードを行います。
仕様書
今回のサンプルプログラムの仕様書を公開しています。
以下のリンクよりダウンロードしてください。
- プログラム仕様書_顧客検索画面(検索条件の設定の簡易化・入力値の制御やチェックを行う)プラグイン (PDF 形式:1.0 MByte)
管理番号：1450 / 作成日時：
参考になりましたか？