コンテンツにスキップ

$p.setMessage

概要

任意のメッセージや、エラーを表示したいとき画面下部に任意のメッセージを表示させるメソッドの説明になります。

構文

JavaScript
$p.setMessage('#Message', JSON.stringify({
    Css: <メッセージタイプ>,
    Text: <任意のメッセージ>
}));

メッセージタイプ

種類 説明
alert-success 正常を表す、緑色のメッセージ欄
alert-warning 注意を表す、黄色のメッセージ欄
alert-error 異常を表す、赤色のメッセージ欄

使用例

JavaScript
$p.setMessage('#Message', JSON.stringify({
    Css: 'alert-success',
    Text: '処理が正常に終了しました。'
}));

サンプルコード

Note

コード内の【 ... 】は適宜修正してください。

1. 経費種別・金額に応じて申請時の承認・決裁の要否を制御する

経費種別(通常/出張)ごとに異なる上限額を持たせ、申請金額が部長承認ラインを超えると承認チェックを自動でONにし警告を表示、社長決裁ラインを超えると決裁チェックを自動でONにしエラーを表示します。通常の保存(下書き)はいつでも行えますが、プロセス機能で追加した「申請」ボタンを押したときに限って、承認・決裁が必要な金額なのに担当者(承認者/決裁者)が未選択だと申請を中断します。

実務での使いどころ

経費申請のような、金額次第で承認フローが変わる業務でそのまま使えます。金額を入力した時点でその場で承認・決裁の要否が分かるため、後から「この金額なら部長承認が必要でした」と差し戻される手戻りを防げます。通常の保存ボタンでは検証を行わないため、入力途中のレコードを何度でも下書き保存できます。承認・決裁の要否を確定させたいタイミング(申請)に限って、担当者の指定を必須にできます。編集時の申請にも同じ検証が効くので、既存の申請の金額を後から書き換えて上限を超えてしまうケースも拾えます。さらに、出張費は通常経費より上限が高い、といった経費種別ごとの基準の違いにも対応できます。

条件と表示の対応表

経費種別 申請金額 承認チェック 決裁チェック メッセージ 下書き保存 申請
通常 10,000円以下 OFF OFF なし 可 可
通常 10,001円〜50,000円 ON OFF 警告(黄) 可 承認者選択で可
通常 50,001円以上 ON ON エラー(赤) 可 承認者・決裁者選択で可
出張 30,000円以下 OFF OFF なし 可 可
出張 30,001円〜100,000円 ON OFF 警告(黄) 可 承認者選択で可
出張 100,001円以上 ON ON エラー(赤) 可 承認者・決裁者選択で可

通常のbefore_validateのみでは実現できない理由

通常の「作成」「更新」ボタンと、プロセス機能で追加した「申請」ボタンは、どちらもbefore_validate_Create / before_validate_Updateに渡ってくるdata-actionが同じ「Create」「Update」であるため、ボタンの種類では区別できません。実際に押されたボタンのid(args.$control.attr('id'))で判定する必要があり、プロセスのボタンにはプリザンターが自動で「Process_1」のようなidを割り当てるため、通常ボタン(CreateCommand / UpdateCommand)と区別できます。

事前準備

1:テーブルに下記の項目を有効化します。

項目種別 項目コード 表示名 用途
数値A NumA 申請金額 申請金額を入力
チェックA CheckA 承認 一定額を超えた申請に自動でチェックが入る欄
チェックB CheckB 決裁 社長決裁ラインを超えた申請に自動でチェックが入る欄
分類A ClassA 承認者(上長) 選択肢一覧にユーザーを設定。申請者が選択します
分類B ClassB 経費種別 選択肢一覧に「通常」「出張」を設定
分類C ClassC 決裁者(社長) 選択肢一覧にユーザーを設定。申請者が選択します

2:「テーブルの管理 > プロセス」で「申請」ボタンを追加します(新規作成画面・編集画面それぞれに1つずつ)。

設定項目 設定値
画面種別 新規作成(もう1つは編集)
現在の状況 *
実行種別 追加したボタン
アクション種別 保存
成功メッセージ 「申請を受け付けました。」など任意の文言(申請完了が画面上で分かりやすくなります)

※ボタンのidはプリザンターが自動で割り当てるため、設定は不要です。

3:スクリプトを登録します。

