CookBook

IM-BloomMaker 入力規則エラーメッセージをカスタマイズする方法

投稿日:

このCookBookでは、「入力規則エラーメッセージ」エレメントに表示されるエラーメッセージをカスタマイズする方法について説明します。

intra-mart Accel Platform 2024 Autumn から、変数の入力規則に任意のエラーメッセージを指定できるようになりました。
「入力規則エラーメッセージ」エレメントには変数に指定したエラーメッセージが表示されるようになります。
以下の入力規則に任意のエラーメッセージを指定できます。

  • 正規表現パターン
    • ID形式
    • ユーザコード形式
    • Eメールアドレス形式
    • URL形式
    • 正規表現にマッチする形式

「入力規則エラーメッセージ」エレメントの使い方は、以下を参照してください。

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

intra-mart Accel Platform 2024 Autumn より前のバージョンでは、エラーメッセージのカスタマイズはできないので注意してください。

サンプル

この CookBook で使用するサンプルのインポートファイルです。
IM-BloomMaker のインポート画面からインポートしてください。
intra-mart Accel Platform 2024 Autumn 以降のバージョンで利用できます。

im_cookbook_250205_im_bloommaker-data.zip

手順

  1. 変数を作成する
  2. 変数の入力規則とエラーメッセージを指定する
  3. エレメントのプロパティを設定する
  4. 動作確認
  5. メッセージに入力項目名を埋め込む
  6. メッセージを多言語化する

1. 変数を作成する

  • 上記の「サンプル」のインポートファイルをダウンロードし、IM-BloomMaker のインポート画面からインポートしてください。
    インポートの方法は以下のドキュメントを参照してください。
    IM-BloomMaker for Accel Platform IM-BloomMaker ユーザ操作ガイド
  • コンテンツ一覧画面を表示してください。
  • コンテンツツリーから「intra-mart CookBook」>「im_cookbook_250205」>「im_cookbook_250205」のコンテンツを選択し、「デザイン編集」ボタンをクリックしてください。
  • 右ペインの「変数」タブを表示し、「新規作成」ボタンをクリックしてください。
  • キー名を「id」に変更してください。

2. 変数の入力規則とエラーメッセージを指定する

  • 入力規則の「フォーマット指定」のプルダウンから「ID形式」を選択してください。
  • 「フォーマット指定」の下に「フォーマットに則していないときのエラーメッセージ」が表示されます。

    「フォーマットに則していないときのエラーメッセージ」に指定したメッセージが入力規則エラーメッセージとして使用されます。
  • 「固定文字列」のラジオボタンをクリックし、その下のテキストエリアに「This is a sample error message.」を入力してください。
  • 「決定」ボタンをクリックしてください。

3. エレメントのプロパティを設定する

  • コンテナページに配置されている「テキスト入力」エレメントを選択してください。
  • 右ペインの「プロパティ」タブを表示してください。
  • 「value」プロパティを変数値に変更し、「$variable.id」を指定してください。
  • 「入力規則エラーメッセージ」エレメントを選択してください。
  • 右ペインの「プロパティ」タブを表示してください。
  • 「variable」プロパティに「$variable.id」を指定してください。

4. 動作確認

  • プレビュー画面を開いてください。
  • テキストボックスにバックスラッシュ(\)を入力してください。
  • 「2. 変数の入力規則とエラーメッセージを指定する」の手順で指定したエラーメッセージが表示されます。

5. メッセージに入力項目名を埋め込む

  • デザイナ画面に戻り、「入力規則エラーメッセージ」エレメントを選択してください。
  • 右ペインの「プロパティ」タブを表示してください。
  • 「caption」プロパティに「ID」を入力してください。
  • 右ペインの「変数」タブを表示し、「id」の編集アイコンをクリックしてください。
  • 「フォーマットに則していないときのエラーメッセージ」の固定文字列のテキストエリアに以下の文字列を入力してください。
    Only single-byte alphanumeric characters and _-@.+! are allowed for ${caption}.

    メッセージに ${caption} を含めると、実際にエラーメッセージが表示される時に「入力規則エラーメッセージ」エレメントの「caption」プロパティの値に置き換えられます。
  • 「決定」ボタンをクリックしてください。
  • プレビュー画面を開いてください。
  • テキストボックスにバックスラッシュ(\)を入力してください。
  • ${caption} が入力項目名に置き換えられたエラーメッセージが表示されます。

6. メッセージを多言語化する

  • デザイナ画面に戻り、右ペインの「変数」タブを表示してください。
  • 「id」の編集アイコンをクリックしてください。
  • 「フォーマットに則していないときのエラーメッセージ」の「定数・多言語から」を選択してください。
  • テキストボックスの「選択」アイコンをクリックしてください。
  • 「多言語」ボタンをクリックし、「errorMessage」を選択してください。
  • 「決定」ボタンをクリックしてください。

    メッセージを多言語として定義しておくことで、ユーザが利用している言語に対応するエラーメッセージを表示できます。
  • 「決定」ボタンをクリックしてください。
  • プレビュー画面を開いてください。
  • テキストボックスにバックスラッシュ(\)を入力してください。
  • 利用している言語に対応するエラーメッセージが表示されます。
    • 英語の場合
    • 日本語の場合
    • 中国語の場合

最後に

このCookBookでは、入力規則エラーメッセージをカスタマイズする方法について説明しました。
うまく動かない場合は、インポートファイルに含まれている「im_cookbook_250205_final_version」のコンテンツを参考にしてください。

-CookBook
-

執筆者:


comment

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

関連記事

no image

OAuth2.0 の アクセストークンを Google から取得する方法

このクックブックでは、OAuth2.0 の アクセストークンを Google から取得する方法を説明します。 intra-mart Accel Platformでは、OAuth2.0 の アクセストー …

IM-BloomMaker Bulma を使用した参照系画面の作成

この CookBook では、 2020 Summer でリリースした Bulma のフレームワークを使用した参照系の画面を作成します。 ユーザをテーブル形式で一覧に表示し、列ごとに参照したり、ユーザ …

no image

画面UI部品(imuiValidate)のバリデーションメッセージを任意の場所に表示する方法

このCookBookでは、画面UI部品のバリデーションメッセージを任意の場所に表示する方法について紹介しています。 intra-mart Accel Platform では、画面上に配置したUI部品の …

no image

ライブラリのバージョン監視に応用可能なロジックフローの作り方

このCookBookでは、IM-LogicDesignerを利用して、指定したURLのHTMLから正規表現を利用して任意の文字列を取得する方法を紹介します。 JavaScript定義とREST定義を作 …

no image

Azure 上に iAP を構築する方法

  この CookBook では、Azure の Virtual Machines 機能を用いて、スタンドアローンで intra-mart Accel Platform を構築する方法につい …