Toolbox plugin - collection of utility elements

Announcing Toolbox, a plugin containing some element-based utilities.


#List of Numbers

Generate a list of numbers. Can be used to create a data source for a repeating group or dropdown.


#Javascript to Bubble

Call a function from your custom javascript, to trigger a Bubble workflow event, and pass a value to be made available in Bubble.

Properties:

Published value:

Sample HTML element:

Result:


#Expression

Enter an expression to be evaluated, tick the warning checkbox, choose the result type:

Sample results:

#Sample page
app editor
app runtime

Reposting the announcement, so we have somewhere to comment feedback :slight_smile:

52 Likes

Thanks a lot @mishav for this. It really addresses my pains with writing mathematical expressions with parenthesis :slight_smile:. Prior to this i was using math.js plugin which for some reason i found to be a bit slow to call even for very simple expressions.

2 Likes

Expressions! Nice :slight_smile:

1 Like

Very nice - thanks so much!

Great! Anyone want to post samples of how they are using it?

This is great, especially enjoying the Javascript To Bubble, lots of potential here. Any chance of getting a ‘Bubble To Javscript’ tool so that we can create JS events?

2 Likes

Yes that would be great, indeed!

Very nice @mishav, thank you for sharing! :heart:

I missed seeing your edit somehow 


What would you have it do, specifically?

These are great @mishav!
Curious about the Expression one and the checkbox / concern about executable code. Does this mean we should not allow users to use Inputs to set values used in the expression? (even if inputs only allow numbers?)

Or do you know of a work around for dynamic numbers to be used in the expression.

1 Like

Its really a reminder to be aware of a possible attack window. What we want to prevent is a user inputting javascript to run on other people’s browsers (they can do what they like to their own browser). So this is only a concern if evaluating text fields retrieved from the database or an API that contain user input that hasn’t been “sanitised”.

How to clean text data of executable code? A simple solution is to use two :find & replace: replace \ with \\, then replace " with \", then the text can be put within double quotes and be treated as text only in the evaluation, with the escape codes inside them being escaped. : )

An example:

I didn’t want to invent an obscure expression syntax, so I use javascript for the expression evaluation. So it has pretty much the same security holes as the HTML element does.

Numbers, dates, etc. aren’t executable code on their own, so no problem there. Just need to be careful with text from an untrusted source.

5 Likes

Got it, thanks for the detailed answer!

Looks interesting.
Can you add a count up and count down timer to this toolbox as discused here:

A count down timer is fairly easy to implement with workflows. Do you see an advantage in having this in an element plugin?

Ive done it with workflows and multiple ui elements and it is a bloody nightmare!!

That made me laugh!

You may have a case for it if its that complex. Can you add a post to the other topic with more details of what you are doing?

I am trying to pull a hex color code from a color picker element and save it as a database text thing using JavaScripttoBubble. I found this Examples - jscolor: JavaScript Color picker

In the examples it reckons this should work:

The color selector itself works but no data is being sent to bubble_fn_1 like in your example. This function does work if I replace (jscolor) with (“test text”), but I can not seem to figure out how to properly retrieve the hex code and use that text in Bubble.

Can you see what jscolor and typeof jscolor is with console.log?

Edit: Try this:
bubble_fn_1(jscolor.toString());

It should return something like: 5effe7 .

1 Like

#New Version 0.1.0

  • List Item Expression

Evaluates an expression for each item in a list source, returning the results of each in a new list.

I’ve been fiddling with this for a while, today I got it polished enough to share.

Some use cases 


List summary:

8.97 item subtotal, qty: 3 price: 2.99 fork
53.97 item subtotal, qty: 3 price: 17.99 knife
78.76 item subtotal, qty: 1 price: 78.76 Silver Spoon

JSON array of objects:

[{ "quantity": 3, "product_name": "fork"},
{ "quantity": 3, "product_name": "knife"},
{ "quantity": 1, "product_name": "Silver Spoon"}]

Examples:
app editor
app runtime

4 Likes

That did it! Thank you so much @mishav

Edit: What would you do in this situation:

“Make changes to”:

I am trying to update a database variable based on this changing hex code. Essentially removing a manual step for the user — instead of forcing them to click on a button that saves the hex code, this would be saved dynamically whenever a new color is selected. Thoughts?