CookBook

BloomMaker で3桁区切りの数値フォーマットを自動で行うテキストボックスを作成する方法

投稿日:

この CookBook では、IM-BloomMaker を使用して、3桁区切りの数値フォーマットを自動で行うテキストボックスを作成する方法を紹介します。
※この CookBook は 2021 Summer リリース時点での実現方法です。 今後のアップデートによる改善で、より簡単な方法が提供される場合があります。

完成イメージ

完成サンプル

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

cookbook_198925_im_bloommaker-data

ローカル環境で表示させる場合は、以下のURLにアクセスしてください。
あらかじめ、IM-BloomMaker のルーティング定義で、認可を設定してください。
http://localhost:8080/imart/im_cookbook/198925
なおベースURLである以下の部分は、環境に合わせて適宜変更してください。
http://localhost:8080/imart

レシピ

  1. 数値フォーマット用のアクションを用意する
  2. テキストボックスを配置してアクションを設定する
  3. 動作確認

1. 数値フォーマット用のアクションを用意する

数値を3桁区切りにフォーマットするアクション、および、フォーマットを解除するアクションをそれぞれ作成します。

フォーマットするアクション(アクション名:「Format」):
カスタムスクリプトで、以下のコードを入力します。
[code language="javascript"]
$variable.value = $variable.value
// 数値、マイナス記号、小数点以外の文字を除去します
.replace(/[^0-9\.\-]+/g, '')
// 先頭以外のマイナス記号を除去します
.replace(/(.)\-/g, (v, g1) => g1)
// 小数点を区切りとして、配列に分割します
.split('.')
// 小数点より左側を3桁区切りに変更します
.map((v, i) => i ? v : (+v).toLocaleString())
// 分割した配列を、再び小数点で結合します
.join('.');
[/code]

フォーマットを解除するアクション(アクション名:「Unformat」):
カスタムスクリプトで、以下のコードを入力します。
[code language="javascript"]
// 3桁区切りに使われたカンマを除去します
$variable.value = $variable.value.replace(/,/g, '');
[/code]

2. テキストボックスを配置してアクションを設定する

テキストボックスエレメントを配置して、以下を設定します。

  • フォーカスイン時(On focus)イベントに、フォーマットするアクション「Format」を設定する
  • フォーカスアウト時(On blur)イベントに、フォーマットを解除するアクション「Unformat」を設定する

3. 動作確認

プレビューを開き、動作確認を行います。
以下の動作を確認できます。

  • テキストボックスに数値を入力してフォーカスを外すと、3桁区切りでフォーマットされること
  • テキストボックスにフォーカスを移すと、3桁区切りが解除されること

-CookBook

執筆者:


comment

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

関連記事

no image

IM-BloomMaker でウィザード形式の設定画面の作り方

この CookBook では、IM-BloomMaker を使用して、ウィザード形式で設定を進めていくような画面を作成する方法を紹介します。 完成イメージ 完成サンプル 以下の完成サンプルをダウンロー …

ワークフローの参照者を動的に設定する

このCookbookでは、IM-Workflow 2018 Springから新たに追加された 処理対象者プラグイン「ロジックフロー(ユーザ)」 の設定方法を紹介いたします。 この機能を利用すると、申請 …

no image

Forma標準アプリとIM-LogicDesignerを利用してBISワークフローの一括承認画面を作成する

このCookBookでは、Forma標準アプリとLogicDesignerを利用して、BISワークフローの一括承認画面を作成する方法を紹介します。 完成イメージ ① 承認を実施するフローとノードを設定 …

no image

祝日や会社の予定を設定したカレンダーを作成する

このCookbookでは、祝日や独自の予定を設定したカレンダーを活用する方法について紹介します。テナント管理者はカレンダーの作成、メンテナンスを行えます。また、テナントのデフォルトカレンダーを設定でき …

no image

Payara で Java のリモートデバッグを行う

この CookBook では、Payara のリモートデバッグを行う手順について紹介しています。 レシピ Payara を設定する e Builder を設定する リモートデバッグを行う 1. Pay …