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

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

関連記事

no image

ワークスペースとファイルライブラリ機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のファイルラ …

no image

IM-BloomMaker レイアウトの作り方(縦に並べる編)

この CookBook では、コンテンツ種別が Bulma のレイアウトを縦に並べる方法を紹介します。また、レイアウトを横に並べる編もありますので、併せてご確認ください。https://dev.int …

no image

未完了案件・完了案件を全て削除する方法

このCookBookでは、LogicDesignerを利用してワークフローの未完了案件・完了案件を一括削除する方法を紹介します。 開発環境のお掃除に役立つTipsです。 削除した案件は復元することがで …

no image

Payara blog のご紹介

この CookBook では Payara のブログについて紹介したいと思います。 以下の URL で Payara に関する様々な記事が投稿されています。 https://blog.payara.f …

no image

imuiListTableでセルに配置したアイコンから別画面に遷移する方法

このCookBookでは、imuiListTableでセルに配置したアイコンから別画面に遷移する方法について紹介しています。 imuiListTableについての詳細はAPIドキュメントを参照してくだ …