設定項目 設定値
タイトル 任意の名前(例:経費申請金額チェック)
スクリプト 下記サンプルコードを貼り付けます
出力先 「新規作成」と「編集」の両方にチェックします
JavaScript
/**
 * ================================================================
 * サンプル  経費種別・金額に応じて申請時の承認・決裁の要否を制御する
 * ================================================================
 *
 * 【概要】
 *   経費種別(通常/出張)ごとに異なる上限額を持たせ、申請金額が部長承認ラインを
 *   超えると承認チェックを自動でONにし警告を表示、社長決裁ラインを超えると決裁
 *   チェックを自動でONにしエラーを表示します。通常の保存(下書き)はいつでも
 *   行えますが、プロセス機能で追加した「申請」ボタンを押したときだけ、承認・決裁
 *   が必要な金額なのに担当者(承認者/決裁者)が未選択だと申請を中断します。
 *
 *   条件と表示の対応表
 *     | 経費種別 | 申請金額             | 承認チェック | 決裁チェック | メッセージ   | 下書き保存 | 申請 |
 *     |----------|----------------------|--------------|--------------|--------------|------------|------|
 *     | 通常     | 10,000円以下         | OFF          | OFF          | なし         | 可         | 可   |
 *     | 通常     | 10,001円〜50,000円   | ON           | OFF          | 警告(黄)   | 可         | 承認者選択で可 |
 *     | 通常     | 50,001円以上         | ON           | ON           | エラー(赤) | 可         | 承認者・決裁者選択で可 |
 *     | 出張     | 30,000円以下         | OFF          | OFF          | なし         | 可         | 可   |
 *     | 出張     | 30,001円〜100,000円  | ON           | OFF          | 警告(黄)   | 可         | 承認者選択で可 |
 *     | 出張     | 100,001円以上        | ON           | ON           | エラー(赤) | 可         | 承認者・決裁者選択で可 |
 *
 * 【ポイント】
 *   経費申請のような、金額次第で承認フローが変わる業務でそのまま使えます。金額を
 *   入力した時点でその場で承認・決裁の要否が分かるため、後から「この金額なら部長
 *   承認が必要でした」と差し戻される手戻りを防げます。
 *   通常の保存ボタンでは検証を行わないため、入力途中のレコードを何度でも下書き
 *   保存できます。承認・決裁の要否を確定させたいタイミング(申請)だけ、担当者の
 *   指定を必須にできます。編集時の申請にも同じ検証が効くので、既存の申請の金額を
 *   後から書き換えて上限を超えてしまうケースも拾えます。
 *   さらに、出張費は通常経費より上限が高い、といった経費種別ごとの基準の違いにも
 *   対応できます。
 *
 * 【なぜ通常の before_validate だけでは実現できないか】
 *   通常の「作成」「更新」ボタンと、プロセス機能で追加した「申請」ボタンは、
 *   どちらも before_validate_Create / before_validate_Update に渡ってくる
 *   data-action が同じ「Create」「Update」であるため、ボタンの種類だけでは
 *   区別できません。実際に押されたボタンの id(args.$control.attr('id'))で
 *   判定する必要があり、プロセスのボタンには Pleasanter が自動で「Process_1」
 *   のような id を割り当てるため、通常ボタン(CreateCommand / UpdateCommand)
 *   と区別できます。
 *
 * 【使い方】
 *   事前準備として、テーブルに以下の項目を有効化してください。
 *     ・数値A(項目コード:NumA)        :申請金額を入力
 *     ・チェックA(項目コード:CheckA、表示名:承認):一定額を超えた申請に
 *                                          自動でチェックが入る欄
 *     ・チェックB(項目コード:CheckB、表示名:決裁):社長決裁ラインを超えた
 *                                          申請に自動でチェックが入る欄
 *     ・分類A(項目コード:ClassA)      :選択肢一覧にユーザーを設定した
 *                                          「承認者(上長)」欄。申請者が選択する。
 *     ・分類B(項目コード:ClassB)      :選択肢一覧に「通常」「出張」を設定した
 *                                          「経費種別」欄
 *     ・分類C(項目コード:ClassC)      :選択肢一覧にユーザーを設定した
 *                                          「決裁者(社長)」欄。申請者が選択する。
 *   下記の AMOUNT_COLUMN / APPROVAL_COLUMN / APPROVER_COLUMN / CATEGORY_COLUMN /
 *   DECISION_COLUMN / DECIDER_COLUMN を、実際のカラム名に置き換えてください。
 *   APPROVAL_LIMITS の上限額も業務に合わせて変更してください。
 *   「テーブルの管理 > スクリプト」タブで新規作成し、出力先は「新規作成」「編集」
 *   の両方にチェックしてください。
 *   あわせて「テーブルの管理 > プロセス」で「申請」ボタンを追加してください
 *   (画面種別:新規作成と編集それぞれに1つずつ、現在の状況:*、実行種別:追加した
 *   ボタン、アクション種別:保存)。ボタンの id は Pleasanter が自動で割り当てる
 *   ため、設定は不要です。成功メッセージ欄に「申請を受け付けました。」のように
 *   入力しておくと、申請が完了したことを画面上で分かりやすく伝えられます。
 * ================================================================
 */

