🍃

Bubble - アプリ内でCSVを出力する

2 min read

※あとで綺麗に書き直す

アプリ内のリストをCSV出力する


編集画面・設定の状態

編集画面・・・Designタブで確認できる、Pages・Reusable elementsのこと


上から各要素の設定内容:

  • (Visual elements) Text
    • (Appearance)
      • (1番上のフィールド) 任意のテキスト。ここでは「人数」と入力しているだけ
  • (Containers) Repeating Group
    • (Appearance)
      • (Type of content) Dataで登録しているData typeから任意のものを選択
      • (Data source) 最終的に「Search for XXXs」になる
        1. 「Do a search for」を選択
        2. 「Type」で「booking」を選択
  • (Visual elements) Text ← 「Repeating Group」内に設置している
    • (Appearance)
      • (1番上のフィールド) 最終的に「Current cell's XXX's YYYs」になる
        1. 「Current cell's XXX」をクリック
        2. 「's YYYs」をクリック
  • (Visual elements) Button
    • (Appearance)
      • (1番上のフィールド) 任意のテキスト。ここでは「CSV」と入力しているだけ

方法

1. まずプラグインをインストール

使用プラグイン:
1T - CSV Creator

https://bubble.io/plugin/1t---csv-creator-1582601241392x653181519983018000

左サイドメニューにある「Plugins」をクリック。
さらに右上にある「Add plugins」ボタンをクリックする。
「csv」と検索したらすぐ出てくる。

※ここではインストール済なので「Uninstall」ボタンが表示されているが、本来は「Install」ボタンが表示されている。

2. CSVを出力したいページを編集

上記プラグインをインストールすると、Designタブの「Visual elements」に「CSV Creator」が追加される。
これをCSVを出力したいページに設置する。

「CSV Creator」は実際の画面には表示されない。

3. Workflowを設定

左サイドメニューにある「Workflow」をクリック。
するとこのような表示になる。

これは設定済の状態。

Workflow設定手順:

  1. 正方形クリック
  2. 下にメニューが表示されるので、「Elements」をクリック
  3. 「An element is clicked」をクリックでまた新しくメニューが表示されるので、下記を設定
    • (Element) CSV出力イベントを発火させたい要素を選択。ここでは「Button」
  4. 編集した正方形の下に表示される横長部分にある 「Click here to add an action...」クリック
  5. 左メニューから「Element Actions」をクリック
  6. 右項目から「Send JSON to a CSV Creator」をクリック
  7. また新しくメニューが表示されるので、下記を設定
    • (Element) ページに設置した「CSV Creator」
    • (File name) 任意のファイル名。この名前で出力される
    • (Allow user to save file) true
    • (JSON content)最終的に「RepeatingGroup XXX's List of XXXs:format as text」にする。下記のように設定
      1. 「RepeatingGroup XXX」をクリック
      2. 「's List of XXXs」をクリック
      3. 「:format as text」をクリック
      4. すると左にメニューが表示されるので、さらに下記を設定
        • (Content to show per list item) JSONでヘッダー名と出力したいアイテムを指定する。アイテム指定方法は下記方法
          1. 「Search」から「This XXX」をクリック
          2. 続けて「YYYs」をクリック ※「Repeating Group」で設定しているものを選択しないとエラーになる
        • (Delimiter) カンマ
          最終的にこうなる

これで設定完了。
アプリ上でCSV出力が可能になる。