モデル構築 - スクリプトを利用する

IF文を使った条件分岐

「分岐する経路」で使用しましたが、Gluegent Flow でスクリプトを使うときに避けては通れないのが、条件分岐です。JavaScript では条件分岐の方法として、IF 文を使用します。

単一チェック「承認先」には「課長」「部長」「社長」が表示されており、申請者がどれを選択するかにより進む経路を切り替えるというモデルを作ります。申請の経路で課長承認経路に進むボタン、部長承認経路に進むボタン、社長経路に進むボタンを用意し、それぞれのボタン表示切替でスクリプトを入力します。

課長承認経路に進むボタンのスクリプト例

if (${承認先} == "課長") {
    return true;
}
return false;

解説

IF文では「課長」が選択された場合は true を返し、それ以外の場合は false を返します。return の後は処理が進みませんので、else は不要です。

→モデル編集　経路_ボタンの設定

加えて、単一チェック「承認先」の選択肢により、入力欄の表示非表示を切り替えたい場合は、入力チェックの「項目表示制御」を使用します。

単行テキストの「課長入力欄」「部長入力欄」「社長入力欄」を作成し、「課長」が選択された場合は「部長入力欄」「社長入力欄」を非表示にしたい、同様に、「部長」が選択された場合、「社長」が選択された場合もそれぞれ表示・非表示を切り替えます。

項目表示制御のスクリプト例

if (${承認先} == "課長") {
    return ["部長入力欄", "社長入力欄"];
} else if (${承認先} == "部長") {
    return ["課長入力欄", "社長入力欄"];
} else if (${承認先} == "社長") {
    return ["課長入力欄", "部長入力欄"];
}

解説

同じく IF 文を使いますが、今回の場合は、「課長だったら」「部長だったら」というように入力内容により非表示にする項目名を変更するので、ELSE IF を使っています。

※項目表示制御では非表示にする項目名を返します。

→モデル編集　項目表示制御

消費税計算

単価・個数を入力すると税込価格が自動で表示されるといったモデルを作成したい。

この場合、タイプ「計算式」の入力フォームを使います。スクリプトは以下のようなコードを記載します。

return ${単価} * ${個数} * 1.08;

解説

入力フォーム「単価」「個数」の積に税率 (8%) をかけています。
算術演算子は加算(+)、減算(-)、乗算(*)、除算(/) です。

課税/非課税計算

単価・個数を入力し、課税対象か非課税かで異なる計算結果が表示されるといったモデルを作成したい。

この場合、タイプ「カスタムラベル」の入力フォームを使います。スクリプトは以下のようなコードを記載します。

if (${消費税} == "課税対象") {
    return ${単価} * ${個数} * 1.08;
}
return ${単価} * ${個数};

解説

return 文の後は処理されないので else を省略できます。
数値に"円"を含めて表示したい場合は
return (${単価} * ${個数} * 1.08) + "円";
と記述します。

「その他」の場合入力必須

交通手段で「その他」が選択された場合は、交通手段詳細の入力が必須となるモデルを作成したい。

この場合、入力チェックのカスタムバリデーションを使います。スクリプトは以下のようなコードを記載します。

if ( ${交通手段} == "その他" ) {
    if (${交通手段詳細} == undefined) {
        return false;
    }
}
return true;

解説

return false の場合はエラーとして扱われます。
IF 文が 2 つ使われています。
1 つ目の IF 文は交通手段がその他かどうかを聞いています。
「その他」でない（車、鉄道）場合は処理を抜け true となります。
「その他」の場合、2 つ目の IF 文で未入力かどうかを聞いています。
未入力の場合「undefined」という値になります。

「その他」の場合のみ入力可能

種別で「その他」が選択された場合は、入力フォーム「種別その他」が表示されるようなモデルを作成したい。

この場合、入力チェックの項目表示制御を使います。スクリプトは以下のようなコードを記載します。

if (${種別} != "その他") {
    return "種別その他";
}
return "";

解説

return "種別その他";
とは「種別その他」を非表示にするという意味になります。
非表示にしたい項目が複数ある場合は
return ["項目1","項目2"];
のように配列として記述します。
逆に表示したい項目がない場合は
return "";
となります。
!= は「等しくない」です。

注意：
タイプが単一チェックの入力フォームの場合、項目表示切替があるため、この方法は不要です。
ただし 2 つ以上の単一チェックで項目表示切替を設定した場合や項目表示切替と入力チェックの項目表示制御の両方を設定している場合は正しく動作しません。
その場合は入力チェックの項目表示制御ですべて設定してください。
→モデル編集　項目表示制御

→String.prototype.indexOf() (mdn web docs)

