Hello! In our last session, we successfully installed the Toolbox plugin and used its JavascriptToBubble element to send a value from your embedded calculator back to Bubble, triggering a simple alert. You've built the initial communication bridge.
Today, we're going to put that bridge to serious use. This lesson is all about leveraging that connection to trigger meaningful, powerful workflows. Instead of just displaying an alert, you'll learn how to take a result from your JavaScript tool and use it to create and modify data directly in your Bubble database. This is the core technique you'll need to achieve the "deep integration" you're aiming for, enabling features like user calculation histories or saving results from any embedded tool.
From Alert to Action: The Power of Triggered Workflows
In the previous lesson, you checked a little box on the JavascriptToBubble element labeled "Trigger event". That checkbox is the key to everything we're doing today. When it's enabled, calling the bubble_fn_...() function in your JavaScript does more than just send a value—it fires a specific event in Bubble's workflow engine.
Think of it as a starting pistol. Your JavaScript code runs, finishes its task, and fires the pistol. Bubble hears it and begins a race—a series of actions that you get to define. This could be anything from saving a result to navigating the user to a new page.
This article from "Beyond the Code" provides an excellent explanation of this process. We'll focus on the section that details how to set up and use the triggered workflow.
How to send data & trigger workflows from JavaScript into Bubble (tutorial) | Beyond the Code
This article clearly breaks down how the "Trigger event" feature works and how to build a workflow that responds to it.
Please read the section titled Trigger a workflow. Pay close attention to how you find the new event in the Workflow tab (Elements > A Javascript to Bubble event is triggered) and how you access the data using [Your element's name]'s value.
As the article explains, once you create the event handler in your Workflow tab, you can add any action you want. This is where the integration moves beyond a simple technical connection and becomes a functional part of your application.
Let's look at a concrete example. The image below shows a workflow that triggers after a JavascripttoBubble event. Notice the steps: it creates a "PracticeScore" (Step 1) and then makes changes to the "current user" (Steps 3-5). This is a perfect illustration of using a JavaScript event to manipulate your app's data.
A Practical Example from the Community
It's one thing to read about it, but seeing how it's used to solve a real problem is even better. The following resource is from the Bubble forum, where a user needed to save the result of a JavaScript function to their database. The provided solution is exactly what we are learning.
Using data from a javascript workflow in Bubble - Need help - Bubble Forum
This forum thread provides a visual walkthrough of the entire process, from configuring the element to building the workflow.
First, read the initial response that suggests using the js2bubble element to trigger a workflow. Then, review the next post which provides a complete example. Look closely at the screenshots showing: The element's configuration with "Trigger event" and "Publish value" checked. The JavaScript code calling the bubble_fn_create() function. The resulting workflow that starts with the event "When JavascripttoBubble A event is triggered".
As a final reminder of this process in action, think back to the video by Jacob Gershkovich you watched in the last lesson. The final part of that tutorial demonstrated this exact concept.
The Bubble.io Toolbox Plugin | How to save a value from Javascript to Bubble | Bubble.io Tutorials
This segment from the previous lesson's video serves as a great visual refresher on how to connect the triggered event to a database action.
If you'd like a quick recap, re-watch the segment from this final section. Notice how he checks the "Trigger event" box, creates the workflow, and then uses This javascript to bubble's value to save a number to a field on the User.
Exercise: Logging Your Calculator Results
Now, let's upgrade the exercise from our last lesson. Instead of just showing the calculator's result in an alert, you will save each result to the database, creating a permanent log. This is a direct, practical step toward building a history feature for your tools.
1. Create the Database Table
First, we need a place to store the results.
- Go to the Data tab.
- Under "Data types," create a new type called
CalculationLog. - Give this new data type two fields:
Result(field type:number)ToolName(field type:text)
2. Modify the Workflow
Next, you'll change the workflow you built in the previous lesson.
- Go to the Workflow tab and find the event
When JavascriptToBubble A event is triggered(or whatever you named your element). - Delete the "Show an alert" action.
- Add a new action: Data (Things) > Create a new thing...
- In the properties for this action:
- Type: Select
CalculationLog. - Click + Set another field.
- Result =
This JavascriptToBubble's value(You'll find this in the dynamic data selector). - Click + Set another field.
- ToolName =
"Simple Calculator"(Type this in manually, with the quotes).
- Type: Select
3. Test Your Integration
- Preview your page.
- Use the embedded calculator to perform a calculation (e.g.,
25 * 4 = 100). - Click the "Send Result to Bubble" button you created in the last lesson.
- Now, go back to your Bubble editor. Navigate to the Data tab, then App data. Select the
CalculationLogview. You should see a new entry with the correct result and tool name!
You have successfully used an action inside an embedded tool to create a permanent record in your application's database.
What's Next: Handling More Complex Data
So far, we've only passed a single value (a number). But what if your tool needs to output multiple, related pieces of data? For example, a unit converter might output the result, the "from" unit, and the "to" unit.
The JavascriptToBubble element can handle this using its "Multiple Outputs" feature. You can configure it to expect a JavaScript object and then access each piece of data individually.
We won't dive deep into this today, but it's a powerful feature to be aware of. It allows you to pass structured data like { result: 15, unit: 'cm', source: 'inches' } in a single function call, which is essential for building the more advanced tools you have in mind.
Conclusion
You've now mastered one of the most important techniques for deep integration in Bubble. By triggering workflows from your JavaScript code, you've unlocked the full power of Bubble's backend to work in tandem with your custom tools.
Here are the key takeaways:
- Checking the "Trigger event" box on the
JavascriptToBubbleelement allows your JavaScript to initiate Bubble workflows. - The corresponding event is found under Elements > A JavascriptToBubble event is triggered in the Workflow tab.
- Within this workflow, you can access the sent data via
This JavascriptToBubble's valueand use it in any Bubble action, including creating or modifying database records.
We have established a solid one-way street for data to flow from JavaScript into Bubble. In our next lesson, we'll build the other side of the highway. You will learn how to use the Run javascript action to send data from Bubble inputs into your embedded tool, giving you full two-way communication and control.