FormaDesignerのユーザプログラム入力チェックをロジックフローで作成する方法

このCookBookでは、FormaDesignerのユーザプログラム入力チェックをロジックフローで作成する方法をご紹介します。

サンプルでは、スプレッドシート・グリッドテーブル・明細テーブルを使用しています。
※スプレッドシートの利用は、下記を参考にして設定してください。
[IM-Spreadsheet 利用ガイド] - [セットアップ方法]

完成イメージ

適切な入力をします。
（ここでは、必須入力チェック・電話番号チェック・メールアドレスチェックを設定しています。）
登録ボタンを押下したタイミングで、入力チェックを行います。
入力ミスがあると、エラーが発生します。

・実行画面

完成サンプル

下記の完成サンプルをダウンロードしてご活用ください。

IM-BIS定義：im_cookbook_162292_bis
- BISの一括インポート機能からインポートしてください。
- 手順の詳細は下記のドキュメントを参照してください。
  - IM-BIS for Accel Platform システム管理者操作ガイド - 一括インポートを実行する
ロジックフロー定義：im_cookbook_162292_logicdesigner_data
- LogicDesignerのインポート機能からインポートしてください。
- 手順の詳細は下記のドキュメントを参照してください。
  - IM-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 デザイナヘルプ」-「チェックフォーマットの記述例」

ロジックフローにおいて、入力チェックプログラムを実装します。
- 「ユーザ定義追加」-「JavaScript定義新規作成」にて実装します。
「ユーザスクリプト」に下記を設定します。
- 詳しい処理内容はインラインでコメントを入れています。

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
            });
        }
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

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”タスクの「ユーザ定義編集/ユーザ定義共通設定」の「入力値」「返却値」も同様の値を入れてください。

・入力：上記のドキュメント通り
（入力値の"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. 実行画面で実行できるか確認します。

実行画面で、適切なフォーマットで入力し、申請できるか確認してください。
また誤ったフォーマットや未入力を行い、エラー表示が発生するかも合わせて確認してください。