Bubble Docs

Displaying Data

Once your users have submitted some information that has become things, you can have elements on the page display them. Some elements on the page can have a thing in their context, that you define in the editor, and then other elements in the page will be able to refer to an element's thing. In other words, you can attach a thing (an object from the database) to an element, and have other elements access this thing to display some values or fields relative to this thing.

The type of content on an element

Container elements (and a few elements in the Visual Element sections, such as a map element) have a 'type of content' field. This property lets you define what kind of data (or what type of things) an element will display. For instance, a repeating group can display a list of 'Users'. Defining this at the repeating group level is very important as it lets you access the different fields of the given type inside the container. For instance, if the repeating group displays a list of users, you may want to add a text in the first cell and define the caption of the text as 'Current cell's user's name'. Defining the type of content will let Bubble know which fields are available in the context of each container.

Displaying a single thing in a group

Containers such as Groups, Popups, and Floating Groups can have a thing in their context. To assign a thing to a container, the first thing you need to define is the type of content the element can be associated with. Filling this information lets Bubble do two things:
  1. 1.
    It gives access to the relevant fields and options in the composer's dropdown menus.
  2. 2.
    It lets Bubble validate data types to avoid mismatches and flag issues with the Issue Checker.
Once a type of content is set, you have two ways to inject (or 'display') data in the container. You can either use the data source field at the element level, or change the thing in the group with an action in a workflow. Both operations are strictly equivalent, but actions will win over the data source field.
Once you have a thing, elements inside will be able to access the 'Parent Element's thing'. It is important to note that an element can only access the direct parent's thing. If a group is within another group, elements inside the first group will access the thing of that group, not of the grandparent element.

Resetting a group

You can reset a group to wipe the thing that is displayed in it. When you use a reset group action, the thing will be reverted to what was defined as the datasource (including an empty object if the field wasn't filled initially). When a group is being reset, the inputs will also be returned to their initial state. Note that whenever the content of a group changes, the group effectively is being reset and a new thing is being displayed in it.

Defining a page's thing

You can do something similar at the page level. A page can have a type of content and get data sent to it. For instance, if you are building a social network and want to have a profile page for your users, you will design one main 'profile' page in your application and the type of content will be a 'user'.
The most common way to send data to a page is with a link. If the page has a type of content defined, you will be prompted to specify which thing should be sent to the page. This will add a unique ID in the URL of the page that will specify the thing for that page. This link will contain the information that is needed for the page thing to be set and can be shared.
Another way to send data to a page in a workflow is to use a 'Go to page' action. It functions similarly to the link element, if the destination page has a type of content, a thing will need to be passed. If the destination page is the same as the current page, the thing will be updated without refreshing the page (but changing the URL). Note that if you set a type of content to a page, a thing has to be sent, leaving this blank will be flagged as an issue.

Displaying a list of things in a repeating group

A Repeating Group is a special type of container that takes a list of things. You define a type of content, and then either define a data source or use an action to display a list in the repeating group. This data source has to be a list of things of the type of content that you specified. One of the most common ways to define the data source is a search from the database.