ノーコードツールBubbleの無料プラグインを用いて、ボタンクリック時にRepeatingGroupのデータをCSVファイルでダウンロードする機能の実装方法をご紹介します。
以下に当てはまる方にはぜひ、読み進めていただきたいです！
- RepeatingGroupのデータをワンクリックでCSV出力したい人
- CSVファイルを開いたときに、Windowsでも文字化けしないようにしたい人
- 無料プラグインでサクッと簡単にCSVファイルダウンロード機能を実装してみたい人
実装イメージ
添付画像のように、画面上のボタンをクリックしたときに、RepeatingGroupのデータをCSVファイルでダウンロードできる機能を実装します。json形式でキーと値を自由に指定可能です。
今回のサンプルのエレメントツリーも一応添付しておきます。
画面上の構成はいたってシンプル。RepeatingGroupとCSV出力のトリガーとなるButtonエレメントを設置しているだけです。
BubbleでCSVファイルダウンロード機能を実装する方法
以下の手順で実装します。
- プラグイン「CSV Download Coverter」をインストール
- ボタンクリック時にPlugins ＞ csv downloadアクションを設定する
- 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形式（キーと値）で設定してあげましょう！
Delimiter欄には、,（カンマ）を入れましょ。
ここまでの設定が完了したら、プレビューで実際にボタンクリックしてみて正常にCSVファイルダウンロードされるか確認しましょう！今回も最後までお付き合いいただきありがとうございました！
