Toolbox plugin - collection of utility elements

Yes good idea. You may want to show a preview, then have a slight delay before updating to the database, as it is an “expensive” operation in time and cost, and to allow for the user clicking like crazy trying out the different colours.

Somewhere along the line you’ll want to add a prefix “#”, if for example using it to colour a calendar event. This could be easily added in your javascript.

Thank you for the reply. My issue at the moment is that the workflow isn’t actually updating the database when using the above method. I think I will leave it where it’s at for now: clicking a button to trigger the workflow

1 Like

Looking again at the screenshot of the workflow, you have an event based on an input value is changed.

I suggest that instead, use the Javascript to Bubble elements’s “event” event, as in the example app.

There are thirty-seven e’s in this post.

@mishav - [quote=“mishav, post:9, topic:11264”]
What would you have it do, specifically?
[/quote]

I would like to trigger a javascript event when a Bubble custom state is changed. This will allow users to control a browser plugin by using the Bubble app.

I was thinking about inserting an html element into Bubble to listen for the event: “ebubble_fn_someexpression=active”. Then, when the desired custom state is triggered, the workflow sets "bubble_fn_someexpression=active’. Any ideas on how to trigger a JS event using your toolbox?

Seems like we would only need a way to trigger a JS function inside the workflow (which we can define in an html element). How difficult would it be to set “bubble_fn_suffix” inside another workflow event (ex. when custom state …).

I’ll add a generic “Run javascript” workflow action.

#New Version 0.2.0

  • Run javascript (workflow action)

Run your own javascript within a Bubble workflow (client-side only).

Find it in the “Plugins” actions …

Sample script making a random list of numbers, returning it to a Javascript to Bubble element.

I’ve updated the “Javascript to Bubble” example to include this.
app editor
app runtime

6 Likes

This is huge! Thank you for your hard work @mishav

3 Likes

@mishav
is there a way to use the result of the plugin in workflows ?
for instance I want to run a mathematical calc on a series of numbers using your run javascript action and use the result in next step of workflow, al this being done in an api workflow

1 Like

By API workflow, do you mean one triggered by an API endpoint? They only run on the server, whereas all the plugin elements and actions run only on the client.

What you could do on the server is send the numbers and an expression to api.mathjs.org.

For client workflows, yes you can …
step: Run javascript synchronously, send the result to a Javascript to Bubble element.
step: Use the Javascript to Bubble element’s value.

or

step: Run javascript asynchronously, send the result to a Javascript to Bubble element.
Javascript to Bubble workflow event:
step: Use the Javascript to Bubble element’s value.

2 Likes

Yep I meant server side :frowning:
Your toolbox plugin has been very helpful (amazing job there !). The ability to run server-side javascript code in bubble without relying on a external service would have been very helpful.

1 Like

Thanks!

Team Bubble are planning on opening up server-side javascript for plugins. That will make a large amount of workarounds redundant : )

2 Likes

@mishav This plugin is absolutely amazing. I’m running into a javascript confirm prompt when running a script with variables:

Here is the JS code that I’m running:

var things = [{thing1},{thing2}];
var bubblevariable = JSON.stringify(things);

encodeURIComponent(bubblevariable);

I’ve noticed the popup appears even when I compress them into a single line:
encodeURIComponent(JSON.stringify([{thing1},{thing2}]));

Is this a Bubble issue or browser issue?

1 Like

Cool! Thanks for the plugin! :grinning:

1 Like

I haven’t seen this before, but it looks similar to the browser’s popup to offer to kill long-running javascript.

Can you help me reproduce the problem?
Which browser?
Which part of the plugin is using this?
What do thing1 and thing2 look like? {thing1} doesn’t seem well formed for a JSON object.

#New Version 0.3.0

  • Javascript to Bubble enhancement - now allows dynamic values in the function suffix.

This should make it more suitable for use in repeating groups, each instance of the element can have its own function name.

Note that repeating groups can create some hidden cells for buffering lists.

Example: app editor app runtime
Showing a RG on the left with Javascript to Bubble element, and for comparison, a similar RG on the right with an Expression.

1 Like

Thanks helping out Mishav. Mysteriously, the issue has disappeared - I’ve been trying to reproduce the results that occurred above without success (a good thing :wink: ).

I am able to reproduce the same javascript prompt when altering database entries and quickly refreshing the page, which has a repeating group set to the same data set (Bubble doesn’t have enough time to reflect changes). So, it seems as though it was a Bubble issue, and not an issue with your plug-in. I’m guessing that performance was unusually slow on my account during the time the errors were occurring. Since we don’t know what is going on behind the scenes, at least we can rule out any issues with Toolbox plugin.

It will be nice when the Bubble team enables paid performance plans, this is definitely an an issue I do not want users to experience.

Might have found a bug - I created a sample app that checks the user agent of your machine. When ‘run javascript’ is ran the first time, this conditional statements is ignored altogether (and hence the alert shows up):

Editor

Runtime

The idea is to display an alert if you’re not using a Mac. If you hit the button multiple times (let’s assume you’re using a Mac), the conditional statement begins to work after the second run and the alert does not show up…but on the initial run all rules are ignored and the alert shows up. @mishav - any idea why this is happening?

To understand how “asynchronous” events work, what is happening …

  • The button is clicked, which triggers a click event, which triggers the workflow.
  • The Run javascript action runs the script asynchronously, which means the workflow action doesn’t need to wait for it to finish.
  • The alert’s condition is checked: is the value less than 1. The first time this is being checked, the value might be empty because the javascript hasn’t completed yet.

Quickest fix is to turn off the “asynchronous” setting, the workflow action will wait for the script to run.

A better approach in general is to leave it asynchronous, and have the result trigger another workflow event.

FYI a simpler approach is to setup a yes/no Expression, so you don’t need to do numerical comparisons or events or actions to get the result.

2 Likes

Hi there,

This is a pretty basic question but I’m trying to figure out how to use an expression in a form. I have 2 inputs and want to calculate the value and display the calculated result below. I can’t seem to figure this out: https://bubble.io/site/apprate/version-test/

Thanks!

Yes, you’re expecting the Expression element to display something, whereas instead it just makes the value available for use.

I added a text element to show how to display the value.