Hello! In our last lesson, we successfully built the navigation from your homepage to dynamic category pages. Each category page now displays a list of its associated tools. This brings us to the final and most important link in the chain: the tool page itself.
Today, we'll tackle your core goal of creating a scalable platform by designing a single, reusable page layout that will host every tool you build or integrate. We won't build a specific tool just yet; instead, we'll focus on creating the universal template. We will structure this page with distinct "input" and "output" sections—the fundamental components of any utility tool—and wire them together so they can interact.
Structuring the Page: The Box Model
For someone with your web design background, the way Bubble handles layouts will feel familiar. It's based on the "box model," similar to using div containers in HTML/CSS. You create structure by placing groups (containers) inside other groups and defining how elements should be arranged within them—either in a column (stacked vertically) or a row (arranged horizontally).
Let's start by creating the main structure for our tool page.
- Create a new page in your Bubble editor and name it
tool. - On this new blank page, we will add two main
Groupelements. One will serve as the container for our tool's inputs, and the other for its outputs. - Let's name them
Group Input SectionandGroup Output Sectionfor clarity. You can see and rename elements in the 'Elements tree' on the left side of the UI Builder.
To understand how to arrange these groups and the elements we'll soon place inside them, the following video from Bubble provides an excellent overview of the layout system.
Mobile design & layout (Lesson 1.2)
This video explains the core principles of Bubble's responsive layout engine. While it uses a mobile app as an example, the concepts of row/column layouts, nesting groups, and spacing are identical for web applications.
Focus on these key segments: Container Layouts: This part explains the difference between column and row layouts, which is the foundation of our page structure. Nested Layouts: Watch how groups are used as containers within other containers to build complex UIs. This is how we'll build our input/output sections. Offsets and Spacing: Learn about margin, padding, and gap spacing. Using gap spacing on a parent container is a clean way to ensure consistent spacing between your input fields.
Apply these concepts to your tool page. Set the page's Container layout to Column. This will stack our main sections vertically. Place the Group Input Section and Group Output Section on the page. You can use the gap spacing property on the page itself to create a nice visual separation between the two sections.
Designing the Input and Output Elements
Now that we have our main containers, let's populate them with the visual elements that make up a tool.
1. The Input Section
Inside Group Input Section, let's add the elements a user would interact with. For a generic template, this might include:
- An Input element (for text or numbers). Let's call it
Input Value. - A Button element. Let's give it the label "Calculate".
You can set the layout of Group Input Section to Column and use gap spacing to neatly arrange these elements.
2. The Output Section
Inside Group Output Section, we need a place to display the result. You have a couple of options:
- A Text element: This is the simplest way. You can add a text element that says "Result: " followed by the dynamic value.
- A disabled Input element: This is a very common technique in Bubble. It allows you to style the output to look just like an input field, which can create a nice visual consistency, but prevents the user from typing in it.
Let's try the second method. Add an Input element to Group Output Section. In its property editor, find the checkbox labeled This input is disabled and check it. This will make it read-only.
The following video, while focused on building a specific calculator, demonstrates this exact pattern of setting up input fields and a disabled output field.
How To Build A Financial (Or Any) Calculator With Bubble.IO | Bubble.io Tutorial for Beginners 2020
This tutorial on building a financial calculator shows a practical application of creating input and output sections.
Watch the segment from this timestamp, where the creator explains why he uses a disabled (read-only) input field to display a calculated result. This is the technique we are adopting for our output section.
Making it Interactive with Custom States
We now have the visual layout, but clicking the "Calculate" button does nothing. To bring our tool to life, we need to connect the input to the output.
As you learned in Module 1, custom states are perfect for storing temporary information on a page. We'll create a custom state to hold the result of our calculation. Then, we'll create a workflow that:
- Takes the value from our
Input Valuefield. - Performs a simple operation on it.
- Saves the result into our custom state.
- The output element, which will be bound to this custom state, will then automatically display the result.
This process is explained perfectly in a Bubble forum discussion.
How to show the result of a formula in a Text? - Need help - Bubble Forum
This forum post provides a clear, step-by-step guide on the exact process of using a custom state to calculate and display a result.
Follow the excellent reply by user mikeloc. First, see his explanation of the overall method. Next, learn how to create the custom state itself. In the page's property editor, click the small 'i' icon to open the custom states window. Follow this example to create a state on your tool page. Let's name our state result and set its type to number. Then, look at how to set up the workflow. When the button is clicked, you'll use the "Set state" action as shown here. For the Value, create the expression: Input Value's value * 2. This is just a placeholder calculation. Finally, bind your disabled output input to the custom state. In the Initial content field for your disabled input, insert the dynamic data tool's result.
Here is a visual example of what the "Set state" action looks like. In your case, you'll be setting your result custom state to the value of your calculation.
If you preview the page now, you should be able to type a number into the input field, click "Calculate", and see the doubled value appear in your disabled output field. Congratulations, you have a working tool template!
Conclusion
Fantastic work today. You've successfully designed the blueprint for all the tools on your platform. This scalable structure is a major milestone and puts you in a great position to start adding functionality.
Here are the key takeaways:
- Page structure is built with nested groups. Using
ColumnandRowlayouts, along with spacing properties, allows you to create clean, responsive designs. - A standard tool page is composed of an input section (with interactive elements like inputs and buttons) and an output section (with display elements like text or disabled inputs).
- Custom states are the glue that connects inputs and outputs. They temporarily hold the result of a calculation on the page.
- The "Set state" workflow action is triggered by a user (e.g., clicking a button) to perform the calculation and update the custom state, which in turn updates the displayed output.
Right now, our tool page is a standalone template. It doesn't know anything about the specific tools in your database. In our next lesson, we'll fix that. We will learn to use URL parameters to make this page fully dynamic, enabling it to load and display the correct title, description, and unique interface for any tool a user selects.