Instruction on Building Custom Elements

Hi Everyone!

I have just begun to explore building custom elements but I am unsure exactly how to get started. I have a working javascript program I wrote that I would like to integrate into a custom element in bubble to perform calculations on user inputs. I would then like to be able to grab the value of the result of the calculation to it to add to a Thing through workflows.

My understanding at the moment is that I can create an input form element, add properties to it that I can give dynamic values so that they can be linked to user’s other input elements, and then I can access these the values of these inputs using the "properties. " syntax.

However, bubble is a bit different than the traditional web development that I am used to. My questions are as follows:

  1. How do I actually get the input element to show up on the page given that it is written entirely in javascript and not html?
  2. How do I expose the element’s value so that it can be used in workflows? I set up a state called “value” as demonstrated in the example element found in the manual but that didn’t quite work.

I would greatly appreciate help on the topic. Perhaps if someone created an example that shows how to perform calculations on user input and how to change the operation based on the user’s selection - I know that would be greatly helpful to me and would perhaps be helpful to others as well. I could even write a simple javascript program for the demonstration to be done with. I would also be willing to pay someone to simply integrate my javascript program into an element.

Thanks in advance.

Also, if you represent a Bubble development shop that has built plugins and elements before - I would be interested in talking about contracting this job. I imagine it would be a quick turnaround as I have already written all of the javascript and based my functions on a “properties” object that feeds its data to the functions to perform calculations on.


There are lots of shops and individuals who will take on the work for you, but it sounds like you’ve got the JS chops to get it done quickly yourself. Have you looked at the documentation on building a plugin?

Thanks @djwideman, I have read the documentation but was still having a little trouble in the execution, I think I am about 90% of the way there though so hopefully I can figure it out this weekend by toying with it a bit more.

If anybody has examples of plugins with custom elements they have built that I could use as a reference, that would be greatly helpful in helping me figure out how to build the element. Specifically, getting the element’s custom state (in this case, the value of the input) to be accessible to other elements/workflows is the main thing I am having trouble with.