プラグイン作成例
ここでは実用的なプラグインの具体例を元に、作成手順を説明します。
case1．顧客詳細画面にて、特定の顧客階層の場合に背景色を変更する
顧客階層化を使用している環境において、特定の顧客階層の場合にヘッダのバーの背景色を変更するプラグインを作成します。
例として上位階層に「グループ」、下位階層に「法人」の2つの顧客階層を設定している前提とします。
例として上位階層に「グループ」、下位階層に「法人」の2つの顧客階層を設定している前提とします。
まずマニフェストファイルの作成ですが、入力必須項目であるプラグイン名を設定し、
他パラメータは任意に設定してください。
次に特定の顧客階層の場合に、背景色を動的に変更するためのJavaScriptを実装します。
今回は顧客階層が上位階層である「グループ」の顧客の詳細画面で、ヘッダのバーの背景色を緑色に変更します。
まず、顧客階層項目の値を取得します。
デフォルト出力項目のdataには、顧客詳細画面の各項目のHTML要素の配列が格納されています。
eセールスマネージャーSP版の画面では、各項目の要素の識別子として「data-col-name」という属性が付与されています。
顧客階層項目では当該項目が"customer_level"となります。
続いて、顧客階層項目から、顧客階層の設定値を確認します。
eセールスマネージャーSP版の画面では、各項目の値はクラス属性が"tmpl_value"であるspanタグ内に存在します。
顧客階層項目の値は、このspanタグに付与された「data-code」属性で判断することができます。
「グループ」階層の顧客の場合、「data-code」属性が「1」になりますので、その場合にヘッダーのバーの要素を取得し、
background-colorに緑(#008000)を設定する処理を実装します。
ヘッダーのバーの要素は、顧客詳細画面の中のheaderを指定することで取得可能です。
eセールスマネージャーSP版の画面では、divタグの「name」属性に画面名が付与されています。
顧客詳細画面は"customer_detail_page"であり、これを用いて、顧客詳細画面の要素を取得できます。
画面を取得の際は、必ず疑似セレクタ「:visible」を指定し、可視状態の要素を取得するようにしてください。
JavaScript実装時の注意点として、顧客詳細画面読み込み時にプラグインの内容を実行させるため、
必ず$(window).on("esmsp.customer.detail.load", function() {}の内部に処理を実装してください。
実装例を以下に示します。
作成した「manifest.json」と「sample.js」をzipファイルにパッケージングします。
「manifest.json」はzipファイル直下に配置する必要がありますが、その他のファイルはzipファイル内のフォルダに配置しても問題ありません。
完成したプラグインのzipファイルをeセールスマネージャーRemixに登録します。
管理者メニューのシステムの設定＞環境設定からJSプラグイン一覧画面に遷移し、【SP版】プラグイン登録にて対象プラグインのzipファイルを選択してください。
登録完了後、SP版で「グループ」階層の顧客詳細画面を表示すると、以下のようにヘッダのバーの背景色が変更され、
プラグインが反映されていることが確認できます。
他パラメータは任意に設定してください。
manifest.json
{
"plugin_name": {
"ja": "サンプルプラグイン",
"en": "sample plugin",
"zh": "插件的例子",
"ko": "샘플 플러그인"
},
"note": {
"ja": "グループ階層の顧客の背景色を変更します。"
},
"version":"ver1.0",
"author":"eigyou.tarou"
}
次に特定の顧客階層の場合に、背景色を動的に変更するためのJavaScriptを実装します。
今回は顧客階層が上位階層である「グループ」の顧客の詳細画面で、ヘッダのバーの背景色を緑色に変更します。
まず、顧客階層項目の値を取得します。
デフォルト出力項目のdataには、顧客詳細画面の各項目のHTML要素の配列が格納されています。
eセールスマネージャーSP版の画面では、各項目の要素の識別子として「data-col-name」という属性が付与されています。
顧客階層項目では当該項目が"customer_level"となります。
続いて、顧客階層項目から、顧客階層の設定値を確認します。
eセールスマネージャーSP版の画面では、各項目の値はクラス属性が"tmpl_value"であるspanタグ内に存在します。
顧客階層項目の値は、このspanタグに付与された「data-code」属性で判断することができます。
「グループ」階層の顧客の場合、「data-code」属性が「1」になりますので、その場合にヘッダーのバーの要素を取得し、
background-colorに緑(#008000)を設定する処理を実装します。
ヘッダーのバーの要素は、顧客詳細画面の中のheaderを指定することで取得可能です。
eセールスマネージャーSP版の画面では、divタグの「name」属性に画面名が付与されています。
顧客詳細画面は"customer_detail_page"であり、これを用いて、顧客詳細画面の要素を取得できます。
画面を取得の際は、必ず疑似セレクタ「:visible」を指定し、可視状態の要素を取得するようにしてください。
JavaScript実装時の注意点として、顧客詳細画面読み込み時にプラグインの内容を実行させるため、
必ず$(window).on("esmsp.customer.detail.load", function() {}の内部に処理を実装してください。
実装例を以下に示します。
sample.js
$(window).on("esmsp.customer.detail.load", function(event, param){
// 引数paramから、デフォルト出力項目のdataを取得
$data = param["data"];
for (let i = 0; i < $data.length; i++){
if ($data[i].getAttribute("data-col-name") == "customer_level"){
// 顧客階層項目の場合の処理
if ($data[i].querySelector("span.tmpl_value").getAttribute("data-code") == "1"){
// 「グループ」階層の場合、ヘッダーを取得し背景色を変更
$("div.page[name='customer_detail_page']:visible header.main_header").css('background-color','#008000');
}
break;
}
}
});
作成した「manifest.json」と「sample.js」をzipファイルにパッケージングします。
「manifest.json」はzipファイル直下に配置する必要がありますが、その他のファイルはzipファイル内のフォルダに配置しても問題ありません。
完成したプラグインのzipファイルをeセールスマネージャーRemixに登録します。
管理者メニューのシステムの設定＞環境設定からJSプラグイン一覧画面に遷移し、【SP版】プラグイン登録にて対象プラグインのzipファイルを選択してください。
登録完了後、SP版で「グループ」階層の顧客詳細画面を表示すると、以下のようにヘッダのバーの背景色が変更され、
プラグインが反映されていることが確認できます。