複数チェックで選択されたものを判断する

「複数チェック」で「その他」が選択され場合は、入力フォーム「種別その他」が表示されるようなモデルを作成したい。

「複数チェック」の場合は、プレースホルダーに選択された選択肢がカンマ区切りで表現されます。そのため、単一チェックのように if (${項目名} == "選択肢") は使用できません。

この場合、入力チェックの項目表示制御を使います。スクリプトは以下のようなコードを記載します。

// 未入力チェック
if (${種別} == undefined) {
    return "種別その他";
}

// その他選択チェック
if (${種別}.indexOf("その他") == -1) {
    return "種別その他";
}
return "";

解説

// はコメントです。以降に書かれた文字はスクリプトとして処理されません。
未入力チェック部分は「種別」が 1 つも選択されなかった場合、「種別その他」を非表示にします。

indexOf はカッコ内に入力された値が最初に見つかった位置を返します。見つからなかった場合は -1 を返します。

上の図の場合、Aだけが選択された場合は、「その他」が見つからないので -1 を返します。

「A」と「その他」が選択された場合は、プレースホルダーの値が「A,その他」となりますので、その他が最初に見つかった位置である 2 を返します。

その他が見つからない場合は、「種別その他」を非表示にします。

見つかった場合は非表示にしないので「種別その他」が表示されます。

入力形式チェック

対象の入力フォームの値がメールアドレスの形式となっていなかった場合はエラーとなるようなモデルを作成したい。

この場合、入力チェックのカスタムバリデーションを使います。スクリプトは以下のようなコードを記載します。

// 未入力チェック
if (${メールアドレス} == undefined) {
    // 未入力の場合は以下のチェックは行わず、正常とする
    return true;
}

// 形式チェック
if (!${メールアドレス}.match(/^[A-Za-z0-9]+[\w-]+@[\w\.-]+\.\w{2,}$/)){
    // !は否定（〜でない）。
    // この場合、match(xxx)でxxxに該当するものでないとなる。
    return false;
}
return true;

解説

// はコメントです。以降に書かれた文字はスクリプトとして処理されません。
未入力チェック部分は「メールアドレス」の入力値が空の場合、形式チェックは行われません。
形式チェックは [文字列].match(正規表現) で表現します。
入力値が正規表現の形式に合致する場合、true が返されます。
IF 文を使わず、return ${メールアドレス}.match(xxx); とする方法もあります。

その他正規表現の例

半角英数字のみ入力可: /^[0-9a-zA-Z]*$

全角ひらがなのみ入力可: /^[ぁ-んー]*$/

全角カタカナのみ入力可: /^[ァ-ンヴー]*$/

X文字以上の半角英数字のみ入力可: /^([a-zA-Z0-9]{X,})$/; （Xに制御したい文字数を数字で入力）

年度の取得

日付項目の入力日の年度を取得するような申請モデルを作成したい。

この場合、カスタムラベルを使います。スクリプトは以下のようなコードを記載します。

var dt = ${日付}.split("/");
var y = Number(dt[0]);
var m = Number(dt[1]);
if ((m >= 4 ) && ( m <= 12)) {
    return y;
} else {
    return y-1;
}

解説

var xxx で変数を定義します。
split で日付項目の "yyyy/mm/dd" の "/" で分割し、変数「dt」に配列として格納します。
dt[0] に年、dt[1] に月、dt[2] に日の値が文字列型で格納されます。
Number() で文字列型から数値型に変換しています。

日付の大小チェック

タイプが日付の入力フォームで開始日が終了日より後になった場合はエラーとしたい。

この場合、入力チェックのカスタムバリデーションを使います。スクリプトは以下のようなコードを記載します。

// 未入力チェック
if ((${開始日} == undefined) || (${終了日} == undefined)) {
    // 開始日・終了日に未入力のものがあった場合はチェックしない
    return true;
}

var from = ${開始日}.split("/");
var to = ${終了日}.split("/");
var fromDate = new Date(Number(from[0]), Number(from[1]) - 1, Number(from[2]));
var toDate = new Date(Number(to[0]), Number(to[1]) - 1, Number(to[2]));

if (fromDate.getTime() > toDate.getTime()) {
    return false;
}
return true;

解説

IF 文が 2 つ使われています。
1 つ目の IF 文は未入力チェックを行っています。未入力の場合「undefined」という値になります。未入力の場合は比較できませんのでチェックは行いません。
開始日、終了日 (yyyy/MM/dd) を年・月・日に分けます。

日付型に変換します。
2 つ目の IF 文で大小比較をします。日付型変数の時間を取得して比較を行います。
return false の場合はエラーとして扱われます。

