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

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

EPICs合同会社です!

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

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

目次
無料で資料をダウンロード

ノーコード開発お役立ち資料3点セット

計100ページ近い大ボリュームでノーコード開発について解説

  • ノーコード開発会社の選び方
  • EPICsのノーコード受託開発の特徴
  • 支援実績・事例集

    氏名

    法人名

    メールアドレス

    電話番号

    送信ボタンを押すことで、個人情報の取扱いについてに同意したとみなされます

    実装イメージ

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

    実装手順

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

    1. データベースにnumeber型でデータを準備
    2. データの表示設定
    3. 補足:inputに入力した数字にカンマを入れる方法

    データベースにnumeber型でデータを準備

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

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

    データの表示設定

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

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

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

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

    補足:inputに入力した数字にカンマを入れる方法

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

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

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

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

    今回の解説は以上です!

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

    「勉強になった!」「役に立った!」と思っていただけたら、是非シェアもお願いします!
    ノーコード開発ツールを使ったアプリ・システム開発にお困りですか?
    1からの開発も、途中からの開発も、お気軽にEPICsにご相談ください!
    この記事を書いた人
    EPICs株式会社 編集部
    創業よりBubble、Adaloなどノーコードに特化したアプリ・システムの受託開発事業を展開するノーコードのプロフェッショナル集団です。
    目次