【Bubble】CSVでRepeatingGroupのデータを出力する方法

ノーコードツールBubbleの無料プラグインを用いて、ボタンクリック時にRepeatingGroupのデータをCSVファイルでダウンロードする機能の実装方法をご紹介します。

以下に当てはまる方にはぜひ、読み進めていただきたいです!

  • RepeatingGroupのデータをワンクリックでCSV出力したい人
  • CSVファイルを開いたときに、Windowsでも文字化けしないようにしたい人
  • 無料プラグインでサクッと簡単にCSVファイルダウンロード機能を実装してみたい人
目次

日本最大級のノーコード開発実績!
 \ 最安30万円・最短2週間でアプリ・システム開発 /

もっと知る →

実装イメージ

添付画像のように、画面上のボタンをクリックしたときに、RepeatingGroupのデータをCSVファイルでダウンロードできる機能を実装します。json形式でキーと値を自由に指定可能です。

今回のサンプルのエレメントツリーも一応添付しておきます。

画面上の構成はいたってシンプル。RepeatingGroupとCSV出力のトリガーとなるButtonエレメントを設置しているだけです。

BubbleでCSVファイルダウンロード機能を実装する方法

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

  1. プラグイン「CSV Download Coverter」をインストール
  2. ボタンクリック時にPlugins > csv downloadアクションを設定する
  3. file_nameとjson_dataを入力して完了!

プラグイン「CSV Download Coverter」をインストール

日本語で安心!

プラグイン追加ページで、csv downloadと検索するとヒットする、CSV Download Coverterというプラグインをインストールします。

CSV Download Coverterのプラグインページ:https://bubble.io/plugin/csv-download-coverter-shift-jis-1649895805314×598569727070568400

※すごく細かいですが、変換を意味する英語スペルはconverterなので、プラグイン名はnが漏れているのは意図してなのか…。

ボタンクリック時にPlugins > csv downloadアクションを設定する

CSVファイルダウンロードしたいデータを表示するRepeatingGroupを画面に設置し、CSV出力のトリガーとなるボタンも用意してください。準備ができたら、ボタンクリック時にワークフローのcsv downloadアクションを設定しましょう!

json形式とtext形式が用意されています。この記事ではjson形式での実装方法をご紹介。

file_nameとjson_dataを入力して完了!

プラグインCSV Download Coverterのcsv downloadアクションを選択すると、上の添付画像のような設定画面が表示されます。file_nameにはお好みでダウンロードされるファイル名を設定してください。以下のサンプルではアンダースコアの後で今日の日付をyyyymmdd形式でつけるように設定してます。

json_data欄には出力したいRepeatingGroupをList of 〜:format as textで指定します。

:format as textを選択すると、下の添付画像のような設定画面が開かれるので、json形式(キーと値)で設定してあげましょう!

jsonの設定サンプル

Delimiter欄には、,(カンマ)を入れましょ。

ここまでの設定が完了したら、プレビューで実際にボタンクリックしてみて正常にCSVファイルダウンロードされるか確認しましょう!今回も最後までお付き合いいただきありがとうございました!

別のプラグイン「1T CSV creator」でもCSV出力を実装可能です。今回紹介したプラグインと比べると工程は多め。

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

ノーコード開発サービスのご案内

日本最大級のノーコード開発実績

  • EPICsの会社概要・特徴
  • 支援実績・事例集
  • 料金・サービス提供の流れ

    氏名

    法人名

    メールアドレス

    電話番号

    お問い合わせ詳細

    お問い合わせでご入力頂いた個人情報のお取り扱いについて

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