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

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

関連記事

配置可能なエレメントを簡単に判断する方法

このCookBookでは、配置可能なエレメントを簡単に判断する方法について紹介しています。 BloomMakerのエレメントには配置するのに制限があるものがあります。例えば、「フォーム部品(Bulma …

BloomMakerでワークフローの一括代理設定画面を作成する

このCookBookでは、BloomMakerで、ワークフローの代理設定を一括で登録する画面を作成してみました。 本稿で紹介のサンプルのように、BloomMakerを利用することで、ちょっとした要件に …

no image

No.8 Excel からの一括ユーザ一括登録

この記事は、EWS 2017で行われたLogicDesignerの講演内容に関する記事です。 こちらの例では、LogicDesignerを利用して、入社や組織変更等の発生時に有用なExcelファイルの …

no image

No.5 外部サイトの定期監視

この記事は、EWS 2017で行われたLogicDesignerの講演内容に関する記事です。 こちらの例では、LogicDesignerからIM-FormaDesigner / IM-BIS / IM …

no image

スクリプト開発で利用できる close 関数のご紹介

この CookBook では、スクリプト開発で利用できる close 関数について紹介します。 スクリプト開発では作成した js ファイルの中に init と言う名前の関数を定義すると思いますが、この …