CookBook

BloomMaker 独自の入力チェックでエラーとなった時に入力部品にエラーのハイライトを表示する方法

投稿日:

このCookBookでは、Accel Platform 2021 Springから利用可能になったプロパティ「入力規則エラーハイライト」について紹介しています。
「入力規則エラーハイライト」は、入力された値が変数の入力規則に則していてもエレメントにエラーのハイライトを表示するかを指定するプロパティです。
「テキスト入力」や「ボタン」などの入力系のエレメントで利用可能です。
このプロパティを利用することで、独自の入力チェックでエラーとなった時に入力系のエレメントにエラーハイライトを表示できます。

サンプル

簡単なスケジュール登録画面を模したコンテンツです。
「期間」の開始日時と終了日時は入力必須です。これは、変数の入力規則で「必須」を指定することで実現可能です。
また、「期間」は開始日時が終了日時より未来の日時の場合はエラーとなります。
この CookBook では、開始日時が終了日時より未来の日時の時に、入力項目にエラーハイライトを表示する方法について紹介します。

インポートファイル

この CookBook で使用するサンプルのインポートファイルです。
ダウンロードして BloomMaker のインポート画面からインポートしてください。

cookbook_195299_im_bloommaker-data.zip

レシピ

  1. 独自の入力チェックの実装
  2. プロパティの設定
  3. 動作確認

1. 独自の入力チェックの実装

  1. コンテンツ一覧画面を表示してください。

  2. コンテンツツリーから「im_cookbook」>「im_cookbook_195299」>「im_cookbook_195299」を選択してください。

  3. 「デザイン編集」ボタンをクリックし、デザイナ画面を開いてください。

  4. 右ペインの変数タブを開いてください。

「registrationData」の配下の「start」が開始日時、「end」が終了日時の入力内容を格納する変数です。
「start」「end」の配下の「date」には必須の入力規則が指定されています。
  1. 右ペインのアクションタブを開き、「Custom rule check」アクションの編集アイコンをクリックしてください。

  2. 上から2番目の「カスタムスクリプトを実行する」の折り畳みアイコンをクリックしてエディタを開いてください。

ここに、開始日時と終了日時を判定する処理が記述されています。
処理の結果を「$variable.customError」に格納し、エレメントのプロパティで利用します。

2. プロパティの設定

  1. 終了日時の「日付入力」エレメントを選択してください。

  2. 右ペインのプロパティタブを開き、「共通」カテゴリを開いてください。
    「入力規則エラーハイライト」プロパティに、変数値で以下のように設定されています。
    =$variable.showError && $variable.customError

「入力規則エラーハイライト」プロパティには true か false を指定します。
true を指定した場合、変数の代入値が入力規則に則しているかに関わらず常にエラーのハイライトが表示されます。

今回は、以下の条件をすべて満たすときにエラーハイライトが表示されるように指定しています。
1. 独自の入力チェックでエラーになった場合
2. アクションアイテム「入力規則エラーを表示する」を実行した後(登録ボタンをクリックした後)

  1. 終了日時の「プルダウン」エレメントを選択してください。

  2. 右ペインのプロパティタブを開き、「共通」カテゴリを開いてください。
    前述の「日付入力」エレメントと同様に、「入力規則エラーハイライト」プロパティに、変数値で以下のように設定されています。
    =$variable.showError && $variable.customError

3. 動作確認

  1. 「プレビュー」アイコンをクリックしてプレビュー画面を表示してください。

  2. 「期間」の「開始日時」「終了日時」が未入力の状態で「登録」ボタンをクリックしてください。
    「開始日時」と「終了日時」の「日付入力」エレメントに必須の入力規則エラーが表示されます。

  3. 「開始日時」と「終了日時」に日付を設定してください。
    入力規則エラーが解消されます。

  4. 「開始日時」が「終了日時」より未来の日時になるように入力してください。
    「終了日時」の入力項目にエラーハイライトが表示されます。

補足

「参加者」の入力項目には、Accel Platform 2021 Springで追加されたエレメント「複数選択ユーザ検索」を利用しています。
「複数選択ユーザ検索」は、共通マスタに登録されているユーザを検索し、複数選択するエレメントです。
今回は初期値として、サンプルデータの「aoyagi」と「ikuta」のユーザコードを指定しています。
サンプルデータセットアップを行っている場合、「aoyagi」と「ikuta」のユーザ名が表示されます。
また、ユーザを設定する際に、オートコンプリートにユーザ名が表示されます。

-CookBook
-

執筆者:


comment

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

関連記事

結合処理で「多数決」承認機能を実現する

このCookBookでは、「多数決」承認機能を実現する方法について紹介しています。 完成イメージ 以下の完成サンプルをダウンロードしてご活用ください。 im_logicdesigner-data-14 …

no image

Payara 5.184 を Google Kubernetes Engine(GKE) から利用する

この CookBook では、Payara を GKE 上で実行しクラスタリングを構築する手順について紹介しています。 Payara 5.184 で Kubernetes Cluster Mode が …

no image

IM-BloomMaker 「マルチファイルアップロード」エレメントの利用方法

このCookBookでは、 2021 Spring でリリースした「マルチファイルアップロード」エレメントの利用方法について説明していきます。 登録画面でアップロードしたファイルを別画面でダウンロード …

no image

imuiListTableで複数選択した行データを取得する方法

このCookBookでは、imuiListTableで複数選択した行データを取得する方法を紹介します。 imuiListTableについての詳細はAPIドキュメントを参照してください。 [imuiLi …

no image

intra-mart WebPlatform の access.log に X-Forwarded-For を出力する方法。

この CookBook では、intra-mart WebPlatform の access.log に X-Forwarded-For を出力する方法について紹介しています。 フロントに Web サ …