テーマを変更中で、表示が崩れているところがあります…!

【Bubble】Repeating GroupにInputを配置して登録したい

.bubble
.bubble

Bubbleのフォーラムでも何度も話題に上がっているBubbleの繰り返し登録問題。

基本的にBubbleは繰り返し処理を提供していません。DBに負荷のかかる機能は提供していないのです。

でも、こんな感じのものが作りたかったので、試してみました。

Repeating Groupを使った繰り返し登録

auto-bindingを使う

UIとしてauto-bindingが使えるならありがたく使いましょう! ただし、Privacy Ruleは必須です。

まずはテーブル。テーブルはMasterで以下のような感じです。

Masterテーブル

画面にRepeating Groupを配置します。Data sourceはMasterで、ここでは全てのマスタを表示する設定です。

Repeating Groupとinputの配置

inputには MasterテーブルのNameカラムを設定します。auto-bindingにチェックを入れます。

Inputの設定

Privacy Ruleはアプリに合わせて適切に設定してください。ここではログインしているとき、auto-bindingを有効にしています。

Privacy Ruleの例

次にAddボタンを追加します。Addボタンはデフォルトで表示せず、一番下の行のみに表示するような設定にしています。

This element is visible on page load のチェックを外す
Conditional で、一番下の行のみ表示するよう設定

さて、ここまでできたらworkflowを設定します。

Workflowには以下の2つを設定します。

  1. ページが読み込まれたときに、Repeating Groupが空だったら、Nameが空のレコードを1つ作成
  2. Addボタンがクリックされたときに、Nameが空のレコードを1つ作成

Page is loadedの設定は以下の通り。

自分が作ったNameが空のレコードを削除する ※別途説明します。
Repeating Groupが空のとき、空レコードを1つ作る

Addボタンクリック時のWorkflowは以下の形です。

Addボタンクリック時に、空レコードを生成する

設定は以上です。

画面を表示すると、以下のような形になります。

Masterテーブルが空のときの表示

さて、先ほど流した「Delete」についてです。

Addボタンをクリックした時に空レコードを作っていますが、auto-bindingを利用しているため、何も入力しないで別ページに移動した場合も空レコードが残ります。このことが問題でなければDeleteのアクションは不要です。ただ、これが気持ち悪い(空白のinputが並ぶのがイヤな)場合にはDeleteのアクションを入れてください。

Deleteの対象は、自分が作ったNameが空のMasterテーブルのレコードです。


別の機会に、auto-bindingを使わない例を書きたいと思います。どっちかって言うとそっちがメインです。

タイトルとURLをコピーしました