const AMOUNT_COLUMN = 'NumA';       // 申請金額の項目コード
const APPROVAL_COLUMN = 'CheckA';   // 承認チェックの項目コード
const DECISION_COLUMN = 'CheckB';   // 決裁チェックの項目コード
const APPROVER_COLUMN = 'ClassA';   // 承認者(上長)の項目コード
const CATEGORY_COLUMN = 'ClassB';   // 経費種別の項目コード
const DECIDER_COLUMN = 'ClassC';    // 決裁者(社長)の項目コード

// 経費種別ごとの上限額(円)
const APPROVAL_LIMITS = {
    '通常': { manager: 10000, president: 50000 },
    '出張': { manager: 30000, president: 100000 }
};
const DEFAULT_LIMITS = APPROVAL_LIMITS['通常']; // 種別未選択時のフォールバック

function getLimits() {
    const category = $p.getValue(CATEGORY_COLUMN);
    return APPROVAL_LIMITS[category] || DEFAULT_LIMITS;
}

function checkAmount(clearIfNoWarning) {
    // 数値項目は $p.getValue だと入力中の値を取得できないため、
    // $p.getControl().val() で画面の値を直接読む(詳細は下記【使い方】参照)
    const amount = Number($p.getControl(AMOUNT_COLUMN).val());
    const limits = getLimits();
    const needsManagerApproval = amount > limits.manager;
    const needsPresidentDecision = amount > limits.president;

    $p.set($p.getControl(APPROVAL_COLUMN), needsManagerApproval);
    $p.set($p.getControl(DECISION_COLUMN), needsPresidentDecision);

    // 担当者が未選択のときだけ警告する。選択済みなら「申請可能」なので
    // 表示しない(選択後も警告が出たままだと申請できるか分かりにくいため)。
    if (needsPresidentDecision && !$p.getValue(DECIDER_COLUMN)) {
        $p.clearMessage();
        $p.setMessage('#Message', JSON.stringify({
            Css: 'alert-error',
            Text: `申請金額が上限(${limits.president.toLocaleString()}円)を超えています。申請には決裁者(社長)の選択が必須です。`
        }));
    } else if (needsManagerApproval && !$p.getValue(APPROVER_COLUMN)) {
        $p.clearMessage();
        $p.setMessage('#Message', JSON.stringify({
            Css: 'alert-warning',
            Text: `申請金額が${limits.manager.toLocaleString()}円を超えたため、申請には承認者(上長)の選択が必須です。`
        }));
    } else if (clearIfNoWarning) {
        // 警告が不要になった場合だけメッセージ欄をクリアする。画面表示時
        // (on_editor_load)はここを通さない。申請・作成の直後の画面表示では
        // Pleasanterが表示する成功メッセージが入っており、ここで無条件に
        // クリアすると警告の必要がないレコードで成功メッセージが即座に
        // 消えてしまうため。
        $p.clearMessage();
    }
}

// 画面表示時/金額変更のたびにチェック。画面表示時は警告が不要でも
// メッセージ欄をクリアしない(申請・作成直後の成功メッセージを消さないため)。
$p.events.on_editor_load = function () {
    checkAmount(false);
};
function checkAmountAndClear() {
    checkAmount(true);
}
$p.on('change', AMOUNT_COLUMN, checkAmountAndClear);

// 経費種別が変わった場合も、上限が変わるため再チェック
$p.on('change', CATEGORY_COLUMN, checkAmountAndClear);

// 承認者・決裁者を選択した時点で条件を満たすため、その場でメッセージを
// 消す(選択済みなのに金額入力時点の警告・エラーが残り、申請成功後も
// 表示されたままになるのを防ぐ)
$p.on('change', APPROVER_COLUMN, checkAmountAndClear);
$p.on('change', DECIDER_COLUMN, checkAmountAndClear);

// 「申請」ボタン(プロセス)でのみ検証する。通常の保存ボタンでは検証しない
// ため、入力途中のレコードを何度でも下書き保存できる(詳細は上記【なぜ通常の
// before_validate だけでは実現できないか】参照)。
$p.events.before_validate_Create =
$p.events.before_validate_Update = function (args) {
    const controlId = args.$control ? args.$control.attr('id') : '';
    if (controlId.indexOf('Process_') !== 0) {
        return true; // 通常の保存(下書き)は検証しない
    }

    const amount = Number($p.getControl(AMOUNT_COLUMN).val());
    const limits = getLimits();

    if (amount > limits.president && !$p.getValue(DECIDER_COLUMN)) {
        $p.clearMessage();
        $p.setMessage('#Message', JSON.stringify({
            Css: 'alert-error',
            Text: '決裁者(社長)を選択してください。'
        }));
        return false; // 保存を中断
    }

    if (amount > limits.manager && !$p.getValue(APPROVER_COLUMN)) {
        $p.clearMessage();
        $p.setMessage('#Message', JSON.stringify({
            Css: 'alert-error',
            Text: '承認者(上長)を選択してください。'
        }));
        return false; // 保存を中断
    }

    return true;
};