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

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

サンプル

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

インポートファイル

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

レシピ

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

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

コンテンツ一覧画面を表示してください。
コンテンツツリーから「im_cookbook」＞「im_cookbook_195299」＞「im_cookbook_195299」を選択してください。
「デザイン編集」ボタンをクリックし、デザイナ画面を開いてください。
右ペインの変数タブを開いてください。

「registrationData」の配下の「start」が開始日時、「end」が終了日時の入力内容を格納する変数です。「start」「end」の配下の「date」には必須の入力規則が指定されています。

右ペインのアクションタブを開き、「Custom rule check」アクションの編集アイコンをクリックしてください。
上から2番目の「カスタムスクリプトを実行する」の折り畳みアイコンをクリックしてエディタを開いてください。

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

2. プロパティの設定

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

「入力規則エラーハイライト」プロパティには true か false を指定します。 true を指定した場合、変数の代入値が入力規則に則しているかに関わらず常にエラーのハイライトが表示されます。今回は、以下の条件をすべて満たすときにエラーハイライトが表示されるように指定しています。 1. 独自の入力チェックでエラーになった場合 2. アクションアイテム「入力規則エラーを表示する」を実行した後（登録ボタンをクリックした後）

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

3. 動作確認

「プレビュー」アイコンをクリックしてプレビュー画面を表示してください。
「期間」の「開始日時」「終了日時」が未入力の状態で「登録」ボタンをクリックしてください。「開始日時」と「終了日時」の「日付入力」エレメントに必須の入力規則エラーが表示されます。
「開始日時」と「終了日時」に日付を設定してください。入力規則エラーが解消されます。
「開始日時」が「終了日時」より未来の日時になるように入力してください。「終了日時」の入力項目にエラーハイライトが表示されます。

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