Displaying data
This section covers how to display data from the database in your app
After your users submit information which becomes data, you can use page elements to display it.
Container elements don't display the data per se, but load the data so that all of its child elements can easily reference it. This lets you easily load a thing into a container, and then use that as a data source to display and let users make changes to the data.
Things are displayed either as a single instance (for example viewing the current user) or a list of things (such as a list of products, contacts or tasks). The info-boxes below provide more information about these two scenarios:
Displaying data using expressions
To display data in an element such as a text, we need to set up an expression that tells Bubble what data we want to display. The expression consists of a data source and optionally one or more operators that further instructs Bubble what to do with the data. In the example below, we're using Do a search for as the data source and then adding the first item operator to load the first entry in the list of results that the search returns:
This loads the Product into the container element, in this case a group, but doesn't actually show anything to the user. To show some information, such as the name of the Product, we'll need to add another element inside of that group. We can then set up an expression on that element that refers to the thing loaded into the parent element:
We could also set up the entire expression on the text element itself: Do a search for Products:first item's Name – but it would be cumbersome to do that for every element where we want to refer to that product.
By setting up a parent container and loading the data into it we speed things up and make sure that all elements inside refer to the same database thing.
The same logic can be applied to other things than text. We could for example set up an image element and load the correct Product image by again referring to the parent group's thing and the custom field Image.
By combining different element types and fields saved on a data type we can design our app to show info from the database in a way that our users hopefully find appealing.
Displaying data using auto-bind
Auto-bind is used to automatically save changes to a thing whenever an input field changes, but it alse serves another purpose: it automatically loads the existing data into the field to which it's assigned. Let's say we didn't just want to display the name of the Product, we wanted users to be able to edit it.
By assigning a field that the element is auto-bound to, Bubble will automatically load any existing data from that field when the page is loaded:
Other ways to learn
Last updated