【Bubble】数字の表示部にカンマを入れる方法
こんにちは！ノーコードに特化した開発を行っております。
EPICs合同会社です！
今回はノーコードツール「Bubble 」で開発したアプリ内で、数字データを表示させる際、カンマを入れる方法について解説をしていきます！
動画解説バージョンはこちら！
目次
無料で資料をダウンロード
ノーコード開発お役立ち資料3点セット
計100ページ近い大ボリュームでノーコード開発について解説
- ノーコード開発会社の選び方
- EPICsのノーコード受託開発の特徴
- 支援実績・事例集
実装イメージ
下記の画像のようにテキストやinputを使用して数字を表示する際にカンマが付くようにすることが、本記事の実装ゴールです！
実装手順
以下の手順で実装します。
- データベースにnumeber型でデータを準備
- データの表示設定
- 補足：inputに入力した数字にカンマを入れる方法
データベースにnumeber型でデータを準備
まずは表示させたい数字を登録しておくデータベースを準備しましょう！
fieldTypeは「number」を指定します！
データの表示設定
次にデータに保存した数字データを表示するElementを配置しましょう。
該当のElementに数字データを引っ張るデータ設定をしたら、続けて「:formatted as」を選択します。
「:formatted as」を選択すると下記のような画面が表示されます。
こちらの画面で「Thousand separator」をカンマに指定しましょう。
補足：inputに入力した数字にカンマを入れる方法
最後にinputに入力した数字にもカンマを入れる方法を解説します！
inputと配置したら「content format」を「integer」にします。
「integer」に変更をすると「show thousand separator」という選択肢が表示されるので、こちらにチェックを入れましょう！
上記の設定でinput内の数字にもカンマが表示されるようになります！
今回の解説は以上です！
本記事が開発力の向上や開発を検討している方のお役に立てておりましたら幸いです。
