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

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

関連記事

IM-BloomMaker Bulma タイルの利用方法

この CookBook では、 2020 Summer でリリースした Bulma の「タイル」エレメントの利用方法について説明していきます。 「タイル」エレメントは自由にグリッドレイアウトを構築する …

no image

スクリプト開発で登録フォームを作成する

このCookBookでは、スクリプト開発で登録フォームを作成する際に役立つ Tips を紹介します。 第1回:スクリプト開発で登録フォームを作成する 第2回:フォームに入力した内容をデータベースに登録 …

IM-BloomMaker で作成した画面で、入力項目の値によってエレメントの表示・非表示を切り替える方法

このCookBookでは、IM-BloomMakerで入力系エレメントの入力値によってエレメントの表示/非表示を切り替える方法について紹介しています。 実際にサンプル画面を作成しながら解説を行います。 …

no image

Formaの実行画面でアクセスログを収集する

このCookBookでは、Formaの実行画面で、アクセスログを収集する方法を紹介します。 サンプルでは、登録画面を開いた時点とデータ登録を実行した時点で、ログを収集します。 ログを収集することで、登 …

no image

ノード毎に入力モード(表示モード)変換を切り替える方法

このCookBookでは、BISワークフローにおいて、ノード毎に各アイテムの入力(表示)モードを切り替える方法を紹介します。 ノード毎に別画面を作成する方法もありますが、本稿ではアクション設定を利用し …