TOP >技術者情報 >JSプラグイン >活動登録画面において、特定の顧客ステータスを満たしていないと進捗を選択できないようにする

技術者情報活動登録画面において、特定の顧客ステータスを満たしていないと進捗を選択できないようにする

活動詳細画面をカスタマイズし、顧客ランクに紐づき進捗を選択できないようにするJSプラグインを紹介します。
このJSプラグインにより、顧客ランク条件に満たしていない場合は進捗項目が変更不可になります。
データの登録更新処理にはREST APIを利用します。

ここではJSプラグインの実例や、プラグイン上で必要な値の確認方法を紹介します。

機能概要
活動登録画面にて活動情報を新規登録が表示されます。
・顧客ランク「D」以外(選択しない、A、B、C)は「進捗状況」セレクトボックスを選択可能
・顧客ランク「D」の場合は「進捗状況」セレクトボックスを選択不可能 ※初期値で登録される

項目対応表

No.	名前	型
1	顧客名選択（案件管理権限なし）	セレクトボックス
2	顧客名選択（案件管理権限あり）	セレクトボックス
3	進捗状況	セレクトボックス

マニフェストファイルの作成

JSプラグインの動作に必要なマニフェストファイルを作成します。
詳細はJSプラグインの作成マニュアルをご覧ください。
menu_typeについては、活動の登録画面であるため「1_004」です。

manifest.json

