CookBook

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

投稿日:

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

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

完成イメージ

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

・実行画面

完成サンプル

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

レシピ

  1. Formaアプリケーションを作成し、ユーザ登録申請書を表現したフォームにスプレッドシート、グリッドテーブル、明細テーブルを配置します。
  2. ロジックフローを作成し、アイテムに対して入力チェック機能を実装します。
  3. ユーザプログラムで入力チェックロジックフローを連携します。
  4. 実行画面で実行できるか確認します。

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定義新規作成」にて実装します。
  • 「ユーザスクリプト」に下記を設定します。
    • 詳しい処理内容はインラインでコメントを入れています。

  • 次に、入出力設定をします。

    • 「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. 実行画面で実行できるか確認します。

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

-CookBook
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

EWS2017 「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」講演内容のご紹介

この記事では、EWS2017 Technology Track「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」での講演内容 …

no image

ラジオボタンの値やフォーカスによってアイテムの色を変更するには

このCookbookでは、カスタムスクリプトによるフィールドスタイルの変更方法を説明します。 アクション設定とカスタムスクリプトの組み合わせにより、入力値やフォーカスイベントに合わせてアイテムのスタイ …

IM-LogicDesignerを利用して、IM-Workflowの未処理案件の処理対象者を再展開する

このCookBookでは、IM-LogicDesignerを利用して、IM-Workflowの未処理案件の処理対象者を再展開する方法について紹介しています。 人事異動を重ねることで、未処理案件の中には …

no image

IM-FormaDesignerで作成したフォーム画面からIMBoxに投稿する方法

このCookBookでは、IM-BISを含む環境において、IM-FormaDesignerで作成したアプリからIMBoxに投稿する方法について紹介しています。 IM-LogicDesignerとの外部 …

no image

スクリプト開発で登録フォームを作成する

このCookBookでは、スクリプト開発で登録フォームを作成する際に役立つ Tips を紹介します。 第1回:スクリプト開発で登録フォームを作成する 第2回:フォームに入力した内容をデータベースに登録 …

まだデータがありません。

RSSRSSRSSRSS