時刻の大小チェック

タイプが時刻の入力フォームで開始時刻が終了時刻より後になった場合はエラーとしたい。

この場合、入力チェックのカスタムバリデーションを使います。スクリプトは以下のようなコードを記載します。

// 未入力チェック
if ((${開始時刻} == undefined) || (${終了時刻} == undefined)) {
    // 開始時刻・終了時刻に未入力のものがあった場合はチェックしない
    return true;
}

var from = ${開始時刻}.split(":");
var to = ${終了時刻}.split(":");
var fromDate = new Date(1999, 0, 1, from[0], from[1], 0, 0);
var toDate = new Date(1999, 0, 1, to[0], to[1], 0, 0);

if (fromDate.getTime() > toDate.getTime()) {
    return false;
}
return true;

解説

IF 文が 2 つ使われています。
1 つ目の IF 文は未入力チェックを行っています。未入力の場合「undefined」という値になります。未入力の場合は比較できませんのでチェックは行いません。
開始時刻、終了時刻 (hh:mm) を時・分に分けます。
日付型に変換します。1999/1/1 の◯時◯分として比較します。
2 つ目の IF 文で大小比較をします。日付型変数の時間を取得して比較を行います
return false の場合はエラーとして扱われます。
※日付の項目と併せて比較する場合は、1999/1/1 の部分を入力された日付にします。

改行文字をエスケープする

タイプが複数行テキストの入力フォームで改行を含む内容を入力し、それをエスケープして利用したい。

この場合、入力フォームのカスタムラベルを使います。スクリプトは以下のようなコードを記載します。

var value = ${テキスト1};
if ( value != "") {
    return value.replace(/\n/g, "\\n");
}
return "";

解説

IF 文は未入力チェックを行っています。未入力の場合はそのまま空文字を返します。
replace を使い、改行文字をエスケープしています。

デバッグする

スクリプトが正しく動作しない場合は、問題の原因を特定します。

コメントアウトする

スクリプトは、入力フォーム・入力チェック・ボタン表示切替など、様々な場所で設定可能です。これらのスクリプトが複合的に動作している場合、どのスクリプトが原因かわかりません。

そこで、スクリプト全体をコメントアウトして問題が解消するか、確認します。

コメントアウトとは、入力された文字をスクリプトと判断しないようにする手法です。

上の例で使用されていますが、1行だけコメントアウトする場合は、// を使います。

// 未入力チェック
if ((${開始時刻} == undefined) || (${終了時刻} == undefined)) {
    // 開始時刻・終了時刻に未入力のものがあった場合はチェックしない
    return true;
}

上記の例の場合、「// 未入力チェック」や「// 開始時刻〜」がコメントになります。この行はスクリプトとして動作しません。

複数行コメントアウトする場合は該当する範囲を「/* */」で囲みます。

/*
if ((${開始時刻} == undefined) || (${終了時刻} == undefined)) {
    return true;
}
*/

上記の例の場合、if 文をコメントアウトしています。

コメントの範囲を狭くして、問題箇所を特定する

長いスクリプトを書いている場合、どこに問題箇所があるかわかりません。

そこで、まずは、全体的にコメントアウトを行い、そこから徐々に範囲を狭めて、問題箇所を特定します。

// 未入力チェック
if ((${開始時刻} == undefined) || (${終了時刻} == undefined)) {
    // 開始時刻・終了時刻に未入力のものがあった場合はチェックしない
    return true;
}

var from = ${開始時刻}.split(":");
var to = ${終了時刻}.split(":");
var fromDate = new Dae(1999, 0, 1, from[0], from[1], 0, 0);  // Dateの綴りが誤っている
var toDate = new Date(1999, 0, 1, to[0], to[1], 0, 0);

if (fromDate.getTime() > toDate.getTime()) {
    return false;
}
return true;

このスクリプトは意図的に Date の綴りを間違えています。

このミスを特定するには、まず全部をコメントアウトします。

/*
// 未入力チェック
if ((${開始時刻} == undefined) || (${終了時刻} == undefined)) {
    // 開始時刻・終了時刻に未入力のものがあった場合はチェックしない
    return true;
}

var from = ${開始時刻}.split(":");
var to = ${終了時刻}.split(":");
var fromDate = new Dae(1999, 0, 1, from[0], from[1], 0, 0);  // Dateの綴りが誤っている
var toDate = new Date(1999, 0, 1, to[0], to[1], 0, 0);

if (fromDate.getTime() > toDate.getTime()) {
    return false;
}
return true;
*/

return true;は問題なさそうなので、コメントから出します。

