CookBook

BloomMaker 入力規則エラーメッセージエレメントの使い方

投稿日:2021-04-02 更新日:

このCookBookでは、Accel Platform 2021 Springで追加されたエレメント「入力規則エラーメッセージ」について紹介しています。
「入力規則エラーメッセージ」は、指定した変数に代入された値が入力規則に則していない時にエラーメッセージを表示するエレメントです。
入力規則に応じたメッセージが表示されるため、ユーザがメッセージを定義する必要はありません。
「入力規則エラーメッセージ」は、どのコンテンツ種別でも利用できる標準版と、コンテンツ種別「Bulma」で利用できる「フィールド」エレメント内で利用可能なBulma版の二つが存在します。
このCookBookでは標準版、Bulma版の両方の使い方について紹介します。

サンプル

このCookBookで使用するサンプルのインポート資材です。BloomMaker のインポート画面からインポートしてください。

cookbook_194891_im_bloommaker-data.zip

サンプルの内容

  • コンテンツ
    ┗コンテンツ一覧画面
        ┗im_cookbook
            ┗im_cookbook_194891
                ┗im_cookbook_194891
                ┗im_cookbook_194891_bulma

im_cookbook_194891

簡単なユーザ一覧画面を模したコンテンツです。
登録ボタンをクリックするとユーザ登録用のダイアログが開きます。
ダイアログの各項目を入力して決定ボタンをクリックするとダイアログが閉じ、ユーザ一覧画面のテーブルにデータが追加されます。
「ユーザコード」は「必須」「ユーザコード形式」の入力規則が適用されています。
そのため、ユーザコードが未入力の場合や、ユーザコードに使用できない記号が含まれている場合はデータが登録されません。

im_cookbook_194891_bulma

上記で紹介した「im_cookbook_194891」を、コンテンツ種別「Bulma」で利用できるエレメント、およびアクションを利用して作り替えたコンテンツです。
動作は「im_cookbook_194891」と同じです。

上記で紹介した二つのコンテンツの登録ダイアログでは、ユーザコードが未入力の場合や、ユーザコードに使用できない記号が含まれている場合はデータを登録できないようになっています。
しかし、その内容が画面に表示されないため、ユーザは入力内容にどのような問題があるかを判断できません。
「入力規則エラーメッセージ」エレメントを使って入力規則エラーの内容が画面に表示されるようにしてみます。

標準の「入力規則エラーメッセージ」エレメントの使い方

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

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

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

  4. 「Registration dialog」ページを表示してください。

  5. 「ユーザコード」の右側の「フレックスアイテム」エレメントの配下に、パレットの「レイアウト」カテゴリの「ボックス」エレメントを二つ配置してください。

  6. 「フレックスアイテム」の配下に配置されている「テキスト入力」エレメントを、一つ目の「ボックス」エレメントの配下に移動させてください。

  7. 二つ目の「ボックス」エレメントの配下に、パレットの「汎用」カテゴリの「入力規則エラーメッセージ」エレメントを配置してください。

  8. 配置した「入力規則エラーメッセージ」エレメントを選択してください。

  9. 右ペインのプロパティタブを開き、プロパティを以下の通り設定してください。

    プロパティ 固定値・変数値 設定値
    variable 変数値 $variable.registerData.userCd
    caption 変数値 $i18n.user_cd

入力規則に則しているかチェックしたい変数を、「入力規則エラーメッセージ」エレメントの variable プロパティに指定します。
caption プロパティは、入力規則エラーが発生した時にエラーメッセージに表示したい入力項目名を指定します。

今回は、ユーザコードの入力規則エラーの内容を表示したいため、ユーザコードの入力内容を格納する変数と、入力項目名を指定しています。

以上でデザイナ画面での作業は終わりです。
プレビュー画面で動作を確認してみます。

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

  2. 「登録」ボタンをクリックしてダイアログを開いてください。

  3. 何も入力せずに「決定」ボタンをクリックしてください。
    ユーザコードのテキストボックスの下に、入力項目は必須である旨のエラーメッセージが表示されます。

  4. 「ユーザコード」にユーザコードに使用できない記号を入力し、「決定」ボタンをクリックしてください。
    ユーザコードのテキストボックスの下に、ユーザコード形式で入力する必要がある旨のエラーメッセージが表示されます。

Bulmaの「入力規則エラーメッセージ」エレメントの使い方

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

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

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

  4. 「Registration dialog」ページを表示してください。

  5. 「ユーザコード」の右にある「フィールド」エレメントを選択してください。

  6. 右ペインのプロパティタブを開き、「エレメント固有」カテゴリの「showValidationErrorMessage」プロパティにチェックをつけてください。
    「フィールド」エレメントの配下に「入力規則エラーメッセージ」エレメントが表示されます。

  7. 表示された「入力規則エラーメッセージ」エレメントを選択してください。

  8. 右ペインのプロパティタブを開き、プロパティを以下の通り設定してください。

    プロパティ 固定値・変数値 設定値
    variable 変数値 $variable.registerData.userCd
    caption 変数値 $i18n.user_cd

以上でデザイナ画面での作業は終わりです。
プレビュー画面で動作を確認してみます。

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

  2. 「登録」ボタンをクリックしてダイアログを開いてください。

  3. 何も入力せずに「決定」ボタンをクリックしてください。
    ユーザコードのテキストボックスの下に、入力項目は必須である旨のエラーメッセージが表示されます。

  4. 「ユーザコード」にユーザコードに使用できない記号を入力し、「決定」ボタンをクリックしてください。
    ユーザコードのテキストボックスの下に、ユーザコード形式で入力する必要がある旨のエラーメッセージが表示されます。

-CookBook
-

執筆者:


comment

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

関連記事

no image

imuiListTableでセルに配置したアイコンから別画面に遷移する方法

このCookBookでは、imuiListTableでセルに配置したアイコンから別画面に遷移する方法について紹介しています。 imuiListTableについての詳細はAPIドキュメントを参照してくだ …

no image

IM-BloomMaker リッチテーブルの行の詳細画面を別タブで開く方法

このCookBookでは、リッチテーブルの行をクリックした時に別タブで詳細画面を開く方法について紹介しています。 リッチテーブルから詳細画面を開く方法は複数ありますが、このCookBookではそのうち …

no image

ワークスペースとスケジュール機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のスケジュー …

スプレッドシートのバインディングデータを別途テーブルに出力する方法

スプレッドシートのJsonデータとバインディングデータは、Formaヘッダーテーブルにバイナリカラムで格納されます。 Formaヘッダーテーブルに格納されたスプレッドシートデータは、登録データ情報管理 …

no image

スクリプト開発した画面にバリデーション(入力チェック)を実装する

このCookBookでは、作成した画面項目に対してバリデーション(入力チェック)を設定する方法をご紹介します。 今回はスクリプト開発で登録フォームを作成するで作成した画面項目に対して、クライアントサイ …

RSSRSSRSSRSS