FormaDesignerのユーザプログラム入力チェックをロジックフローで作成する方法
このCookBookでは、FormaDesignerのユーザプログラム入力チェックをロジックフローで作成する方法をご紹介します。
サンプルでは、スプレッドシート・グリッドテーブル・明細テーブルを使用しています。
※スプレッドシートの利用は、下記を参考にして設定してください。
[IM-Spreadsheet 利用ガイド] - [セットアップ方法]
完成イメージ
- 適切な入力をします。
(ここでは、必須入力チェック・電話番号チェック・メールアドレスチェックを設定しています。) - 登録ボタンを押下したタイミングで、入力チェックを行います。
- 入力ミスがあると、エラーが発生します。
完成サンプル
下記の完成サンプルをダウンロードしてご活用ください。
- IM-BIS定義 :im_cookbook_162292_bis
- BISの一括インポート機能からインポートしてください。
- 手順の詳細は下記のドキュメントを参照してください。
- ロジックフロー定義:im_cookbook_162292_logicdesigner_data
- LogicDesignerのインポート機能からインポートしてください。
- 手順の詳細は下記のドキュメントを参照してください。
レシピ
- Formaアプリケーションを作成し、ユーザ登録申請書を表現したフォームにスプレッドシート、グリッドテーブル、明細テーブルを配置します。
- ロジックフローを作成し、アイテムに対して入力チェック機能を実装します。
- ユーザプログラムで入力チェックロジックフローを連携します。
- 実行画面で実行できるか確認します。
1. Formaアプリケーションを作成し、ユーザ登録申請書を表現したフォームにスプレッドシート、グリッドテーブル、明細テーブルを配置します。
IM-BISにて、ユーザ登録申請書アプリケーション画面を作成していきます。
-
- Formaアプリケーション
スプレッドシート・グリッドテーブル・明細テーブルを含むアプリケーション画面を作成してください。
下記の項目をシート上のフィールドとして定義してください。
・Name
・Street address
・Phone number
・Mail address
下記の項目をテーブルに表示する列として設定してください。
・Application category
・Reason for application
・Application date(DD-MM-YYYY)
下記の項目をシート上のテーブルとして定義してください。
・Confirmation
下記の項目をテーブルに表示する列として設定してください。
・Reception day(DD-MM-YYYY)
・Receptionist
・Completion date(DD-MM-YYYY)
・Manager confirmation mark
下記の項目をシート上のテーブルとして定義してください。
・Confirmation
下記の項目をテーブルに表示する列として設定してください。
・User registration
・Mail directory creation
・Add to mail group
2. ロジックフローを作成し、アイテムに対して入力チェック機能を実装します。
IM-LogicDesignerでロジックフローを作成し、アイテムに対して入力チェック機能を実装します。
ここでは下記のように、入力チェックを実装しています。
黒い星マーク(★) | 必須入力チェック |
Phone number | 電話番号入力チェック(ハイフンを含む。例:000-0000-0000) |
Mail address | メールアドレスチェック(例:aaa@com) |
チェックフォーマットの表現形式に関しては、下記を参考にしてください。
「IM-FormaDesigner デザイナヘルプ」-「チェックフォーマットの記述例」
- ロジックフローにおいて、入力チェックプログラムを実装します。
- 「ユーザスクリプト」に下記を設定します。
- 詳しい処理内容はインラインでコメントを入れています。
var errorItems = [];
function run(input) {
valdateSP(input);
valdateGT(input);
valdateMT(input);
var errorInfo = {
"error": false,
"errorMessage": "An input validation error has occurred.",
"errorItems": errorItems
};
return errorInfo;
}
//スプレッドシートに対する入力チェックを実装します。
function valdateSP(input) {
var errorItemInfo = {};
Debug.console('************** 入力チェックサンプルプログラム:スプレッドシート ****************');
var spreadsheetId = 'spreadsheet1';
var errorMessage = '';
var sendParam = input.sendParam;
//★スプレッドシートのフィールド系
//入力チェック フィールド識別ID「spr1_cell1」(氏名)に対する必須入力チェック
if (isBlank(sendParam.spr1_cell1)) {
errorItems.push({
inputId: ['spr1_cell1'],
errorMessage: 'Please enter your name.'
});
}
//入力チェック フィールド識別ID「spr1_cell2」(住所)に対する必須入力チェック
if (isBlank(sendParam.spr1_cell2)) {
errorItems.push({
inputId: ['spr1_cell2'],
errorMessage: 'Please enter your address.'
});
}
//入力チェック フィールド識別ID「spr1_cell3」(電話番号)に対する電話番号入力チェック
if (!isBlank(sendParam.spr1_cell3) && !sendParam.spr1_cell3.match(
/^\d{2,4}-\d{2,4}-\d{4}$/)) {
errorItems.push({
inputId: ['spr1_cell3'],
errorMessage: 'The phone number input is invalid.'
});
}
//入力チェック フィールド識別ID「spr1_cell4」(メールアドレス)に対するアドレス入力チェック
if (!isBlank(sendParam.spr1_cell4) && !sendParam.spr1_cell4.match(
/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)) {
errorItems.push({
inputId: ['spr1_cell4'],
errorMessage: 'The email address is invalid.'
});
}
// ★スプレッドシートのテーブル系
for (var index = 0; index < sendParam.spr1_tb1.length; index++) {
let tableRow = sendParam.spr1_tb1[index];
//入力チェック フィールド識別ID「spr1_tb1_col1」(申請区分)に対する必須入力チェック
if (isBlank(tableRow.spr1_tb1_col1)) {
errorItems.push({
inputId: ['spr1_tb1_col1'],
errorMessage: 'Enter the application category.',
index: index
});
}
//入力チェック フィールド識別ID「spr1_tb1_col2」(申請理由)に対する必須入力チェック
if (isBlank(tableRow.spr1_tb1_col2)) {
errorItems.push({
inputId: ['spr1_tb1_col2'],
errorMessage: 'Enter the reason for application.',
index: index
});
}
//入力チェック フィールド識別ID「spr1_tb1_col3」(申請日)に対する必須入力チェック
if (isBlank(tableRow.spr1_tb1_col3)) {
errorItems.push({
inputId: ['spr1_tb1_col3'],
errorMessage: 'Please enter the application date.',
index: index
});
}
}
}
//グリッドテーブルに対する入力チェックを実装します。
function valdateGT(input) {
var errorItemInfo = {};
Debug.console('************** 入力チェックサンプルプログラム:グリッドテーブル ****************');
var input_id = 'gt1';
var errorMessage = '';
var sendParam = input.sendParam;
//★グリットテーブル
for (var index = 0; index < sendParam.gt1.length; index++) {
let tableRow = sendParam.gt1[index];
//入力チェック フィールド識別ID「gt1_calendar1」(受付日)に対する必須入力チェック
if (isBlank(tableRow.gt1_calendar1)) {
errorItems.push({
inputId: ['gt1_calendar1'],
errorMessage: 'Please enter the reception date.',
index: index
});
}
//入力チェック フィールド識別ID「gt1_textbox2」(受付者)に対する必須入力チェック
if (isBlank(tableRow.gt1_textbox2)) {
errorItems.push({
inputId: ['gt1_textbox2'],
errorMessage: 'Please enter the recipient.',
index: index
});
}
//入力チェック フィールド識別ID「gt1_calendar2」(完了連絡日)に対する必須入力チェック
if (isBlank(tableRow.gt1_calendar2)) {
errorItems.push({
inputId: ['gt1_calendar2'],
errorMessage: 'Please enter a completion contact date.',
index: index
});
}
//入力チェック フィールド識別ID「gt1_textbox4」(室長確認印)に対する必須入力チェック
if (isBlank(tableRow.gt1_textbox4)) {
errorItems.push({
inputId: ['gt1_textbox4'],
errorMessage: 'Please enter the manager confirmation mark.',
index: index
});
}
}
}
//明細テーブルに対する入力チェックを実装します。
function valdateMT(input) {
var errorItemInfo = {};
Debug.print('************** 入力チェックサンプルプログラム:明細テーブル ****************');
var input_id = 'tb1';
var errorMessage = '';
var sendParam = input.sendParam;
//★明細テーブル
for (var index = 0; index < sendParam.tb1.length; index++) {
let tableRow = sendParam.tb1[index];
//入力チェック フィールド識別ID「tb1_textbox1」(ユーザ登録)に対する必須入力チェック
if (isBlank(tableRow.tb1_textbox1)) {
errorItems.push({
inputId: ['tb1_textbox1'],
errorMessage: 'Enter user registration.',
index: index
});
}
//入力チェック フィールド識別ID「tb1_textbox2」(メールディレクトリ作成)に対する必須入力チェック
if (isBlank(tableRow.tb1_textbox2)) {
errorItems.push({
inputId: ['tb1_textbox2'],
errorMessage: 'Enter the mail directory creation.',
index: index
});
}
//入力チェック フィールド識別ID「tb1_textbox3」(メールグループへの追加)に対する必須入力チェック
if (isBlank(tableRow.tb1_textbox3)) {
errorItems.push({
inputId: ['tb1_textbox3'],
errorMessage: 'Enter add to mail group.',
index: index
});
}
}
}
- 次に、入出力設定をします。
- 「Input and Output Settings(入出力設定)」をクリックします。
入力・出力値に渡されるパラメータ情報を設定してください。- 入力チェックを実装する手順の詳細は以下のドキュメントをご覧ください。
[IM-FormaDesigner プログラミングガイド] - [入力チェック] - [ロジックフロー] - “im_cookbook_162292_user”タスクの「ユーザ定義編集/ユーザ定義共通設定」の「入力値」「返却値」も同様の値を入れてください。
- 入力チェックを実装する手順の詳細は以下のドキュメントをご覧ください。
- 「Input and Output Settings(入出力設定)」をクリックします。
(入力値の"sendParam"の配下には、アイテムのフィールド識別ID・テーブル識別IDを配置してください。)
・出力:上記のドキュメント通り
- “im_cookbook_162292_user”タスクのマッピングをします。
- 下記の表の左右欄をマッピングさせてください。
入力<object> | im_cookbook_162292_user1<object> |
- 最後に、“End”タスクのマッピングをします。
- 下記の通りにマッピングをしてください。
im_cookbook_162292_user1/error<boolean> | error<boolean> |
im_cookbook_162292_user1/errorMessage<string> | errorMessage<string> |
im_cookbook_162292_user1/errorItems<object[]> | errorItems<object[]> |
im_cookbook_162292_user1/errorItems/inputId<string[]> | inputId<string[]> |
im_cookbook_162292_user1/errorItems/errorMessage<string> | errorMessage<string> |
im_cookbook_162292_user1/errorItems/localizedErrorMessages<object> | localizedErrorMessages<object> |
im_cookbook_162292_user1/errorItems/index<double> | index<double> |
4. ユーザプログラムで入力チェックロジックフローを連携します。
IM-BIS /「一覧」/該当の「アプリ」/「フォーム設定」/「ユーザプログラム一覧」/「入力チェックプログラム」から、ロジックフローを設定していきます。
プログラム種別は「ロジックフロー」で、フロー定義は作成したものを使用してください。
5. 実行画面で実行できるか確認します。
実行画面で、適切なフォーマットで入力し、申請できるか確認してください。
また誤ったフォーマットや未入力を行い、エラー表示が発生するかも合わせて確認してください。