Hello! In our last lesson, you built an excellent, reusable layout for your tool pages, complete with input and output sections. This was a crucial first step toward your goal of a scalable platform. However, that page is currently a static template; it has no connection to the specific tools in your database.
Today, we will bring that page to life by making it dynamic. You will learn how to configure your tool page so it can load and display information—like the name, description, and icon—from any specific Tool record in your database. This process is the heart of creating a "template" in Bubble. Given your experience with WordPress's Advanced Custom Fields and dynamic content, this concept should feel quite familiar: we're essentially telling a page template which data fields to display.
The "Page Thing": Turning a Page into a Template
To make our tool page dynamic, we first need to tell Bubble what kind of data it's designed to display. In Bubble's terminology, we're setting the page's Type of content, which is often referred to as the Page Thing. By setting the "Type of content" to Tool, we are programming the page to expect a single Tool record from our database. Every element on that page can then easily access the fields of that specific tool.
This is what allows you to use one page design for hundreds of different tools, which is fundamental to the scalable system you want to build.
The following article from Amlie Solutions provides a superb explanation of this concept.
How to use the Page Thing in Bubble - Amlie Solutions
This article explains the core concept of the "Page Thing"—setting a data type for a page to make it a reusable template.
First, read the section What is the Page Thing? to solidify your understanding of why this is a more efficient approach than building separate pages for each tool. Then, jump to the section Selecting the Data Type for the Page. This shows you exactly where to find the "Type of content" setting in the Bubble editor.
Now, let's apply this.
- In your Bubble editor, open your
toolpage. - Click on a blank area of the page to ensure the page itself is selected (you'll see its name, e.g., "tool", at the top of the Property Editor).
- In the Property Editor, find the dropdown menu for Type of content.
- Select
Toolfrom the list.
Your tool page is now officially a template for displaying a single Tool.
Displaying a Tool's Data
With the page's content type set, we can now populate the elements on the page with dynamic data from the Tool record it receives. Let's add a few elements to display the tool's basic information. You might want to place these above the input/output sections you created last time.
- Add a Text element for the tool's name.
- Add another Text element for the tool's description.
- Add an Image element for the tool's icon.
Now, instead of typing static text, we'll use Bubble's expression builder to pull data from the current page's Tool.
For the name text element:
- Click on the element.
- In the
Textfield of the property editor, instead of typing text, click the "Insert Dynamic Data" button. - Select
Current page Tool. - From the new list of options that appears, select
Name(or whatever you called the name field in yourTooldata type). The expression will readCurrent page Tool's Name.
For the description and icon, you'll do the same thing, selecting Current page Tool's Description and Current page Tool's Icon, respectively.
The Bubble documentation explains this process of referencing data from a parent container (in our case, the page is the parent container).
This official documentation shows how to construct expressions to display data fields from a "thing" that has been loaded into a container.
Focus on the section Displaying data using expressions. Notice how it uses Parent group's product to get the data; in our case, Current page Tool works the same way because the page itself is acting as the data container.
This image shows the exact principle, but applied to a dynamic image source. You are doing the same thing for your tool's icon.
To see this all come together in a video walkthrough, the following tutorial demonstrates the entire process, from setting the page's content type to displaying various fields from the database record.
How to show text and images from your database in Bubble | Bubble.io Tutorials | Planetnocode.com
This video by PlanetNoCode provides a clear, practical demonstration of creating a dynamic product page, which is identical to the process for our tool page.
Watch the segment from this timestamp. The creator sets the page's content type to "Product" and then uses "Current Page Product's" fields to dynamically populate text and image elements. Simply follow these steps, but use your Tool data type instead of "Product."
Previewing Your Dynamic Page
You might be wondering how to test this, since we haven't built the navigation to send a specific tool to this page yet. Bubble has a great feature for this.
When you click the Preview button in the top-right of the editor, Bubble knows the page needs a Tool to display. It will automatically load the page with one of the entries from your Tool database. Look at the URL in the preview window—you'll see something like .../version-test/tool/167..., where that long number is the unique ID of the tool being displayed. You can even change this ID in the URL to another tool's unique ID to see the page update!
Conclusion
Excellent work! You have successfully transformed your static page layout into a dynamic template. This is a massive step towards building your scalable multi-tool platform.
Here are the key takeaways from this lesson:
- Setting a page's Type of content tells Bubble what kind of data the page is designed to display.
- Once the type is set, you can use the expression
Current page [Thing]'s [Field]to dynamically display information from a database record. - This "template" approach allows you to use a single page design for an unlimited number of database entries, which is essential for scalability.
Your tool page is now a fully capable template. The final piece of the puzzle is telling it which tool to load when a user clicks on it from your category page. In our next lesson, we will do exactly that by learning how to send data between pages using URL parameters.