{
"plugin_name": {
"ja": "サンプルプラグイン03",
"en": "sample plugin03",
"zh": "插件的例子03",
"ko": "샘플 플러그인03"
},
"menu_type":0,
"target" : ["1_004"],
"note": {
"ja": "活動登録画面の進捗選択を制御する",
"en": "Control progress selection on activity registration screen",
"zh": "在活動註冊屏幕上控制進度選擇",
"ko": "활동 등록 화면의 진척 선택을 제어하는"
},
"version":"ver 1.0",
"author":"softbrain"

必要な値の確認

JSプラグインの動作に必要になる内部コードを確認します。
本機能で必要な値は以下です。
・REST API認証情報（APIトークン）

＜REST API認証情報（APIトークン）＞

REST APIでデータ連携を行うために必要な認証情報です。
詳細についてはAPI連携についてを確認してください。

また認証方法は「ユーザー認証」と「APIトークン認証」に2通りありますが、今回の例では「APIトークン認証」を利用します。

Javascriptの作成
実際に作成するJavascriptファイルです。
APIトークンなどは事前に確認した値を設定します。

js/sample01.js

/*!
* eSM プラグインサンプル03 ver 1.0
* 活動登録画面進捗セレクトボックス制御スクリプト
* https://www.softbrain.co.jp/
* Copyright (c) SOFTBRAIN Co.,Ltd.
*/

// APIトークン
var token = '96326b12-4b79-404e-bb8f-0aa90e1d99f8';
// eSMのコンテキストパスを取得
var contextPath = window.location.protocol + '//' + window.location.host + '/' + document.URL.split('/')[3];
// リクエストRestAPIのパス
var restApiUrl = '/rest/v1/entity';

//checkInputをフック
var origin = checkInput;
// checkInput関数を上書き
checkInput = function(){

// 「進捗状況」セレクトボックスが存在し、かつ表示だった場合に処理実施
var select = $('select[name=progress_code]');
if(select != null && select.css('display') != 'none') {
//「登録」ボタン押下時に無効化解除
select.prop('disabled', false);
}

//オリジナルのcheckInputを呼び出す
return origin.apply(null, arguments);
}

/**
* ページロード時のイベント処理
*
* 活動登録画面で選択された顧客のランクが「D(4)」の場合に、
* 進捗セレクトボックスを入力不可とする
*/
$(document).ready(function(){
// 顧客セレクトボックスから選択中のセールスコードを取得
var salesCode = -1;
if($('select[name=sales_code_parent]').size()) { // 案件権限がない場合
salesCode = $('select[name=sales_code_parent]').val();
} else if($('select[name=sales_code_sel_parent]').size()) { // 案件権限がある場合
salesCode = $('select[name=sales_code_sel_parent]').val();
}
// 顧客が未選択の場合は何もしない
if(salesCode == -1) {
return;
}

// 進捗状況セレクトボックスの無効化処理
setSelectboxDisabled(salesCode);
});

/**
* 進捗状況セレクトボックスの無効化判定(セールスコード)
*
* @param salesCode セールスコード
*/
function setSelectboxDisabled(salesCode) {
// セールスコードが無効でない場合にRestAPI実行
if(salesCode != -1) {
// 項目コード(顧客コード:216)
var columncodes = 216;
// RestAPIのURLの構築
var urlStr = contextPath + restApiUrl + '?obj=business&id=' + salesCode + '&columncodes=' + columncodes;

// RestAPIへリクエストを送信
$.ajax({
url:urlStr, // RestAPIのURL
type:'GET', // HTTPメソッド
headers: { // リクエストヘッダー
'X-Auth-API-Token' : token
},
dataType:'json', // 受信データタイプ
cache: false, // キャッシュを無効
timespan:1000 // タイムアウト時間(msec)
}).done(function(data){
// レスポンスから顧客コードを取得
var code = data.value.item_data[0].num;
// 顧客ランクの取得及び進捗状況セレクトボックスの無効化判定
setSelectboxDisabledFromCompanyCode(code);
}).fail(function(XMLHttpRequest, textStatus, errorThrown){
// 問題が発生した場合は警告ダイアログ表示
alert(errorThrown);
})
}
}

/**
* 進捗状況セレクトボックスの無効化判定(顧客コード)
*
* @param companyCode 顧客コード
*/
function setSelectboxDisabledFromCompanyCode(companyCode) {

// カンパニーコードが無効でない場合にRestAPI実行
if(companyCode != -1) {
// 項目コード(顧客ランク:339)
var columncodes = 339;
// RestAPIのURLの構築
var urlStr = contextPath + restApiUrl + '?obj=customer&id=' + companyCode + '&columncodes=' + columncodes;

// RestAPIへリクエストを送信
$.ajax({
url:urlStr, // RestAPIのURL
type:'GET', // HTTPメソッド
headers: { // リクエストヘッダー
'X-Auth-API-Token' : token
},
dataType:'json', // 受信データタイプ
cache: false, // キャッシュを無効
timespan:1000 // タイムアウト時間(msec)
}).done(function(data){
// レスポンスから顧客ランクを取得
var rank = data.value.item_data[0].num;

// 顧客ランクが「D(4)」の場合はセレクトボックスを無効化
if(rank == 4) {
// 「進捗状況」セレクトボックスの取得
var select = $('select[name=progress_code]');
// 「進捗状況」セレクトボックスが存在し、かつ表示されている場合に処理実施
if(select != null && select.css('display') != 'none') {
// 「進捗状況」セレクトボックスを無効化
select.prop('disabled', true);
// 「進捗状況」セレクトボックスの文字色を変更(#aaa)
select.css('color','#aaa');
}
}
}).fail(function(XMLHttpRequest, textStatus, errorThrown){
// 問題が発生した場合は警告ダイアログ表示
alert(errorThrown);
})
}
}

作成が完了したらmanifest.jsonとともにzipファイルに圧縮し、eセールスマネージャーへアップロードを行います。

仕様書
今回のサンプルプログラムの仕様書を公開しています。

以下のリンクよりダウンロードしてください。

プログラム仕様書_活動登録画面(特定の顧客ステータスを満たしていないと進捗を選択できないようにする)プラグイン (PDF 形式:1.0 MByte)

管理番号：1446 / 作成日時：

参考になりましたか？

技術者情報 活動登録画面において、特定の顧客ステータスを満たしていないと進捗を選択できないようにする

技術者情報活動登録画面において、特定の顧客ステータスを満たしていないと進捗を選択できないようにする