ノーコードツール【Bubble】Displaying Dataとは?仕様を解説

ユーザーが投稿した情報がモノになると、ページ上の要素にそれを表示させることができます。ページ上のいくつかの要素は、エディターで定義したコンテキストにモノを持つことができ、ページ内の他の要素は要素のモノを参照することができます。言い換えれば、ある要素にモノ(データベースからのオブジェクト)を添付し、他の要素がこのモノにアクセスして、このモノに関連する値やフィールドを表示できるようにすることができます。

※「モノ」=「Things」

要素に含まれるコンテンツの種類

コンテナ要素(およびマップ要素などビジュアル要素セクションのいくつかの要素)には、「コンテンツの種類」フィールドがあります。このプロパティにより、要素がどのような種類のデータ(またはどのような種類のもの)を表示するかを定義することができます。例えば、繰り返しグループは、「ユーザー」のリストを表示することができます。これをリピーティンググループのレベルで定義することは、コンテナ内の指定されたタイプの異なるフィールドにアクセスすることができるため、非常に重要です。例えば、リピーティンググループがユーザーのリストを表示する場合、最初のセルにテキストを追加して、テキストのキャプションを「現在のセルのユーザー名」と定義することができます。コンテンツのタイプを定義することで、バブルは各コンテナのコンテキストでどのフィールドが利用可能かを知ることができます。

グループ内の1つのthingsを表示する

グループ、ポップアップ、フローティンググループなどのコンテナは、そのコンテキストにthingを持つことができます。コンテナにモノを割り当てるには、まず、その要素が関連づけられるコンテンツの種類を定義する必要があります。この情報を入力することで、Bubble は次の 2 つのことを行うことができます。

1.コンポーザーのドロップダウンメニューにある関連フィールドやオプションにアクセスできるようになります。

2.これにより、バブルはデータ型を検証してミスマッチを回避し、Issue Checkerで問題点を指摘することができます。

コンテンツの種類が設定されると、コンテナにデータを注入する(または「表示」する)方法が2つあります。要素レベルでデータソースフィールドを使うか、ワークフローのアクションでグループ内のものを変更するかです。どちらの操作も厳密には同等ですが、データソースフィールドよりもアクションの方が勝ります。

thingができると、中の要素は「親要素のthing」にアクセスすることができるようになります。ここで重要なのは、要素は直接の親のモノにしかアクセスできないことです。あるグループが別のグループの中にある場合、最初のグループの中にある要素は、祖父母要素のものでなく、そのグループのものにアクセスします。

グループをリセットする

グループをリセットすることで、その中に表示されているものを消去することができます。リセットグループアクションを使用すると、モノはデータソースとして定義されたものに戻ります(初期状態でフィールドが埋まっていない場合は空のオブジェクトを含む)。グループがリセットされるとき、入力も初期状態に戻されます。グループの内容が変更されるたびに、グループが効果的にリセットされ、その中に新しいものが表示されることに注意してください。

ページのThingsを定義する

ページレベルでも同じようなことができます。ページはコンテンツの種類を持ち、そこにデータが送られるようにすることができます。例えば、あなたがソーシャルネットワークを構築していて、ユーザーのためのプロフィールページを持ちたい場合、アプリケーションの中で1つのメインの「プロフィール」ページを設計し、コンテンツのタイプは「ユーザー」になります。

ページにデータを送る方法として最も一般的なのは、リンクです。ページにコンテンツのタイプが定義されている場合、どのようなものをページに送るかを指定するプロンプトが表示されます。これにより、そのページのURLの中に、そのページのモノを指定する一意のIDが追加されます。このリンクには、ページのthingを設定するために必要な情報が含まれ、共有することができるようになります。

ワークフローでページにデータを送るもう一つの方法は、「Go to page」アクションを使うことです。link要素と似たような機能で、移動先のページがコンテンツのタイプを持っている場合、thingを渡す必要があります。移動先のページが現在のページと同じであれば、ページを更新することなくthingが更新されます(ただしURLは変更されます)。なお、ページにコンテンツの種類を設定した場合は、thing を渡す必要があり、これを空白にすると問題ありとしてフラグが立ちます。

繰り返しグループに含まれるthings一覧を表示する

Repeating Groupは、リストを受け取る特別なタイプのコンテナです。コンテンツの種類を定義し、データソースを定義するか、アクションを使用して、繰り返しグループにリストを表示します。このデータソースは、指定したコンテンツのタイプのもののリストでなければなりません。データソースを定義する最も一般的な方法の1つは、データベースからの検索です。

参考英語サイト

https://manual.bubble.io/help-guides/working-with-data/displaying-data