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

SAMLユーザマッピングのジョブを作成する

標準機能では、IdPユーザとintra-martユーザを紐付けるには以下の方法があります。・SAMLユーザマッピング画面からユーザ毎に登録する。・SAMLユーザマッピング画面からCSVファイルを利用し …

IM-BloomMaker Bulma タイルの利用方法

この CookBook では、 2020 Summer でリリースした Bulma の「タイル」エレメントの利用方法について説明していきます。 「タイル」エレメントは自由にグリッドレイアウトを構築する …

no image

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

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

Formaでスクリプトアイテムを使い、ボタン・見出し等の色やサイズを変更する方法

このCookBookでは、Formaでスクリプトアイテムを使い、デザインを変更する方法をご紹介します。 サンプルでは、「ボタンアイテム」の背景色の変更・「見出し」の背景色の変更・「ラジオボタン」のボタ …

no image

IM-LogicDesignerで、ファイルアップロードに添付されたファイルの内容を、画面上に表示させる方法

このCookBookでは、IM-LogicDesignerで、ファイルアップロードに添付されたファイルの内容を、画面上に表示させる方法を紹介します。 完成イメージ 完成サンプル 以下の完成サンプルをダ …