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

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

関連記事

no image

IM-LogicDesigner「繰り返し」「分岐」EL式の定義例

このCookBookでは、IM-LogicDesignerの「条件分岐」「繰り返し」制御要素の条件で利用するEL式について定義例を紹介しています。 ここでは主に「 IM-LogicDesigner上で …

no image

IMBox に投稿種別を追加する方法(Markdown)

このCookBookでは、IMBoxに投稿種別を追加する方法について紹介しています。 以下のドキュメントを参照することで、IMBox に投稿種別を追加することができます。 IMBox プログラミングガ …

no image

ライブラリのバージョン監視に応用可能なロジックフローの作り方

このCookBookでは、IM-LogicDesignerを利用して、指定したURLのHTMLから正規表現を利用して任意の文字列を取得する方法を紹介します。 JavaScript定義とREST定義を作 …

no image

ワークスペース機能におけるイベントカレンダーの利用例

このCookBookでは「intra-mart Accel Collaboration」ワークスペース機能におけるイベントカレンダーの利用例について紹介しています。 intra-mart Accel …

no image

imuiTreeでドラッグ&ドロップのバリデーションを実装する方法

このCookBookでは、imuiTree (ツリービュー) のドラッグ&ドロップバリデーションについて紹介しています。 intra-mart Accel Platform では、画面上にツリーを表示 …

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

RSSRSSRSSRSS