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

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

関連記事

no image

デバッグサーバ起動時に出力されるコンソールの情報をファイル出力する方法

このCookBookでは、e Builder でデバッグサーバの利用時にコンソールに出力された内容を、別途指定したファイルに出力する方法について紹介しています。 完成イメージ 1. 指定したファイルに …

no image

共通マスタのアカウント更新を契機に、IMBoxグループに参加させる方法(IM-LogicDesigner トリガ定義)

このCookBookでは、共通マスタのアカウント更新を契機に、IMBoxのGroupBoxに参加させる方法を紹介します。 IM-LogicDesignerのトリガ定義を利用することで、ノンプログラミン …

no image

intra-mart WebPlatform をサイレントインストールする方法

この CookBook では、intra-mart WebPlatform をサイレントインストールする方法について紹介しています。 インストーラのサイレント・モードについては以下のセットアップに記載 …

no image

テナント環境セットアップ時にテーブルが作成されるよう設定する

e Builderを利用して作成したアプリケーションにおいて、テナント環境セットアップ時に自動でテーブルが作成されるように設定する手順を紹介します。 今回は例として、CookBook:フォームに入力し …

no image

intra-martのアプリケーションをセットアップする

このCookBookでは、intra-mart Accel Collaborationをセットアップしてアプリケーションを使える状態にする方法を紹介します。レシピの最後では、実際にintra-mart …

RSSRSSRSSRSS