🍃

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

2021/03/01に公開

nocode

bubble

tech

※あとで綺麗に書き直す

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

編集画面・設定の状態

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

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

(Visual elements) Text
- (Appearance)
  - (１番上のフィールド) 任意のテキスト。ここでは「人数」と入力しているだけ
(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)
  - (１番上のフィールド) 最終的に「Current cell's XXX's YYYs」になる
    1. 「Current cell's XXX」をクリック
    2. 「's YYYs」をクリック
(Visual elements) Button
- (Appearance)
  - (１番上のフィールド) 任意のテキスト。ここでは「CSV」と入力しているだけ

方法

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

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

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

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

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

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

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

3. Workflowを設定

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

これは設定済の状態。

Workflow設定手順：

正方形クリック
下にメニューが表示されるので、「Elements」をクリック
「An element is clicked」をクリックでまた新しくメニューが表示されるので、下記を設定
- (Element) CSV出力イベントを発火させたい要素を選択。ここでは「Button」
編集した正方形の下に表示される横長部分にある「Click here to add an action...」クリック
左メニューから「Element Actions」をクリック
右項目から「Send JSON to a CSV Creator」をクリック
また新しくメニューが表示されるので、下記を設定
- (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出力が可能になる。

編集画面・設定の状態

方法

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

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

3. Workflowを設定

Discussion