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

IMBox に投稿種別を追加する方法(textile)

このCookBookでは、IMBoxに投稿種別を追加する方法について紹介しています。 以下のドキュメントを参照することで、IMBox に投稿種別を追加することができます。 IMBox プログラミングガ …

no image

IM-BloomMaker IE で画面を開くと「Internet Explorer は対応していません。」と表示するアプリケーションの作成方法

この CookBook では、 IE で画面を開くとダイアログで「Internet Explorer は対応していません。」と表示するアプリケーションを作成します。 Accel Platform 20 …

no image

AWS 上に Accel Platform を構築する方法

  この CookBook では、AWS の仮想マシン機能(Amazon EC2)を用いて、スタンドアローンで intra-mart Accel Platform を構築する方法について紹介 …

no image

IM-BloomMaker 異なるコンテンツ間でアクションをコピーする方法

この CookBook では intra-mart Accel Platform 2021 Winter から利用可能になったアクションの複製機能を使用して、異なるコンテンツ間でアクションをコピーする …

IM-BloomMaker フォーム部品(Bulma)のグループ化と結合の使い方

このCookBookでは、intra-mart Accel Platform 2020 Summer から利用可能になった コンテンツ種別「Bulma」の「フォーム部品(Bulma)」を使用したグルー …