CookBook

IM-BloomMaker 時刻入力のisErrorプロパティを利用して最大値・最小値を分かりやすくする方法

投稿日:2022-12-01 更新日:

このCookBookでは、2022 Winter でリリースした「時刻入力」エレメントの「isError」プロパティの利用方法について説明します。
「時刻入力」エレメントのmaxプロパティでは最大値(最も遅い時刻)、minプロパティでは最小値(最も早い時刻)を指定できます。
maxプロパティ、minプロパティに指定した時刻を超える時刻を入力した場合、以下の動画のようにツールチップが表示されます。


「isError」プロパティは、入力された時刻が最大値、最小値の範囲外かどうかを取得します。
「時刻入力」エレメントに入力した時刻が最大値より遅い場合、または、最小値より早い場合は「true」、そうでない場合は「false」が指定した変数に格納されます。
「isError」プロパティを利用して最大値、最小値の範囲を超えたことをより明示的に示す方法をご紹介します。

完成イメージ

maxプロパティ、minプロパティに指定した時刻を超える時刻を入力した場合、以下の動画のように赤枠のハイライトとメッセージを表示します。

完成サンプル

以下の完成サンプルをダウンロードしてご活用ください。
このサンプルは、2022 Winter 版以降でインポートできます。

レシピ

  1. エレメントを配置する
  2. 「時刻入力」エレメントのプロパティを設定する
  3. 赤枠のハイライトを表示させる
  4. メッセージを表示させる

変数の設定は以下のようになっています。

JSONエディタに下記のコードを入力することで変数を作成することができます。

1. エレメントを配置する

BloomMakerのデザイン編集画面を開き、パレットから以下のエレメントを配置します。

  • フォーム部品(Bulma) - フィールド
  • フォーム部品(Bulma) - 時刻入力
  • フォーム部品(Bulma) - テキスト表示

今回は見た目を整えるため、「フィールド」エレメントの addon プロパティを以下のように設定しています。

  • addon プロパティ - addons

2. 「時刻入力要素」エレメントのプロパティを設定する

  • value プロパティ - 変数値 : $variable.value
  • max プロパティ - 固定値 : 18:00
  • min プロパティ - 固定値 : 09:00
  • isError プロパティ - 変数値 : $variable.isError

3. 赤枠のハイライトを表示させる

maxプロパティ、minプロパティに設定した時刻を超える時刻が入力された場合に、以下の動画のように赤枠のハイライトを表示させる設定をします。

  • 「時刻入力要素」エレメントの「入力エラーハイライト」プロパティを以下のように設定します。
    • 入力エラーハイライト プロパティ - 変数値 : $variable.isError

4. メッセージを表示させる

さらに、 maxプロパティ、minプロパティに指定した時刻を超える時刻を入力した場合に、エラーメッセージを表示します。

  • 「時刻入力」エレメントの横に、「テキスト表示」エレメントを配置します。
  • 「テキスト表示」エレメントのプロパティを以下のように設定します。
    • 表示/非表示 プロパティ - 変数値 : $variable.isError
  • 「テキスト表示要素」エレメントのプロパティを以下のように設定します。
    • value プロパティ - 変数値 : $valiable.message
    • 文字色 プロパティ - 変数値 : $valiable.color

プレビュー画面で動かすと、maxプロパティ、minプロパティに指定した時刻を超える時刻を入力した場合に、赤枠のハイライトとメッセージが表示されることを確認できます。

-CookBook
-

執筆者:


comment

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

関連記事

IM-BISで作成したコンテンツ画面の内容をIM-PDF DesignerでPDFとして出力する方法

このCookBookでは、IM-BISで作成したコンテンツ画面の内容をIM-PDF DesignerでPDFとして出力する方法を紹介しています。 単票および表形式の帳票出力を行います。 完成イメージ …

no image

ViewCreatorの計算式で日付データを操作する例

ViewCreatorを利用するとデータベース等に格納されているデータを簡単に画面に表示することが出来ます。 ViewCreatorについて – intra-mart Accel Platform V …

IM-BloomMaker グラフエレメントの使い方(円グラフ編)

この CookBook では、intra-mart Accel Platform 2019 Winter から利用可能になった IM-BloomMaker の円グラフの活用方法について紹介しています。 …

no image

e Builder から Payara を起動する方法

この CookBook では、e Builder から Payara を起動する方法について紹介しています。 レシピ External Tools を表示します。 Program を追加します。 Pr …

no image

画面に確認ダイアログ(コンファーム)を表示する

画面に確認ダイアログ(imuiConfirm)を表示する方法をご紹介します。 確認ダイアログとは以下の画像のように、ユーザが選択した操作を本当に実行するかどうか確認するための機能です。 確認ダイアログ …