クライアントスクリプトによるデータの数値計算と検証の実行

クライアントスクリプトによるデータの数値計算と検証の実行

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

購入注文、請求書、経費精算書などの財務関連書類を再現するフォームを設計する際、ワークフローで総費用や発生した経費の合計を計算する必要がある場合があります。このような数値計算を自動化し、数値データを検証するには、クライアントスクリプトを使用できます。
 

ビジネスシナリオ

ヘレンさんは、組織内で購入注文の作成と承認のプロセスを自動化したいと考えています。ヘレンさんの要件は、発生したすべての経費の合計を計算し、経費が予算を超えないよう、固定予算と照合して検証することです。

解決策

この要件を自動化するために、ヘレンさんはQntrlのクライアントスクリプトを使用します。
  1. ヘレンさんはフォームを作成し、発生したすべての経費のデータを入力し、［予算］を設定するために、さまざまな通貨項目を追加します。
  2. すべての経費の合計はクライアントスクリプトで計算され、たとえば［合計費用］という新しい通貨項目に保存されます。
  3. 固定の予算額は、クライアントスクリプトを使用して合計費用と照合して検証できます。合計費用が予算を超える場合、エラーメッセージが表示され、ユーザーは購入注文を送信できません。合計費用が予算内であれば、購入注文が送信され、承認に進みます。

設定例  

ステップ1：ボードの作成

新しいボード（購入注文ボード）を作成し、関連する項目を追加します。
  1. 品目費用、税金、配送料など、さまざまな経費のデータを入力するための通貨項目を追加します。
  2. 合計費用を計算して表示するための通貨項目を作成します。
  3. 予算を設定するために、別の通貨項目を作成します。こちらでは、既定の予算額として$1000を設定しています。


フォームを作成したら、ブループリントの設計、権限の設定、ボードの公開に進みます。

ステップ2：クライアントスクリプトの作成

ヘレンさんのプロセスでは、合計費用を計算するスクリプトと、費用を予算と照合して検証するスクリプトの2つのクライアントスクリプトが必要です。

スクリプト1：購入注文の費用計算

  1. 新しいスクリプトを作成し、名前として「購入注文の費用計算」と入力します。
  2. ［ボード］のドロップダウンで購入注文ボードを選択します。
  3. 新しいカードが追加されたときにスクリプトを実行するため、［実行場所］として［新しいカードの追加］を選択します。
  4. 経費の値が変更されるたびに合計費用を計算するため、［実行トリガー］として［onChange］を選択します。このオプションを選択すると、右パネルに［項目］のドロップダウンが表示され、更新時にスクリプトをトリガーする項目を選択できます。
  5. 以下のスクリプトをスクリプトエディターにコピー＆ペーストし、パラメーター名を置き換えます。
    1. パラメーター名を確認するには、スクリプトエディターの右上にある？アイコンを使用できます。
  6. スクリプトの準備ができたら、［公開］します。
サンプルスクリプト

async function onChange(forpage,oldVal,newVal,executeOnLoad){
if(executeOnLoad){
return;
}
var item_cost = current.Job.getValue(current.Layout.Fields.<select-Item-cost-parameter-こちら>.id);
var tax = current.Job.getValue(current.Layout.Fields.<select-Tax-parameter-こちら>.id);
var freight = current.Job.getValue(current.Layout.Fields.<select-Freight-charges-parameter-こちら>.id);
var total = item_cost.value + tax.value + freight.value;
current.Job.setValue(current.Layout.Fields.<select-Total-cost-parameter-こちら>.id, total);
}


メモ
  1. 検証を実行する場所に応じて、［新しいカードの追加］、［カードの詳細］、またはその両方を［実行
    場所］として選択できます。
  2. また、［実行トリガー］として［onChange］または［onSubmit］を選択できます。
    1. ［onChange］を選択すると、経費の値が変更されるたびにスクリプトで合計費用を計算できます。
    2. ［onSubmit］を選択すると、カードが送信または保存されたときにスクリプトで合計費用を計算できます。

スクリプト2：購入注文の予算検証

  1. 新しいスクリプトを作成し、名前として「購入注文の予算検証」と入力します。
  2. ［ボード］のドロップダウンで購入注文ボードを選択します。
  3. 新しいカードが追加されたときにスクリプトを実行するため、［実行場所］として［新しいカードの追加］を選択します。
  4. 新しいカードで［保存］ボタンがクリックされて送信されるたびに、スクリプトで合計費用を予算と照合して検証するため、［実行トリガー］として［onSubmit］を選択します。
  5. 以下のスクリプトをスクリプトエディターにコピー＆ペーストし、パラメーター名を置き換えます。
    1. パラメーター名を確認するには、スクリプトエディターの右上にある？アイコンを使用できます。
  6. スクリプトの準備ができたら、［公開］します。
サンプルスクリプト

async function onSubmit(forpage) {
var total = current.Job.getValue(current.Layout.Fields.<select-Total-cost-parameter-こちら>.id);
var budget = current.Job.getValue(current.Layout.Fields.<select-Budget-parameter-こちら>.id);
if (total.value > budget.value) {
ZDK.Message.Inline(current.Layout.Fields.<select-Total-cost-parameter-こちら>.id, '合計費用が予算を超えています');
return false;
}
return true;
}


メモ
  1. 検証を実行する場所に応じて、［実行場所］として［新しいカードの追加］、［カードの詳細］、またはその両方を選択できます。
  2. また、［実行トリガー］として［onChange］または［onSubmit］を選択できます。
    1. ［onChange］を選択すると、経費の値または合計費用が変更されるたびにスクリプトで予算を検証できます。
    2. ［onSubmit］を選択すると、カードが送信または保存されたときにスクリプトで予算を検証できます。

ステップ3：カードの追加

フォーム、ブループリント、クライアントスクリプトの準備ができたら、新しいカードを作成してスクリプトをテストできます。
  1. ［ボード］に移動し、左パネルからボードを選択します。
  2. ［カードを追加］をクリックします。
  3. ［ボード］のドロップダウンから購入注文ボードを選択します。
  4. カードの詳細と発生した経費を入力します。
    1. 合計費用は自動的に計算されます。
    2. 合計費用が予算を超えている場合は、エラーメッセージが表示されます。