Building a dynamic form builder with dynamic value calculations

I have been approached by an old client and now a very good friend @bubbleboy to complete a proof of concept for an improvement to an existing app that he has been working on for a while now. the proof of concept requirement was specific and challenging

Create a proof of concept that will allow me or any user to create a form dynamically and use the results collected against different non-persistent formulas.

So it a nutshell an app that does the following

  • Allow users to create forms with different inputs like
    • Text
    • Numbers
    • Sliders
    • etc…
  • Allow the users to define conditions on the input like
    • Maximum / Minimum values
    • Input types
  • Allow the users to define their own formulas that pickup values that are collected and calculate results for either on the back end or front end

Taking time to digest this TALL :sob: order and acknowledging that this will be quite a challenge I decided to cautiously proceed. But before starting to design and code I needed to do my homework and study up!

I decided to split this task into several goals

  • Create a method and logic to allow @bubbleboy and other none technical users to create a form
  • A process in which to transform the created form into a page that can be filled or completed
  • A way for them to reference and define a formula that is dynamic, referenceable and familiar to use
  • A process to compute the formula

At this point I remember thinking wow! did I just agree to do all that! I must be crazy!!! But heh people hire me to solve problems and face there challenges so I got started…

I used the first week to explore all the different ways form builders work, there database structure, the way they display information and how the logic was used. I completed plenty of forms and found plenty of JavaScript libraries that did not fit my use case. Then one day while i was doing my research i stumbled upon this nifty library hudsontable/formula-parser

Essentially what the library did is uplift or use excel formulas to calculate results in the browser. So i fired up Visual Studio Code and node.js and I did the simplists of tests

parser.parse('(1 + 5 + (5 * 10)) / 10');

and to my surprise I got the result

{error: null, result: 5.6}

The next step was to test if I can assign a value to a custom named variable. So again i did

parser.setVariable('MY_VARIABLE', 5);
parser.setVariable('fooBar', 10);

parser.parse('(1 + MY_VARIABLE + (5 * fooBar)) / fooBar'); // returns `5.6`

Again it worked!

The next step was to build a plugin that wraps this library for use in Bubble. Guys if you have every built a plugin you know what i mean. You start out with the best intentions and you finish with the most stressed of emotions. But nevertheless it’s a great skill that many should learn, and I am open to give lessons on this if there are a big enough interest. For those of you who don’t know what I mean by stressed just think of it this way

Building a plugin to satisfy a single user is easy. Building a plugin for everyone is HARD

I am sure many of my plugin developers can relate!

So the work started, Bubble fought and I fought back, its amazing how simple it can be in Visual Studio Code and how complex it can be when ported to Bubble. :wave:@bubble if you reading this we urgently need a VS Code extension that defines, objects, functions, snippets and some how connect with a plugin developer instance to facilitate quick code development and deployment.

@bubbleboy is happy with the results and I am happy that I started this journey. The new plugin will allow any user to define complex excel formulas that can be used in any part of there app. This plugin will open up new possibilities that allows regular business users to define there own formulas away from the use of JavaScript and code.

The plugin is under Beta release and can be found here

Formalize - Excel Formula Plugin for Bubble

As for the form builder and a test drive of the formula plugin can be found here

Bubble - Visual Programming

Ali Farahat

[email protected]

Do you have a project you need help with? Book an appointment here

About me

I’m a full stack developer (JavaScript, jQuery, Nodejs, VB, SQL, HTML/CSS & Robotic Process Automation) who is in love with UI design. I have a passion for systems and apps that change lives and simplify repetitive tasks and I try to do all that while keeping a simple and minimalistic design that is attractive and appealing.

With over 15 years experience in managing businesses in the automotive and transportation sector background I have made a successful career in developing apps that serve many international businesses. The experience I have in web-apps, e-commerce and RPA (Robotic Process Automation) is what I use to put a smile on your face; and helps me keep a smile on mine.

Great projects start with a simple hello, so drop me a line and let me help you build something that you would love!


Hey Guys,

My updated contact details below

Ali Farahat

1 Like

Hi AliFarahat,
Your plugin is really interesting, can we talk about it and additional functionalities.