このCookBookでは、Accel Platform 2021 Springから利用可能になったプロパティ「入力規則エラーハイライト」について紹介しています。
「入力規則エラーハイライト」は、入力された値が変数の入力規則に則していてもエレメントにエラーのハイライトを表示するかを指定するプロパティです。
「テキスト入力」や「ボタン」などの入力系のエレメントで利用可能です。
このプロパティを利用することで、独自の入力チェックでエラーとなった時に入力系のエレメントにエラーハイライトを表示できます。
サンプル
簡単なスケジュール登録画面を模したコンテンツです。
「期間」の開始日時と終了日時は入力必須です。これは、変数の入力規則で「必須」を指定することで実現可能です。
また、「期間」は開始日時が終了日時より未来の日時の場合はエラーとなります。
この CookBook では、開始日時が終了日時より未来の日時の時に、入力項目にエラーハイライトを表示する方法について紹介します。
インポートファイル
この CookBook で使用するサンプルのインポートファイルです。
ダウンロードして BloomMaker のインポート画面からインポートしてください。
cookbook_195299_im_bloommaker-data.zip
レシピ
- 独自の入力チェックの実装
- プロパティの設定
- 動作確認
1. 独自の入力チェックの実装
-
コンテンツ一覧画面を表示してください。
-
コンテンツツリーから「im_cookbook」＞「im_cookbook_195299」＞「im_cookbook_195299」を選択してください。
-
「デザイン編集」ボタンをクリックし、デザイナ画面を開いてください。
-
右ペインの変数タブを開いてください。
「start」「end」の配下の「date」には必須の入力規則が指定されています。
-
右ペインのアクションタブを開き、「Custom rule check」アクションの編集アイコンをクリックしてください。
-
上から2番目の「カスタムスクリプトを実行する」の折り畳みアイコンをクリックしてエディタを開いてください。
処理の結果を「$variable.customError」に格納し、エレメントのプロパティで利用します。
2. プロパティの設定
-
終了日時の「日付入力」エレメントを選択してください。
-
右ペインのプロパティタブを開き、「共通」カテゴリを開いてください。
「入力規則エラーハイライト」プロパティに、変数値で以下のように設定されています。
=$variable.showError && $variable.customError
true を指定した場合、変数の代入値が入力規則に則しているかに関わらず常にエラーのハイライトが表示されます。
今回は、以下の条件をすべて満たすときにエラーハイライトが表示されるように指定しています。
1. 独自の入力チェックでエラーになった場合
2. アクションアイテム「入力規則エラーを表示する」を実行した後（登録ボタンをクリックした後）
-
終了日時の「プルダウン」エレメントを選択してください。
-
右ペインのプロパティタブを開き、「共通」カテゴリを開いてください。
前述の「日付入力」エレメントと同様に、「入力規則エラーハイライト」プロパティに、変数値で以下のように設定されています。
=$variable.showError && $variable.customError
3. 動作確認
-
「プレビュー」アイコンをクリックしてプレビュー画面を表示してください。
-
「期間」の「開始日時」「終了日時」が未入力の状態で「登録」ボタンをクリックしてください。
「開始日時」と「終了日時」の「日付入力」エレメントに必須の入力規則エラーが表示されます。
-
「開始日時」と「終了日時」に日付を設定してください。
入力規則エラーが解消されます。
-
「開始日時」が「終了日時」より未来の日時になるように入力してください。
「終了日時」の入力項目にエラーハイライトが表示されます。
「参加者」の入力項目には、Accel Platform 2021 Springで追加されたエレメント「複数選択ユーザ検索」を利用しています。
「複数選択ユーザ検索」は、共通マスタに登録されているユーザを検索し、複数選択するエレメントです。
今回は初期値として、サンプルデータの「aoyagi」と「ikuta」のユーザコードを指定しています。
サンプルデータセットアップを行っている場合、「aoyagi」と「ikuta」のユーザ名が表示されます。
また、ユーザを設定する際に、オートコンプリートにユーザ名が表示されます。
