CookBook

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

投稿日:2021-08-10 更新日:

この 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)イベントに、フォーマットするアクション「UnFormat」を設定する
  • フォーカスアウト時(On blur)イベントに、フォーマットを解除するアクション「Format」を設定する

3. 動作確認

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

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

-CookBook

執筆者:


comment

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

関連記事

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

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

no image

IM-BloomMaker Modifier の使い方

このCookBookでは、2020 Summer から利用可能になった環境変数($env)に含まれる「modifier」について紹介しています。 modifier は、同じく 2020 Summer …

IM-BloomMaker のカスタムスクリプト内で $im.resolve を使った一覧画面の作成

この CookBook では、ユーザー情報一覧画面からデータの詳細情報を表示する画面に遷移するために $im.resolve を使う方法を紹介します。 以下のレシピに従って作業を行うと、一覧に表示され …

no image

EWS2017 「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」講演内容のご紹介

この記事では、EWS2017 Technology Track「業務への適用イメージがすぐに湧く!  魔法の業務ロジック作成ツール『IM-LogicDesigner』実用例 10本勝負!」での講演内容 …

no image

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

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