プラグイン作成例
ここでは実用的なプラグインの具体例を元に、作成手順を説明します。
case2．顧客詳細画面にて、日付型項目から特定の日数が経過した場合に警告メッセージを表示する
case１．顧客詳細画面にて、特定の顧客階層の場合に背景色を変更する の応用版として、
プラグインのJavaScript内でREST APIを使用して独自処理を実装する方法を説明します。
ここでは顧客シートの日付型項目に登録されている日付から100日以上経過した顧客に対し
メッセージを表示させるプラグインを実現します。
プラグインのJavaScript内でREST APIを使用して独自処理を実装する方法を説明します。
ここでは顧客シートの日付型項目に登録されている日付から100日以上経過した顧客に対し
メッセージを表示させるプラグインを実現します。
シートの一覧と拡張にて、顧客シートに日付型項目を用意します。例として「最終訪問日」という項目名で作成します。
マニフェストファイルは、必須項目であるプラグイン名を設定し、
他パラメータは任意に設定してください。
次にJavaScriptの実装です。大まかな実装内容としては、REST APIのリクエストを実行し対象顧客の「最終訪問日」の値を取得します。
そして現在日付と比較して100日以上経過していれば詳細画面の顧客名の下にメッセージを追加する流れとなります。
実装例を以下に示します。
上記実装内容を具体的に説明します。
まず、デフォルト出力項目のdataから、REST APIのリクエストに必要となる、「顧客コード」を取得します。
顧客コード項目の「data-col-name」の値は"COMPANY_CODE"です。
また、顧客コード項目の場合は、値はspanタグのinnerTextで取得できます。
続いて、REST API実行の準備です。
まずは、XMLHttpRequestを用いてリクエストを生成します。
次に、生成したXMLHttpRequestオブジェクトにREST APIを利用するための設定を行います。
次にレスポンス返却後の処理をonload = function(){}の内部に実装します。
レスポンスのJSONデータから「最終訪問日」の値を取得します。
今回の例では取得項目は「最終訪問日」のみなので、data.value.item_data[0].dateで直接取得しています。
現在日付と取得した「最終訪問日」の差の日数を計算し、100日以上であれば顧客名の下にメッセージを追加する実装となっています。
メッセージに関してですが、divタグのclass属性に"alert"を付与しています。
これにより、メッセージの先頭にエラーアイコンが表示され、メッセージ全体が赤字で表示されるようになります。
なお、顧客詳細画面読み込み時にプラグインの内容を実行させるため、
必ず$(window).on("esmsp.customer.detail.load", function() {}の内部に処理を実装してください。
当該プラグインをzipファイルにパッケージングし、eセールスマネージャーRemixに登録後
「最終訪問日」から100日以上経過した顧客の詳細画面を表示すると、以下のようにメッセージが表示されるようになります。
マニフェストファイルは、必須項目であるプラグイン名を設定し、
他パラメータは任意に設定してください。
次にJavaScriptの実装です。大まかな実装内容としては、REST APIのリクエストを実行し対象顧客の「最終訪問日」の値を取得します。
そして現在日付と比較して100日以上経過していれば詳細画面の顧客名の下にメッセージを追加する流れとなります。
実装例を以下に示します。
sample.js
$(window).on("esmsp.customer.detail.load", function (event, param) {
// デフォルト出力項目のdataから、顧客コード（COMPANY_CODE）を取得
$data = param["data"];
for (let i = 0; i < $data.length; i++){
if ($data[i].getAttribute("data-col-name") == "COMPANY_CODE"){
var company_code = $data[i].querySelector("span.tmpl_value").innerText
break;
}
}
// REST APIで「最終訪問日」の値を取得し、現在日時と比較
var request = new XMLHttpRequest(); // リクエストを生成
request.open('GET', 'http://○○○/△△△/rest/v1/entity?obj=customer&columncodes=xxxxx&id='+company_code, true);
request.responseType = 'json';
request.setRequestHeader( "Content-Type", "application/json" ) ;
request.setRequestHeader( "X-Auth-API-Token", "xxxxx" ) ; // 認証情報を設定
request.onload = function () {
// レスポンス返却時の処理
var data = this.response;
var now = new Date(); // 現在日付
var lastVisitDate = Date.parse(data.value.item_data[0].date); // 対象顧客の「最終訪問日」を取得
// 差の日数を求める(86,400,000ミリ秒＝１日)
var termDay = Math.floor((now - lastVisitDate) / 86400000); // 小数点以下切り捨て
if(termDay>=100){
// エラーメッセージをヘッダー（顧客名の下部）に追加
let message = "<div class='alert validate'>最終訪問日から` + termDay + `日経過しています。</div>"
$("div.page[name='customer_detail_page']:visible div.detail_header").append(message);
}
};
request.send(); // REST APIを実行
})
上記実装内容を具体的に説明します。
まず、デフォルト出力項目のdataから、REST APIのリクエストに必要となる、「顧客コード」を取得します。
顧客コード項目の「data-col-name」の値は"COMPANY_CODE"です。
また、顧客コード項目の場合は、値はspanタグのinnerTextで取得できます。
続いて、REST API実行の準備です。
まずは、XMLHttpRequestを用いてリクエストを生成します。
次に、生成したXMLHttpRequestオブジェクトにREST APIを利用するための設定を行います。
- メソッドは"GET"で、対象環境のURLを指定します。その際にパラメータとして"obj"、"columncodes"、"id"を付与します。
- "obj"は取得対象のエンティティ名で、今回は顧客シートが対象となるため"customer"を指定します。
- "columncodes"に取得項目として「最終訪問日」の項目コードを指定します。
拡張項目の項目コードは、REST APIの"GET /entities/columns"でエンティティ名を指定して取得することができます。 - "id"には取得対象の顧客コードを指定します。
- リクエストヘッダにContent-Typeと認証情報を設定します。
次にレスポンス返却後の処理をonload = function(){}の内部に実装します。
レスポンスのJSONデータから「最終訪問日」の値を取得します。
今回の例では取得項目は「最終訪問日」のみなので、data.value.item_data[0].dateで直接取得しています。
現在日付と取得した「最終訪問日」の差の日数を計算し、100日以上であれば顧客名の下にメッセージを追加する実装となっています。
メッセージに関してですが、divタグのclass属性に"alert"を付与しています。
これにより、メッセージの先頭にエラーアイコンが表示され、メッセージ全体が赤字で表示されるようになります。
なお、顧客詳細画面読み込み時にプラグインの内容を実行させるため、
必ず$(window).on("esmsp.customer.detail.load", function() {}の内部に処理を実装してください。
当該プラグインをzipファイルにパッケージングし、eセールスマネージャーRemixに登録後
「最終訪問日」から100日以上経過した顧客の詳細画面を表示すると、以下のようにメッセージが表示されるようになります。