細かい配慮で利用者にやさしいワークフローを実現するには?

最終更新日：2017年10月03日

Gluegent Flow

Gluegent Flow は、G SuiteやOffice 365と連携して、多様な「ワークフロー」をクラウドで実現することができます。これまでに、多くのお客様のご要望を実現しするために、きめ細やかな機能を実装してきました。ただ、お客様がやりたいことは千差万別で、全てを実装済みの機能としてご提供するのは困難です。そこで、Gluegent Flowでは、一部の機能でお客様自身が拡張できる仕組みをご用意しています。今回はそのような拡張の実例をご紹介します。

細かな入力チェック

申請者は、フォームに入力する時に様々な値を入れます。ワークフローとしては、数値を期待しているのに、文字列が入れられたりすると、後続の処理で困るため、手で直さなければならない場合もあるでしょう。そのため、入力フォームでは、入力された値をチェックする「入力チェック(バリデーション)」という機能が必要です。
以下の例で、フォームにメールアドレスが入力されることを期待する入力チェックをご紹介します。

カスタムバリデーション

入力チェックのルールをJavaScriptで実現します。申請モデルの入力チェックのカスタムバリデーションの「スクリプト」で、入力された値が、期待されたものなら、trueを返し、そうでない場合には、falseを返すようにします。

メールアドレスが期待される場合には、以下のようなスクリプトになります。入力された値が、メールアドレスを示す文字列にマッチしない場合に、falseを返しています。

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

「スクリプトを確認する」の機能を使って、その場で動作の確認をすることもできます。任意のスクリプトを設定することで、入力値が、定められた形式(社員番号や商品コードなど)であることをチェックできます。また、スクリプト内では、他の入力フォームで入力された値や、日付、申請者の情報などを参照することもできますので、より柔軟なチェックが可能です。

入力された値に対応したメッセージを表示する

上の例は、入力される値を期待するものに限定する機能でした。次の例は、入力された値に対応して、特定のメッセージを表示する機能です。ここでも、JavaScriptが使えます。

カスタムラベル

入力フォームの形式として「カスタムラベル」を使います。特定の値を参照して、定義した条件に合致した場合に、特定の文字列を返します。返された文字列が、申請フォームに表示されます。

以下の例では、処理した日付を参照して、曜日を表示することができます。

var today = new Date( ${処理年月日});
var label = ["日","月","火","水","木","金","土"];
return label[today.getDay()] + "曜日";

スクリプトを確認してみましょう。確認するために任意の日付を入れられますが、実際の申請時には、プレースホルダの機能によって、申請された日付が自動で入ることになります。

細かい配慮で使いやすいワークフローを提供できます

Gluegent Flowでは、様々な機能でJavaScriptを使って、機能を拡張することができます。申請フォームの作りの柔軟さは、利用者の利便性を大きく左右します。申請者が迷わずに必要な値を入力し、迅速に処理をすすめられるワークフローを提供するために、ぜひ、Gluegent Flowをご利用ください。

Gluegent Blog