[Plugin Build] From Begginer to Begginers

Plugin builders
1

Hi guys!

I’m a complete beginner in the art of building plugins on Bubble. In fact, the documentation does not help those who are also starting to study Javascript.

My first question is to understand the codes that Bubble provides in the “initializing” part, starting with “instance.canvas” and “instance.data”. What it does? is there practical examples?

I don’t know if my knowledge of Javascript is enough to understand how the plugin builder works. But I have great difficulty moving forward with code (my mission currently is to take the value that is in the Database and place it in a <div> that contains the text <p>).

We can take advantage of this topic to share the concepts of each plugin builder code (as if it were a glossary) for the community.

e.g.
in Initializing:

instance.canvas.append([variable]) → Show the variable on app…
instance.data.[variable] →
instance.publishState() →

I don’t know if it’s the correct place or if it’s a pertinent issue for plugin builders.
Thanks in advance.

2

@vini_brito has an amazing course for developers, I would recommend purchasing that course

4 Likes
3

You can checkout my course where you can-

  • Learn how to build Bubble Plugin using chatgpt.
  • In-depth about Bubble plugin editor.
  • how to build plugin like OpenAi Streaming, Audio recorder, Convert Group to pdf and many more.
  • how to market your plugin.

Checkout the course here - Learn Bubble.io Plugin Development

1 Like
4

First question:

The “initializing” part is the <div> creation part. You can create the div on update, sure your can, but the update part is always updating, so if you want to create “stable” elements, put on the initialize.

So you need to create a div using

let myDiv = document.createElement('div')
instance.canvas.append(myDiv)

Other good practice on plugin builder is using the var called instance.data.[your_var]
this instance.data you declare it anywhere in the code, and it can be read anywhere in the code.
An example if you want to refer this variable myDiv in other part of the code you can transform in instance.data.myDiv.

Updating the initialize code:

instance.data.myDiv = document.createElement('div')
instance.canvas.append(instance.data.myDiv)

Now you can use your div in any functions of the code, that is visible.

1 Like
5

If you want to put a text inside this <div> you need to put than in the update part.

//update code
let newContent = document.createTextNode("Hi there");
instance.data.myDiv.appendChild(newContent);

If you want to transform this text in dynamic text, you’ll need to create a field as a dynamic text and use the properties.[name_of_the_field]

Updating the update code

let newContent = document.createTextNode(properties.[your_field_name]);
instance.data.myDiv.appendChild(newContent);

I think that this code will work.

But that’s the logic

1 Like
6

Hey!
Thank you for your help with these initial tips. I managed to improve my plugin code, but now I’m stuck on one issue.

I’m using CKEditor to create my plugin (it’s a text editor, for private use). I’ve already managed to make the plugin start, update the States, etc., but my difficulty is showing the text that is saved in the database in the editor and when saving the new text in the database.

function(instance, properties, context) {

// Load the DB text in a editor.
editor.setData(properties.content);

// Function to save the new text in a DB for each keyboard up event.
instance.data.text.onkeyup = (e => {
    
    // expose the new text in a state.
	instance.publishState('_texto', editor.getData());
    
    // Triger event to save a new text in a DB.
	instance.triggerEvent('value_changed');
    
} );

}

There is a conflict with the loaded text with the new text to be saved in the DB.

Thank you in advance for your help to a beginner in Javascript.