Input to JS Element: Sending Data in Bubble

The Run javascript Action

The key to sending data to your JavaScript is a workflow action provided by the Toolbox plugin: Run javascript. While the JavascriptToBubble element listens for data coming from JS, the Run javascript action actively pushes data into it.

The most powerful feature of this action is its ability to directly embed Bubble's dynamic data into the script. You don't need complex methods to find elements on the page; you can literally write your JavaScript code and insert a value from a Bubble input field or the database right where you need it.

This is a common challenge for developers, as shown in this Bubble forum thread. The user wanted to get data from their database into a JavaScript variable.

As the forum post reveals, Bubble makes this incredibly straightforward. The "Insert dynamic data" button lets you place any data your app has—an input's value, the current user's email, a thing from the database—directly into your code.

Here is an image showing this in action. Notice how broken json's value is blue, indicating it's dynamic data from Bubble being assigned to the bad_json JavaScript variable.

A Complete Walkthrough

To see how this works from start to finish, we can turn back to the excellent video by Jacob Gershkovich that we used in the previous lessons. He demonstrates this exact process of using Bubble inputs to feed a JavaScript calculation.

This process gives you a powerful and scalable architecture. Your embedded HTML element can contain a "black box" of pure JavaScript logic, and your Bubble interface can be responsible for providing the inputs and handling the outputs.

Exercise: Building the Two-Way Bridge

Let's modify the calculator page to create a full, two-way integration. You will add Bubble inputs and a Bubble button to control the JavaScript calculator.

1. Update the UI

• On your tool page, add two Input elements. Name them "Input A" and "Input B". Set their Content format to Integer.

• Add a Button element below the inputs. Change its text to "Calculate".

• You can now edit your HTML Element and remove the input fields and the "Send Result to Bubble" button from inside the HTML code. Your HTML should now only contain the core JavaScript logic. Update your <script> tag to look something like this, leaving the calculation part empty for now. We will generate the full script via the workflow.

  <script>
  function performCalculation(numA, numB) {
    // The `Run javascript` action will put the calculation logic here.
  }
  </script>
  

  Don't worry about this function for now, it's just a placeholder. The main logic will live in the workflow.

2. Create the "Calculate" Workflow

• Select the "Calculate" button and click Start/Edit workflow.
• Add a new action: Plugins > Run javascript.

3. Configure the Run javascript Action

• Inside the script box, you will write the code that takes the input values, performs the calculation, and sends the result back to Bubble.

• Click inside the script box and construct the following code. Use the Insert dynamic data feature to add Input A's value and Input B's value.

  // 1. Define variables using data from Bubble inputs
  var numberA = Input A's value;
  var numberB = Input B's value;
  
  // 2. Perform the calculation
  var result = numberA * numberB; // Or any other operation you like
  
  // 3. Send the result back to Bubble using the function from the JavascriptToBubble element
  bubble_fn_value(result); 
  

  Note: Replace bubble_fn_value with whatever your function is named (e.g., bubble_fn_a or bubble_fn_calculator). You can check this in the properties of your JavascriptToBubble element.

4. Test the Full Loop

• Go to Preview mode.
• Enter a number into Input A and Input B.
• Click your "Calculate" button.
• The workflow will run your JavaScript, which calculates the result and sends it back to your JavascriptToBubble element.
• The When JavascriptToBubble event is triggered workflow you built in the last lesson should then fire automatically, saving the new result to your CalculationLog in the database.
• Check your App Data to confirm that the new log entry was created successfully.

You have now created a complete, two-way communication channel! Data flows from Bubble's UI into a JavaScript process, and the result flows back into Bubble's database.

Conclusion

Mastering this two-way data flow is the cornerstone of building the deeply integrated, scalable tool platform you envisioned. You are no longer limited to just embedding isolated widgets; you can now build seamless experiences where your Bubble application and custom code work together as one.

Let's recap the key takeaways from this lesson:

• The Run javascript workflow action is used to execute JavaScript code and send data to it.
• You can use the Insert dynamic data button to place values from your Bubble app (inputs, database things, etc.) directly into your JavaScript code as variables.
• By combining Run javascript with the JavascriptToBubble element, you can create a full, two-way communication loop: send data from Bubble to JS for processing, and then send the result back to Bubble to be stored or used in other workflows.

Now that you have the essential skills for integrating custom tools, our next focus will be on managing your growing collection of tools. In the next lesson, we will begin a new module on content management by designing and building a private admin page to add, edit, and manage all the tools on your platform.