Displaying Data

Once your users have submitted some information that has become things, you can have some elements in the page to display them. Some elements in the page can have a thing in their context, that you define in the editor (see below), 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.

Displaying a single element in a Group

Containers such as Groups, Popups, 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:

It gives access to the relevant fields and options in the dropdown menus when using the group's thing

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 user 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.

The next section covers building dynamic expressions that will be used to fill the Data source and Data to display fields. 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.

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, this is covered in the next section.