In this article, we’ll demonstrate how to use the very powerful TOOLBOX plugin in Bubble to do more than just evaluate and return the results of one or two JS strings. Instead, we’ll use it to create a whole new JS function, invoke that function and then use the result elsewhere.
For this exercise we will create a function that takes a HEXADECIMAL string and convert it to a DECIMAL string.
Step 1: Install the TOOLBOX plugin
Go to the Bubble PLUGINS screen and search for “TOOLBOX”. Because of its popularity it should be the very first plugin in the search results list.
Installing it will add a number of new elements to your VISUAL ELEMENTS list. The one we want is called EXPRESSION – just add it to any Bubble.io page. Give it the name Expression hexToDec.
Step 2: Add The JS Code
Click on the Expression element you just added and enter the following JS code:
In the image above, the numbers mean the following:
- This is the core hexToDec function.
- After the function is defined, we are calling it with a hardcoded hexadecimal value. We will replace this with a dynamic value later.
- We are telling Bubble that the return type is text.
Here is the GIST that you can use to just copy-and-paste the code into the Expression element.
3. Add Some Elements To Get And Store Values
We want to add two elements to the screen:
- An INPUT element where the user can enter a hexadecimal number and
- A text element that will display the output of the conversion.
We have named the input element Input hexValueToBeConverted and the text element Text ConvertedHexToDecValue
We will be using these names later.
4. Modify the JS code To Use The New Input Value
Now, we want to modify the JS code we wrote in step 2 to insert the value we want to convert. It should something like this:
Notice that we have replaced our hardcoded hexadecimal value with the value of the input box. BUT, we have left the QUOTES in place.
5. Add the Expression Output To The Text Element
Now, we have to add the output of our hexToDec function to the text element. It should look like this:
We have setup a CONDITIONAL on the text element so that it only displays the calculated value if there is a value in the INPUT box. This prevents silly errors that will otherwise show up in the browsers JS console.
6. The Final Result
Wrapup
The purpose of this article is to illustrate the power behind this particular feature of the Toolbox plugin. You do need to be careful about using user-input; in the real-world we would have to sanitize and validate the input coming from the text box to prevent the accidental execution of malicious JS code.
Additionally, we are returning a decimal value as a STRING. If the value is to be used in future calculations, it will need to be converted to a number first.