【Bubble】数字の表示部にカンマを入れる方法

こんにちは！ノーコードに特化した開発を行っております。

EPICs合同会社です！

今回はノーコードツール「Bubble 」で開発したアプリ内で、数字データを表示させる際、カンマを入れる方法について解説をしていきます！

動画解説バージョンはこちら！

また、本メディアを運営する「EPICs株式会社」では、ノーコードを活用したアプリ・システム開発を行っております。

従来のスクラッチ開発に比べ、ノーコードツールを活用した開発には以下のメリットがあります。

日本最大級のノーコード開発実績を持つ弊社なら、高度なものもスピーディーに開発することが可能です。ぜひご相談ください。

EPICs株式会社の特徴

実装イメージ

下記の画像のようにテキストやinputを使用して数字を表示する際にカンマが付くようにすることが、本記事の実装ゴールです！

以下の手順で実装します。

まずは表示させたい数字を登録しておくデータベースを準備しましょう！

fieldTypeは「number」を指定します！

次にデータに保存した数字データを表示するElementを配置しましょう。

該当のElementに数字データを引っ張るデータ設定をしたら、続けて「:formatted as」を選択します。

「:formatted as」を選択すると下記のような画面が表示されます。

こちらの画面で「Thousand separator」をカンマに指定しましょう。

最後にinputに入力した数字にもカンマを入れる方法を解説します！

inputと配置したら「content format」を「integer」にします。

「integer」に変更をすると「show thousand separator」という選択肢が表示されるので、こちらにチェックを入れましょう！

上記の設定でinput内の数字にもカンマが表示されるようになります！

今回の解説は以上です！

本記事が開発力の向上や開発を検討している方のお役に立てておりましたら幸いです。

「勉強になった！」「役に立った！」と思っていただけたら、是非シェアもお願いします！