How to show text and images from your database in Bubble

Displaying Dynamic Data in Bubble

Here's how to display dynamic data, meaning taking data from your Bubble app's database and displaying it on a page. So I have the beginnings of a marketplace app here and the early steps of a product page and I want to be able to link up text to show a product name, a short description and a price and an image.

Creating a New Data Type

So I'm going to data and let's create a new data type called product and then I need to add some fields. So Bubble supplies these default fields but I need the fields that I want displayed on the page so let's work through those. So let's call it title and then this is a field type text and then let's have a look we need short description that's also a text and what else do we need price and image.

Setting Up Data Fields

Okay so price I'm not going to go text I'm going to go with number and that's just so that's easier for me later on to do calculations with it. Now there is a function in Bubble to change a number that's expressed as text into a number but it's just an extra step. So by placing it as a number that then means I could easily apply like a 20% discount in the future because it's stored as a number rather than like a series of numbers stored as text. So from like a coding lingo it's being stored as like an integer rather than being stored as a string it just means I get to work with it as a number and not text and then we need an image. So let's just go for thumbnail and this is type image.

Adding Data to the Database

Okay now once you've really built out your app you will probably have a front-end interface that you'll build in Bubble a way to add items whether it's products or contacts to your database but just so we can get moving get started you can add them directly in by adding in an entry here. So let's go with title we'll go with sneakers and then short description these are really great sneakers and price let's go for a number here we go and just adding in an image there and so we click create. So that has created an entry in the database for of a product so how do you display it on the front end.

Creating a Product Template Page

So I'm going to be showing you a way to do this which involves basically creating a template for a product this page here which I've called product which can then be used to display all of your products say acts as a template rather than having to design a different page for every product. So in order to do that I have to make sure that my page content is set to product and that then means that I can add in dynamic data for current page product title, current page product short description, current page product price.

Formatting Dynamic Data

Now because the price is saved as a number it's not going to have any formatting so I can go for a format as change it to currency let's put in two decimal places and then actually what I was really looking for was a dollar sign here we go and then finally image dynamic image and go current page thumbnail and then to make my app really accessible I want to put an alt tag in there that's what you get when you hover the mouse over an image it displays a description of that image if the web designer or the website creators bothered to put that in that's good for SEO and it's also improves your accessibility for people who use screen readers so it's a good thing not to miss so I'm just put in title so it's going to say the products title like sneakers thumbnail.

Previewing the Product Page

Okay now what happens if I click preview let's have a look. So you'll see that if we look at the URL we have product and then we have a following bit of information let's just ignore this this is part of the Bubble development test mode and but it's basically dummy text and that's because I've clicked preview and it doesn't actually know which product remember from my database you know I could have a hundred in here how does Bubble know which one to load in so I'm just going to do a really quick repeating group on my index page to be able to link through to it because at the moment I've got no way of accessing that product basically to to change a bit after hit here this dummy text into one into a slug part of the URL which identifies this product to display on this page so what I'm going to do is just add in a really crude repeating group just search for product and then I'm gonna add in a link and the link is going to be the products title and it's going to link through to product but then it needs to send data and so this is how I send across this is the product I want to show current cell's product because this is a repeating group that shows all my products now if I hit preview let's see what happens okay so there we go I get sneakers and if I click on sneakers comes through to the page there is my thumbnail there's my title my short description and my numbers my number field formatted as a currency