Creating keyboard shortcuts in Bubble are impossible, or so it seemed. Until one day, when playing around with some conditionals, workflows and, guess what else? Input fields. I found a way to create a shortcut in Bubble.
The Philosophy of The Shortcut
Input fields are back again. We used them last time to learn how to convert data and this time we are using it to create shortcuts. If you want to make something like Dribbble’s keyboard shortcut for liking a post, this will get you there.
We will be covering the basics of creating keyboard shortcuts and there are many ways to set them up. We’ll be covering just one way so you can get an idea of how it works. After learning how it works, you’ll be able to tweak it to work for what you’re making.
@ryan I understood as you wrote that there were several limitations on your implementation. In my previous trying to connect the native JS layer with bubble I managed to emulate a click on a button (could be a hidden one) from keyboard commands. And you could do ALL kinds of keyboard commands and multiple modifiers even. For example CTRL+SHIFT+K
Check it out, maybe it can help your readers further if you update your article and remove the limitations part
What do you think?
This looks to of removed most of the limitations. We could use a hidden button with the unique ID as the button’s text. Which breaks a barrier I have faced when trying to implement scripts; could never consistently identify elements using the typical class or ID tag.
It would be fantastic if had access to an element’s ID tag in the editor, this would make things much easier when trying to add your own scripts. @emmanuel
As for the article, the limitations still apply since it’s in reference to the method described. I can add a link to your demo (the custom bridge script looks to be cut off).
@ryan I already fixed assigning IDs to bubble elements without bothering @emmanuel . Im releasing a basic web speech api demo anytime soon in half an hour which is using this method.
To assign ID`s I used jquery to trail trough the code and look for a unique button name, then assign ID, then rename the button to the correct name (could even do function to remove the single WORD in button containing certain format at start of unique code X1337BUBB for example.
Yeah, in the LIMITATIONS part of your article you could mention the alternative method so that it does not limit someone that needs other key combinations.
I have two questions for you
How is the custom bridge script being cut off?
Do you wanna help me to find out how to do two things, A) to find out how to let bubble detect programmatic focus out of textfield (when entered text into textfield programmatic need to focus out somehow) and B) how to STREAM data into the textfield without focusing out, every character for example.
Also, couldn’t the assigning ID method you described solve the problem. Because when the JS script detects a field go out of focus, it could emulate a click on a button. The button could then tell Bubble that it’s out of focus and that could focus on another textfield.
Without having direct access to the database using custom scripts, this seems like the only viable solution so far.
I have not yet, but will likely for a project I am working on now. Also, would you mind if I write about your method on my Hacking Bubble series on Medium, with credits?
