CookBook

画面操作方法によって画面アイテムの入力チェックを切り替える方法

投稿日:

このCookBookでは、IM-FormaDesignerの入力チェックプログラムで、画面の操作方法に応じた入力チェックを設定する方法を紹介します。

この方法は、以下の製品で作成したアプリケーションやフローで利用できます。
IM-FormaDesigner
IM-BIS

完成イメージ


サンプルではタブ切替可能な画面を使用し、以下の画面操作に応じた入力チェックを設定しています。
1. タブ切替
・画面アイテムに対する必須入力チェック、条件付き必須入力チェックは行われません。
2. tab-2画面にて「一時保存」ボタンをクリック
・tab-1画面のRadio に対する必須入力チェックが行われます。

3. tab-2画面にて「登録」ボタンをクリック
・tab-1画面のRadio に対する必須入力チェックが行われます。
・tab-1画面のRadio が選択されている場合、選択内容に応じた条件付き入力チェックが行われます。
  "Type1" 選択 : tab-2画面のText1 に対する必須入力チェックが行われます。

  "Type2" 選択 : tab-2画面のText2 に対する必須入力チェックが行われます。

完成サンプル

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

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
http://localhost:8080/imart/forma/normal/view/regist_application_view/im_cookbook_133072_forma
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

前記のサンプルの利用条件は以下の通りです。

  • intra-mart Accel Platform(Advanced) 2017 Winter(8.0.18), IM-FormaDesigner 2017 Winter(8.0.17)以降のバージョンであること
  • サンプルデータのインポートが行われていること

サンプルは、intra-mart Accel Platform(Advanced) 2017 Winter(8.0.18), IM-FormaDesigner 2017 Winter(8.0.17)で動作確認を行っています。

レシピ

  1. アプリケーションを作成する。
  2. 入力チェックプログラムを作成する。
  3. アプリケーションに入力チェックプログラムを設定する。

1. アプリケーションを作成する。

IM-FormaDesignerで、アプリケーション種別「標準」のアプリケーションを作成しましょう。
このCookbookでは、タブ切替を行う画面を使用する為、以下の3つのフォームを作成します。
・メインフォーム
・tab-1用フォーム
・tab-2用フォーム

フォームの作成とタブ切替の設定については、以下のドキュメントを参照してください。
IM-FormaDesigner for Accel Platform IM-FormaDesigner 作成者 操作ガイド - 「5.2.5. アプリケーションで画面遷移・タブ切替を設定する」

2. 入力チェックプログラムを作成する。

サンプルでは以下の場所にファイルを作成しています。
src/main/jssp/src/im_cookbook_133072/forma_validation.js

  • sendParam["imfr_transition_mode"]の値で画面操作方法を判断することができます。
    'tab_contents' : タブ切替
    ''(空文字) : 処理ボタン押下
  • formaParam["temporaryFlag"]の値で処理ボタンの種類を判断することができます。
    '0' : 登録・更新ボタン
    '1' : 一時保存ボタン
  • sendParam["imfr_other_form_param"]
    他のフォームの入力項目を保持しています。tab-1画面のアイテムRadioの設定値を取得することができます。

入力チェックプログラムについては、以下のドキュメントを参照してください。
IM-FormaDesigner for Accel Platform プログラミングガイド - 「4. 入力チェックプログラム」

3. アプリケーションに入力チェックプログラムを設定する。

レシピ1 で作成したアプリケーションのユーザプログラムに、レシピ2 で作成した入力チェックプログラムを設定しましょう。

入力チェックプログラムの設定については、以下のドキュメントを参照してください。
IM-FormaDesigner for Accel Platform 作成者 操作ガイド - 「5.4.2. アプリケーションでユーザプログラムを利用する」

-CookBook
-

執筆者:


comment

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

関連記事

IM-BISの処理画面でIMBoxのチャットを利用してコミュニケーションする方法

このCookBookでは、IM-BISの処理画面でIMBoxのチャットを利用してコミュニケーションする方法を紹介しています。 本稿では、案件単位にIMBoxのダイレクトメッセージ(以降DM)を作成し、 …

スプレッドシートのバインディングデータを別途テーブルに出力する方法

スプレッドシートのJsonデータとバインディングデータは、Formaヘッダーテーブルにバイナリカラムで格納されます。 Formaヘッダーテーブルに格納されたスプレッドシートデータは、登録データ情報管理 …

no image

IM-BloomMaker ページネーションの利用方法

この CookBook では、2020 summer でリリースした コンテンツ種別「Bulma」 の 「ページネーション」エレメントについて紹介しています。 「ページネーション」エレメントとは、表示 …

no image

CookBookからダウンロードしてきたプロジェクトのインポート方法

このCookBookでは、他のCookBookからダウンロードしてきたe Builderのモジュール・プロジェクトのインポートについて紹介しています。 プロジェクトをインポートし、プロジェクトの設定を …

no image

テナント環境セットアップでテナント固有の属性を登録する。

この CookBook では以下の方法を紹介します。 テナント環境セットアップでテナント固有の属性を登録する方法。 システム管理者のテナント管理画面で、テナント固有の属性を編集する方法。 今回は「外部 …