Issues with Updating Dynamic Props in Custom Bubble Plugins

juanpablo9717 · 2024-09-21T21:52:28.874Z

Hi everyone

I’ve been developing a custom plugin for Bubble, and I’ve run into a challenge when working with dynamic props and updating the DOM.

Here’s my setup:

I create an editable text component in the initialize function using JavaScript and add it to the plugin container via instance.canvas.append(element) or instance.canvas.html(element).
The problem arises when I need to update the plugin dynamically based on user interactions or changing props. Since initialize only runs once, props that change over time (like toggling visibility or enabling/disabling features) aren’t properly reflected.

The Problem:

Element Creation in initialize:
I build and append my component inside the initialize function. This works well for setting an initial state, but once the props change, the component doesn’t reflect these updates.
Handling Props in update:
To handle prop changes, I’ve been using instance.canvas.html(element) inside the update function. While this works for simple style or content updates, it introduces a new issue:
- It recreates the element every time update is called.
- This causes problems with Bubble’s “Conditional” tab logic and makes it hard to maintain dynamic behaviors (like hiding/showing elements or activating features) based on those conditions.
Multiple Element Creation:
If I use instance.canvas.append(element) in the update function, it appends a new element on every update, leading to duplicated elements in the container.
JQuery .html() Approach:
I’ve tried using instance.canvas.html() to replace the entire content of the container, which solves the issue of multiple elements, but still breaks any conditional logic in Bubble. It seems that since the element is recreated entirely, conditions don’t apply correctly because the reference to the original element is lost.

My Questions:

What’s the best approach to updating the DOM without recreating the entire element structure every time props change?
How do you handle dynamic prop updates while preserving conditional behaviors (like hiding/showing elements or toggling functionality) within the plugin?
What are the best practices for using initialize and update? Specifically, what types of logic or setup should be handled in initialize vs update? Is using the .html() method to replace the entire element structure a recommended practice, or are there better strategies to avoid issues with dynamic values?

I’d appreciate any insights or best practices from those who’ve dealt with similar issues. Thanks in advance for your help!

dorilama · 2024-09-21T22:28:34.418Z

it looks like you can benefit from exploring the current status of web development and how this kind of problems are approached (both with frameworks or vanilla js solutions)

generally speaking you can store stuff in instance.data (even references to elements created in initialize or somewhere else) and then inside the update function decide what to do based on the properties you get and the data you stored

GH5T · 2024-09-21T23:09:48.967Z

dorilama:

it looks like you can benefit from exploring the current status of web development and how this kind of problems are approached (both with frameworks or vanilla js solutions)

@dorilama is correct. You need to learn the fundamentals before jumping in. Bubble has its own context, and syntax, sure, but it still follows the same principals.

Anytime you use the update function and have properties, when the page loads, it fires once, when a property has changed (even on page load because it’s changing from default to filled), it fires again.

You’ll need to setup initialization flags to assure it won’t fire more than needed.

For data referencing, like @dorilama had said, you can setup instance.<data> or instance.data.whatever. With “canvas” it’s just a div element. You can modify the element like any other HTML.

With initialize you create the initial element properties (defaults), and with update you change that element.

You can refer to the canvas or you can create your own element inside the initialize, set that element to instance.data.element and then refer to that element on the update function.

jonah.deleseleuc · 2024-09-22T21:22:31.993Z

This is how I setup every plugin I create:

Initialize function:

instance.data.i = 0
instance.data.time = Date.now()

Update function:

if(instance.data.i === 0) {
instance.data.i++
// create element here with id = `super-cool-element-${instance.data.time}`
}
else{
// code has already run one time, so we won't create a new element
const element = document.getElementbyID(`super-cool-element-${instance.data.time}`)
// do the rest ...
}

This logic will help you understand how to create bubble plugins.

Wishing you luck!

juanpablo9717 · 2024-09-23T21:10:37.249Z

Thank you all very much for your answers!

@dorilama @GH5T @jonah.deleseleuc

I had been trying so far with creating the element in instance.data.whatever_element and accessing it in the update to modify it, my main doubt was how good practice was to do this or if there are better ways.

also as @jonah.deleseleuc mentions I tried it by “flags”, at the end it is with the structure that we feel more comfortable with.

I will keep the post open to see what other kind of solutions other people in the community have, since I have tried to do it even with React, but it seems to me that it is too much code.

As I mentioned, I will keep the post open in order to see other possibilities.

And thank you very much to everyone, your answers are very helpful and mainly clarify me a little bit what common practices are used.

ihsanzainal84 · 2024-09-23T23:40:35.607Z

It IS good practice to store your functions and parameters in instance.data when it comes to coding for Bubble plugins. Do it any other way and you’ll tend to get weird/bad results or you’ll end up with a lot of unnecessary code.

The most important thing is compatibility. If, and when Bubble decides to make changes to how plugins interact in runtime, you’re much safer NOT using unnecessary workarounds.