Tutorial on creating Elements in Plugin Builder

I’ve been looking at different UI components and I’m not sure how to get started.

  • Are there only specific types of UI/javascript that I can use?
  • Could anyone provide examples for plugin elements they’ve built, or are building? @AliFarahat ** hint hint** :slight_smile:
  • Could you provide some steps on how to create new elements. I’m not really understanding what to put in the initiliataztion. For example, I’ve though about trying to add a context menu element, but I’m not sure how to get started.

Thanks in advance!

2 Likes

Besides reading the manual and reference, the builder itself is quite informative. For instance, if you click ‘show documentation’ links on the upper right side of code boxes, it shows variables and objects that you can access, depending from the fields, properties, states that you set for the plugin elements and actions.

At the beginning, it really isn’t so much to fill in about you plugin, in the sense of plugin’s meta data. I got the impression from the reference guide that there’s a plenty of stuff to understand and decide before you start to write code, but it isn’t.

I believe you can use just everything that you can imagine from the HTML5 and javascript space, but still, the plugins can be developed just for the client side as for this moment - the Bubble team is planning to give support for server plugins, too - can’t wait :slight_smile:

A lot of plugins have ‘see plugin code’ button on their ‘official’ plugin page, I learned a lot from those.

image

For instance, you can check if the user entered the reference to a thing or a list of things by this simple check:

if (properties.item && properties.item.listProperties) ...

or

if (properties.itemlist && properties.itemlist.length) ...

I suggest that you try various setups (header, initialization, update) with a simple input box or similar element, to see the behaviour. It takes a while to play with it, but you’d do it anyway - with or without tutorials …

Good luck! :smile:

4 Likes

I am also very curious about this and also trying to learn. I am trying to learn how to add GMaps to my app, but I cannot even get a simple map to display.

I am not a coder so I am all trial-and-error. Trying to follow the GMaps developer tutorial but I do not even know where the parts should go. Any clues would be very helpful.

Thanks eftomi! The hidden documentation was helpful. That should really be shown or made more noticeable.

2 Likes

Hey @Kfawcett,

You could also take the Plugin Development course to dive into making plugins for the community. :slight_smile:

2 Likes

Hi @copilot
does your tutorial cover building a sample plugin, or is it just an overview of the features with no walk through?
Thanks.