Native JS Bridge - two way bridge for Javascript addons in Bubble

Hey guys,

I`ve been tinkering away on a native JS “bridge” that I first came up with the idea to when I was working on the custom cordova build with push-notifications for bubble. I needed to hook custom JS into the bubble layer and visa versa.

This will open up Bubble for endless possibilities. :slight_smile:

I have a few issues I`m trying to resolve and the primary one is the need to focus out for an input field to render an update or action in the bubble system.

I have now done it so that you could change values of multiple input fields (Making possible with creating conditional logic etc.), and then being able to execute a bubble action from external JS by emulating a click on a bubble button.

I made sure that all my elements had unique values or placeholders that would have a high probability to not being replicated anywhere.

I also implemented keyboard shortcuts with less overhead than others have done and with full modifier (CTRL,ALT,SHIFT etc.) compatibility. I got inspired to doing the keyboard feature by @ryan Mine is executing an emulated click instead of the input fields.

Check out my example and feel free to collaborate on making a better bridge:

6 Likes

@emmanuel How can i have the input fields be watched/updated without focusing out from them? I tried doing this programmatically using jquery`s blur on the field but did not work.

We unfortunately don’t expose that yet.

@csfalcao @natedogg @ryan @jordanfaucet

Any of you guys want to contribute and test? This would help with making it possible to do actions containing data from received push notifications. To see how we could use Jquery (which is already instatiated in bubble), to focus out of a form field after changing its content.

The main goal is to let bubble recognize that the input field has changed programmatically, now it only happens on manual focus out / “tab” key.

As I wrote previously I have tried to use jquery.blur but it seems it did not recognize it. Maybe we need to focus first before doing blur? hmm…

Preview link: https://bubblenativejsbridge.bubbleapps.io/version-test
Here is the edit link: https://bubble.io/page?name=index&id=bubblenativejsbridge&tab=tabs-1

2 Likes

Very cool!

I am having a hard time understanding the main reason for doing this though?..

Unless your objective is, specifically; to populate input fields from an external source and have them updated on the bubble side.

Because in regards to push notifications - if the end user is currently viewing the bubble built webpage – a custom workflow block in bubble can be built to show a popup to that user (and not all users ie. notification) - regardless of whether the end user clicks a button or where on the site they are. And data can be further manipulated from that.
As for native mobile apps - an existing api should be able to complete the process (converting to native push notification)?

That being said though - there’s definitely great use cases for this I am sure. But I don’t really know what it is yet. Although I can think of a few in regards to the keyboard shortcuts. Whats your end plan with this?

Both totally sweet hacks, regardless

Hey Jordan,

Thanks, let me explain a few use cases.

  1. Voice input from browser, phone or desktop-app. We need to input the transcript into a bubble field. Working example we did the other day: Any way of adding voice to text integration in bubble? (ie. Nuance)

  2. To use push notifications we need the JS bridge to register the device and to store the device id inside bubble DB. If there are multiple push notifications unopened. For example direct-messages from different people. You want the relevant content to show. Thus we can execute javascript whom sends the correct push ID, popup-content-ID or view-ID into bubble. On the other hand we can also execute scheduled/timed or background local notifications from bubble>javascript>phonegap>native-app.

Other use cases is all phonegap/cordova plugins that needs to be called from local app. It could be barcode scanner, beacons, bluetooth etc.

Basically my end plan is to do mobile apps that perform well and that is utilizing native behaviour as well as being able to customize the bubble front-end experience in browser when needed.

2 Likes

Makes sense to me. Well that’s good

I guess what I was thinking - for push notifications, I have seen some API services that can act as the bridge between a web app / native notification. And a conditional workflow block in bubble could trigger it.
But it totally depends on the whole construction of the situation - so I definitely see what your saying.

I haven’t worked with push notifications yet, so I can’t say what is best.
I support the search for good ways!

From some experimenting, maybe this partially answers your question …

Try the javascript “change” function, to signal to bubble that the element has changed.
i.e. extending your example:

$('input[placeholder=x042yesno01]').val(showiframeval);
$('input[placeholder=x042yesno01]').change();

Also useful to know is, the HTML element is reactive, i.e. if the HTML/javascript element contains a reference to a bubble dynamic value (added in via the “Insert dynamic data” while editing), the entire element will be rerun on change of the dynamic data.

For example, my made up notation of <<< bubble dynamic data >>> to show where to use the UI to define it:

<script>
console.log("at last, found my stuff:", "<<<element or page or db dynamic data>>>");
call_fn_with("<<<element or page or db dynamic data>>>");
</script>

For another example, run something on page load:

<script>
if ("<<<Page loaded (entire) = 'yes'>>>" == "yes") {
  console.log("stuff to do on page load");
}
</script>
1 Like

Fabulous @mishav thanks for that :slight_smile:

  1. So to be clear, on dynamic updates the elements are “RE-rendered” completely? Not just updated?

At least I did not have to do anything to have the ID I assigned via jquery stay the same when I linked two input fields using “dynamic data”, changing data in one would change in the other. The input field that was “re-rendered” kept the id= tag.

  1. Do you have any more insight into this reactive implementation, why are they reactive?

  2. Regarding your sentencer below can you elaborate a little?

  3. What do you mean that should be defined, and why?

For example, my made up notation of <<< bubble dynamic data >>> to show where to use the UI to define it:

Thanks alot in advance! :smiley:

The HTML element is like the other bubble elements, it’s content can have dynamic values put into it. If any of the values change, the HTML content changes, which causes any javascript inside it to be rerun.

You can ignore the stuff about <<< >>>, it’s not relevant.

@gurun it’s wonderful you got the links working :slight_smile:

I have checked your example link.Thant’s great man.

Did you guys managed to save the voice input into Bubbles database?

I can replicate all the cool stuff @gurun did with the voice input and it works like a charme on chrome. But Bubble does not save the voice input in any way.

So I was wondering if this is still an issue or if someone managed to implement such a solution and can me give me a hint on how to save these inputs.

Thx!

Hey @AlexK , I think my example explained how to save the values back into a bubble element, also search for my javascript bridge example. You just need to have a non visible input element (or visible). then run a jquery change function to indicate that the element changed.

Let me know how it works.

Are these examples still valid? I’m in need of js bridging between my iOS webview wrapper and Bubble. More specifically I need to types of actions:

  1. click a button in the bubble app (wrapped in webview) will prompt a native function in iOS
  2. the result of an action in iOS should prompt a workflow in Bubble

So basically two way. To be more specific, this is about implementing a QR scanner in my native iOS app, reading qr codes in my bubble app.

So basically you need a custom cordova build.

You need to add the barcodescanner cordova plugin to your project, instantiate the plugin javascript, and then use the bubble “run javascript plugin” to call the scanbarcode(); function. The result of the function will get back into your workflow from the “run javascript plugin”. You can fetch it via “result of step x”.

To understand custom cordova builds, search the forums. You need to get your bubble zip file, and add the appropriate cordova plugin + rebuild it.

Let us know how it goes, your learning progress and challenges.

1 Like