CookBook

IM-BloomMaker 数値入力(フォーマット)の独自のプロパティの紹介

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

2022 Winter にリリースした「数値入力(フォーマット)」エレメントは、数値ボックスを表示するエレメントです。3桁区切りや0埋めのフォーマットを利用できます。
この CookBook では、「数値入力(フォーマット)」エレメントの以下の4つのエレメント固有プロパティについて紹介します。

  • decimalFormat プロパティ
  • fractionalPartLength プロパティ
  • round プロパティ
  • saveRoundedValue プロパティ

事前準備

今回はプロパティの動作を紹介するため、あらかじめ画面を作成します。

完成サンプル

以下の完成サンプルをダウンロードし、お手元の環境でもお試しください。
このサンプルは、2022 Winter 版以降でインポートできます。

使用する変数

以下の変数を作成します。

使用するエレメント

以下のようにエレメントを配置します。

  • 「ボックス」エレメント
    • 「ラベル」エレメント
    • 「強調ラベル」エレメント
  • 「フィールド」エレメント
    • 「数値入力(フォーマット)」エレメント
  • 「ボックス」エレメント
    • 「ラベル」エレメント
    • 「数値入力」エレメント
  • 「ボックス」エレメント
    • 「チェックボックス」エレメント

エレメントのプロパティの設定

エレメントのプロパティを設定します。

以下のようにプロパティを設定してください。

  • ラベル①
    • textContent プロパティ / 固定値 / value:
  • 強調ラベル
    • textContent プロパティ / 変数値 / $variable.key1
  • フィールド
    • addon プロパティ / addons
  • 数値入力(フォーマット)
    • value プロパティ / 変数値 / $variable.key1
    • round プロパティ / そのまま表示
    • fractionalPartLength プロパティ / $variable.fractionalPartLength
    • saveRoundedValue プロパティ / $variable.saveRoundedValue
  • ラベル②
    • textContent プロパティ / 固定値 / fractionalPartLength:
  • 数値入力
    • value プロパティ / 変数値 / $variable.fractionalPartLength
  • チェックボックス
    • textContent プロパティ / 固定値 / saveRoundedValue
    • checked プロパティ / 変数値 / $variable.saveRoundedValue

これで、事前準備は終了です。
続いて各プロパティについて紹介します。

decimalFormat プロパティ

decimalFormat プロパティでは、3桁区切りの方法を指定します。
以下のフォーマットを選択できます。

  • <なし>
  • 3桁カンマ・小数点ピリオド
  • 3桁ピリオド・小数点カンマ
  • アカウントの設定
<なし> :value プロパティの数値を3桁区切りせず、そのまま表示します。
3桁カンマ・小数点ピリオド:value プロパティの数値を3桁カンマ・小数点ピリオドでフォーマットした値を表示します。
3桁ピリオド・小数点カンマ:value プロパティの数値を3桁ピリオド・小数点カンマでフォーマットした値を表示します。
アカウントの設定:ホーム画面 ⇒ 個人設定 ⇒ 数値形式 で設定したフォーマットになります。
こちらの画像では、3桁アポストロフィ・小数点ピリオドを選択しています。

fractionalPartLength プロパティ

fractionalPartLength プロパティでは、小数点以下の桁数を指定します。0から20までの整数を指定できます。

動作確認をするために、「数値入力(フォーマット)」エレメントの round プロパティを四捨五入に変更します。
fractionalPartLength プロパティの値に応じて、小数点以下桁数が変わります。また、小数点以下に数値がない場合は0埋めで数値を表示します。

round プロパティ

round プロパティでは、value プロパティに設定した値の小数部桁数が fractionalPartLength プロパティに設定した値より大きい場合の端数処理の方法を指定します。
以下の方法から選択できます。

  • そのまま表示
  • 切り上げ
  • 切り捨て
  • 四捨五入

「そのまま表示」を選択すると、以下のように小数点以下を処理をせずにそのまま表示します。
また、 小数点以下に数値がない場合は0埋めで数値を表示します。

saveRoundedValue プロパティ

saveRoundedValue プロパティでは、端数処理をした数値を「value」プロパティに保存するかどうかを指定します。

保存する場合、以下のように端数処理した値で、value プロパティの値が上書きされます。

最後に

この CookBook では「数値入力(フォーマット)」エレメントの、エレメント固有プロパティについて紹介しました。
「数値入力(フォーマット)」エレメントは3桁数区切りのフォーマットを指定するだけでなく、小数点以下の桁数や、端数処理の方法、また端数処理した値を保存するかどうかなど、さまざまな設定をすることができます。
今回紹介したプロパティを利用して、「数値入力(フォーマット)」エレメントをお好みで利用してください。

-CookBook
-

執筆者:


comment

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

関連記事

複数の種類のグラフを組み合わせて表示したり、自由にオプションを指定してグラフを表示したりできるエレメントのサンプル

このCookBookでは、IM-BloomMaker で作成するアプリケーション画面で複数の種類のグラフを組み合わせて表示したり、自由にオプションを指定してグラフを表示したりできるエレメントのサンプル …

no image

データ参照表示時のページへのアクセス権を認可で制御する方法

この CookBook では、ViewCreator の「データ参照」表示時のアクセス権を認可で制御する方法について紹介しています。 データ参照の参照権では、その定義を利用してデータを見ることができる …

no image

IM-BloomMaker 画面構成タブでテーブルの行または列を入れ替える方法

この CookBook では、 Accel Platform 2020 Winter から利用可能になった、画面構成タブでテーブルエレメント配下のエレメントを並び替えられる方法を紹介します。 Acce …

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

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

no image

後処理プログラムで画面アイテム「ファイルアップロード」にバリデーションを実行する方法

このCookbookでは、画面アイテム「ファイルアップロード」に添付されたファイルをバリデーションする方法を紹介します。 後処理プログラムを使用してバリデーションを実行することで、画面に表示するエラー …