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

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

関連記事

標準の画面アイテムを利用して「先頭へ戻る」ボタンを実現する

このCookBookでは、標準の画面アイテムを利用して「先頭へ戻る」ボタンを実現する方法について紹介しています。 本稿では、表示する項目が多く縦長い画面で下へスクロールすると右下に「先頭へ戻る」ボタン …

no image

IM-FormaDesignerで作成したフォーム内で、外部連携を利用して最も簡単に値を渡す方法(単一アイテム編)

このCookBookでは、IM-FormaDesignerで作成したフォーム画面の中で、アイテムからアイテムへ値を渡す方法について紹介します。 今回は例として、文字列と数値の値を同時にアイテムからアイ …

no image

スクリプト開発した画面にバリデーション(入力チェック)を実装する

このCookBookでは、作成した画面項目に対してバリデーション(入力チェック)を設定する方法をご紹介します。 今回はスクリプト開発で登録フォームを作成するで作成した画面項目に対して、クライアントサイ …

no image

IM-FormaDesignerで複数のセレクトボックスを連動させて利用する方法

このCookbookでは、セレクトボックスの選択結果によって、他のセレクトボックスの選択肢を絞り込む方法を説明します。 この方法は、IM-FormaDesignerのみ導入環境での方法です。 IM-B …

【ViewCreator】LogicDesignerと連携してデータ参照の一覧を表示するデータ参照を作成する方法

ViewCreator において、標準の「データ参照一覧」画面では以下のような変更ができません。 「説明」を一覧に表示する。 「データ参照名」の(初期表示時の)列幅を変更する。 各データ参照の表示画面 …

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

RSSRSSRSSRSS