プラグイン作成例
ここでは実用的なプラグインの具体例を元に、作成手順を説明します。
case4．案件登録・変更画面にて、特定の進捗状況選択時に特定の項目に値を設定する
案件の登録・変更時に、進捗状況を「案件化」以上に設定した際に「受注予定日」を入力する運用を行っているとします。
ここでは進捗状況のセレクトボックス変更の操作と連動して「受注予定日」項目に本日の日付を自動的に設定するプラグインを作成します。
ここでは進捗状況のセレクトボックス変更の操作と連動して「受注予定日」項目に本日の日付を自動的に設定するプラグインを作成します。
マニフェストファイルですが、埋め込み方式のプラグインのため、"menu_type"は0に設定します。
案件登録画面と案件変更画面に適用したいので、"target"に「2_006」と「2_007」を設定します。
他パラメータは任意に設定してください。
次にJavaScriptの実装ですが、案件登録・変更画面上の「進捗状況」項目と「受注予定日」項目を
JavaScriptから操作する必要があるので、ブラウザの開発者ツールを使用しname属性等の情報を予め調査します。
Google Chromeを例に説明します。画面上で右クリック＞検証かF12キーを押下すると、開発者ツールが起動します。
開発者ツールのElementsタブで「進捗状況」項目、および「受注予定日」項目の箇所を確認すると
「進捗状況」項目のname属性は"EXT_2_PROGRESS_CODE"「受注予定日」項目のname属性は"EXT_2_TRANS_DATE"であることがわかります。
また、処理を実施する基準となる進捗状況の選択肢「案件化」のvalueは"6"であることがわかります。
この値は環境毎の設定により変わる可能性がありますので、必ず事前に確認してください。
実装例を以下に示します。
上記実装内容を具体的に説明します。案件登録・変更画面では進捗状況を選択すると画面がリロードしますが、その動作を利用します。
$(document).ready(function() {}の内部に処理を実装することにより、画面リロード時に必ず実行されます。
進捗状況の選択値が6以上の場合に処理を実施しますが、ここで注意すべき点として
既に「受注予定日」項目に値が設定されている場合は値を変更する必要がないので処理を回避します。
条件に合致した際に、本日日付を取得して「受注予定日」項目にセットします。
日付を「YYYY-MM-DD」の文字列に変換する必要があるので、こちらも独自で実装します。
今回は関数として用意しているので、$(document).ready(function() {}の外側に記載しています。
当該プラグインをzipファイルにパッケージングし、eセールスマネージャーRemixに登録します。
案件登録画面を表示し進捗状況から「案件化」を選択すると、以下のように「受注予定日」に本日の日付が自動的に設定されるようになります。
案件登録画面と案件変更画面に適用したいので、"target"に「2_006」と「2_007」を設定します。
他パラメータは任意に設定してください。
manifest.json
{
"plugin_name": {
"ja": "受注予定日自動設定",
"en": "Trans date automatic setting",
"zh": "计划订单日期自动设置",
"ko": "주문 예정일 자동 설정"
},
"menu_type":0,
"target" : ["2_006","2_007"],
"note": {
"ja": "進捗状況が「案件化」以上で受注予定日を自動設定します。"
},
"version":"ver1.0",
"author":"eigyou.tarou"
}
次にJavaScriptの実装ですが、案件登録・変更画面上の「進捗状況」項目と「受注予定日」項目を
JavaScriptから操作する必要があるので、ブラウザの開発者ツールを使用しname属性等の情報を予め調査します。
Google Chromeを例に説明します。画面上で右クリック＞検証かF12キーを押下すると、開発者ツールが起動します。
開発者ツールのElementsタブで「進捗状況」項目、および「受注予定日」項目の箇所を確認すると
「進捗状況」項目のname属性は"EXT_2_PROGRESS_CODE"「受注予定日」項目のname属性は"EXT_2_TRANS_DATE"であることがわかります。
また、処理を実施する基準となる進捗状況の選択肢「案件化」のvalueは"6"であることがわかります。
この値は環境毎の設定により変わる可能性がありますので、必ず事前に確認してください。
実装例を以下に示します。
sample.js
$(document).ready(function(){
// 進捗状況の選択値を取得
var val = $('select[name="EXT_2_PROGRESS_CODE"] option:selected').val();
// 受注予定日が未設定で進捗状況が「案件化」以上の場合のみ実行する
if($('input[name="EXT_2_TRANS_DATE"]').val() == '' && val >= 6){
var today = dateToStr(new Date()); // 本日日付を文字列で取得
$('input[name="EXT_2_TRANS_DATE"]').val(today);
}
});
function dateToStr(date) {
var format = 'YYYY-MM-DD';
// フォーマット文字列内のキーワードを日付に置換する
format = format.replace(/YYYY/g, date.getFullYear());
format = format.replace(/MM/g, ('0' + (date.getMonth() + 1)).slice(-2));
format = format.replace(/DD/g, ('0' + date.getDate()).slice(-2));
return format;
}
上記実装内容を具体的に説明します。案件登録・変更画面では進捗状況を選択すると画面がリロードしますが、その動作を利用します。
$(document).ready(function() {}の内部に処理を実装することにより、画面リロード時に必ず実行されます。
進捗状況の選択値が6以上の場合に処理を実施しますが、ここで注意すべき点として
既に「受注予定日」項目に値が設定されている場合は値を変更する必要がないので処理を回避します。
条件に合致した際に、本日日付を取得して「受注予定日」項目にセットします。
日付を「YYYY-MM-DD」の文字列に変換する必要があるので、こちらも独自で実装します。
今回は関数として用意しているので、$(document).ready(function() {}の外側に記載しています。
当該プラグインをzipファイルにパッケージングし、eセールスマネージャーRemixに登録します。
案件登録画面を表示し進捗状況から「案件化」を選択すると、以下のように「受注予定日」に本日の日付が自動的に設定されるようになります。