プラグイン作成例
ここでは実用的なプラグインの具体例を元に、作成手順を説明します。
case1．顧客詳細画面にて、特定の顧客階層の場合に背景色を変更する
顧客階層化を使用している環境において、特定の顧客階層の場合にヘッダのバーの背景色を変更するプラグインを作成します。
例として上位階層に「グループ」、下位階層に「法人」の2つの顧客階層を設定している前提とします。
例として上位階層に「グループ」、下位階層に「法人」の2つの顧客階層を設定している前提とします。
まずマニフェストファイルの作成ですが、顧客詳細画面に対しての埋め込みプラグインのため、"menu_type"は0に設定します。
対象画面は顧客詳細画面1つを対象とするため、"target"に顧客詳細画面のIDである「3_005」を設定します。
他パラメータは任意に設定してください。
次に特定の顧客階層の場合に、背景色を動的に変更するためのJavaScriptを実装します。
今回は顧客階層が上位階層である「グループ」の顧客の詳細画面で、ヘッダのバーの背景色を緑色に変更します。
顧客詳細画面には顧客階層の値を保持している"customer_level"というhiddenパラメータが存在します。
「グループ」階層の顧客の場合、当該パラメータが1になりますので、その場合にヘッダのバーの要素を取得し、
backgroundColorに緑(#008000)を設定する処理を実装します。
ヘッダのバーの要素はclass属性"pageHeadBox"を指定して取得することが可能です。
JavaScript実装時の注意点として、画面読み込み完了後にプラグインの内容を実行させるため、
必ず$(document).ready(function() {}の内部に処理を実装してください。
実装例を以下に示します。
作成した「manifest.json」と「sample.js」をzipファイルにパッケージングします。
「manifest.json」はzipファイル直下に配置する必要がありますが、その他のファイルはzipファイル内のフォルダに配置しても問題ありません。
完成したプラグインのzipファイルをeセールスマネージャーRemixに登録します。
管理者メニューのシステムの設定＞環境設定からJSプラグイン一覧画面に遷移し、プラグイン登録にて対象プラグインのzipファイルを選択してください。
登録完了後、「グループ」階層の顧客詳細画面を表示すると、以下のようにヘッダのバーの背景色が変更され、
プラグインが反映されていることが確認できます。
対象画面は顧客詳細画面1つを対象とするため、"target"に顧客詳細画面のIDである「3_005」を設定します。
他パラメータは任意に設定してください。
manifest.json
{
"plugin_name": {
"ja": "サンプルプラグイン",
"en": "sample plugin",
"zh": "插件的例子",
"ko": "샘플 플러그인"
},
"menu_type":0,
"target" : ["3_005"],
"note": {
"ja": "グループ階層の顧客の背景色を変更します。"
},
"version":"ver1.0",
"author":"eigyou.tarou"
}
次に特定の顧客階層の場合に、背景色を動的に変更するためのJavaScriptを実装します。
今回は顧客階層が上位階層である「グループ」の顧客の詳細画面で、ヘッダのバーの背景色を緑色に変更します。
顧客詳細画面には顧客階層の値を保持している"customer_level"というhiddenパラメータが存在します。
「グループ」階層の顧客の場合、当該パラメータが1になりますので、その場合にヘッダのバーの要素を取得し、
backgroundColorに緑(#008000)を設定する処理を実装します。
ヘッダのバーの要素はclass属性"pageHeadBox"を指定して取得することが可能です。
JavaScript実装時の注意点として、画面読み込み完了後にプラグインの内容を実行させるため、
必ず$(document).ready(function() {}の内部に処理を実装してください。
実装例を以下に示します。
sample.js
$(document).ready(function(){
if($('input[name="customer_level"]').val() == 1){
var elements = document.getElementsByClassName('pageHeadBox');
for(i=0;i<elements.length;i++){
elements[i].style.backgroundColor = "#008000";
}
}
});
作成した「manifest.json」と「sample.js」をzipファイルにパッケージングします。
「manifest.json」はzipファイル直下に配置する必要がありますが、その他のファイルはzipファイル内のフォルダに配置しても問題ありません。
完成したプラグインのzipファイルをeセールスマネージャーRemixに登録します。
管理者メニューのシステムの設定＞環境設定からJSプラグイン一覧画面に遷移し、プラグイン登録にて対象プラグインのzipファイルを選択してください。
登録完了後、「グループ」階層の顧客詳細画面を表示すると、以下のようにヘッダのバーの背景色が変更され、
プラグインが反映されていることが確認できます。