/*
// 未入力チェック
if ((${開始時刻} == undefined) || (${終了時刻} == undefined)) {
    // 開始時刻・終了時刻に未入力のものがあった場合はチェックしない
    return true;
}

var from = ${開始時刻}.split(":");
var to = ${終了時刻}.split(":");
var fromDate = new Dae(1999, 0, 1, from[0], from[1], 0, 0);  // Dateの綴りが誤っている
var toDate = new Date(1999, 0, 1, to[0], to[1], 0, 0);

if (fromDate.getTime() > toDate.getTime()) {
    return false;
}
*/
return true;

次に、未入力チェックのIF文までコメントから出します。

// 未入力チェック
if ((${開始時刻} == undefined) || (${終了時刻} == undefined)) {
    // 開始時刻・終了時刻に未入力のものがあった場合はチェックしない
    return true;
}

/*
var from = ${開始時刻}.split(":");
var to = ${終了時刻}.split(":");
var fromDate = new Dae(1999, 0, 1, from[0], from[1], 0, 0);  // Dateの綴りが誤っている
var toDate = new Date(1999, 0, 1, to[0], to[1], 0, 0);

if (fromDate.getTime() > toDate.getTime()) {
    return false;
}
*/
return true;

スクリプトを実行すると、問題はありませんので、ここは大丈夫です。

1行ずつコメントから出していくと、該当箇所でエラーになることがわかりました。

var from = ${開始時刻}.split(":");
/*
var to = ${終了時刻}.split(":");
var fromDate = new Dae(1999, 0, 1, from[0], from[1], 0, 0);  // Dateの綴りが誤っている
var toDate = new Date(1999, 0, 1, to[0], to[1], 0, 0);

if (fromDate.getTime() > toDate.getTime()) {
    return false;
}
*/
return true;

↓

var from = ${開始時刻}.split(":");
var to = ${終了時刻}.split(":");
/*
var fromDate = new Dae(1999, 0, 1, from[0], from[1], 0, 0);  // Dateの綴りが誤っている
var toDate = new Date(1999, 0, 1, to[0], to[1], 0, 0);

if (fromDate.getTime() > toDate.getTime()) {
    return false;
}
*/
return true;

↓


var from = ${開始時刻}.split(":");
var to = ${終了時刻}.split(":");
var fromDate = new Dae(1999, 0, 1, from[0], from[1], 0, 0);  // Dateの綴りが誤っている
/*
var toDate = new Date(1999, 0, 1, to[0], to[1], 0, 0);

if (fromDate.getTime() > toDate.getTime()) {
    return false;
}
*/
return true;

ここで、この行にエラーがあることが特定できます。

複数行をコメントアウトを徐々に解除するときは、処理の途中を解除しないようにしましょう。

// 未入力チェック
if ((${開始時刻} == undefined) || (${終了時刻} == undefined)) {
    // 開始時刻・終了時刻に未入力のものがあった場合はチェックしない
/*
    return true;
}
*/

IF文は、if (条件) { } でワンセットです。上のように、IF文の途中でコメントを外すと構文エラーになります。

Alertを使う

入力フォームの内容をプレースホルダーを使って表現していますが、プレースホルダーに記載した内容が、入力フォーム名と異なっていたり、意図しない値が入っていることがあります。

意図しない挙動になってしまう場合は、Alert を使ってプレースホルダーの内容が正しいかを確認しましょう。

alert(${テキスト1});

テキスト1 の内容がダイアログメッセージとして出力されます。

__________2022-11-15_16.25.40.png

また、複数行のスクリプトの途中にエラーがあった場合、実行途中で中断されることがあります。

どこまで処理が進んだかを確認するために、Alert の位置を少しずつ移動しながら、どこかに問題があるかを確認します。

この場合は、メッセージが出力されますが、

alert("ここまで動いた");
var from = ${開始時刻}.split(":");
var to = ${終了時刻}.split(":");
var fromDate = new Dae(1999, 0, 1, from[0], from[1], 0, 0); // Dateの綴りが誤っている
var toDate = new Date(1999, 0, 1, to[0], to[1], 0, 0);

この場合は、メッセージが出力されません。

var from = ${開始時刻}.split(":");
var to = ${終了時刻}.split(":");
var fromDate = new Dae(1999, 0, 1, from[0], from[1], 0, 0); // Dateの綴りが誤っている
alert("ここまで動いた");
var toDate = new Date(1999, 0, 1, to[0], to[1], 0, 0);

そのため、この上の 1 文が問題であることがわかります。

注意：
カスタムラベルやボタン表示切替や項目表示制御は複数回実行されますので、ダイアログが複数回表示されます。