[Free Plugin] Air Keyboard Shortcut

Showcase
1

The Air Keyboard Shortcut plugin allows you to define shortcut key combination and use it to trigger workflow actions.

Supported Keys
For modifier keys you can use shift, ctrl, alt, or meta.

You can substitute option for alt and command for meta.

Other special keys are backspace, tab, enter, return, capslock, esc, escape, space, pageup, pagedown, end, home, left, up, right, down, ins, del, and plus.

Any other key you should be able to reference by name like a, /, $, *, or =.

Keys that require shift, example ?, are handled magically for you. They should just work.

Cross platform support
The plugin provides a generic mod helper which lets you set cross platform shortcuts.
So if you define a shortcut binding as mod+k, on Mac this ends up mapping to command+s whereas on Windows and Linux it maps to ctrl+s.

Plugin element properties
This plugin is a non-visual element. Which means when it is added to a page it will not be showed on preview.
There are only two fields to set in the element properties as show below.
image

There are two ways to define shortcut keys

  1. Key combinations
    This allow you to define a shortcut key combinations that must be pressed together. e.g.
    Use a + to specify the key combination. e.g. ctrl+k. This will allow you to trigger an action when the ctrl and k keys are pressed together
    Note do not use more than one character key in a combination. If you do the shortcut will be triggered by only that last key specified in the combination.
    You can use a sequence in that case or use the character key in combination with a special or modifier key.

  2. Key sequence
    This feature is inspired by Gmail-style shortcuts. If you type each key in order the final one in the sequence will cause the trigger. If you type a key not in the sequence or wait too long the sequence will reset.
    You specify a sequence by separating the keys with space. e.g. shift a.
    Or you can even have a complex key sequence like up up down down left right left right b a enter. Hellooo Mortal Kombat fans :stuck_out_tongue_winking_eye:
    You can also make a sequence that includes key combinations within it.
    e.g. g o command+enter : this means that to trigger this shortcut the user has to press g quickly followed by o and then press command and enter together.

Allow globally option
By default the shortcuts will not work in input elements like text input and textareas.
But when this option is checked the keyboard shortcut bindings will work in all inputs including text inputs.
Use this with caution because it can cause some issues with default keyboard shortcut bindings in inputs.

Plugin actions Removed, see EDIT below
The plugin also provides two workflow actions
1. Pause AirKeyboardShortcut - for pausing the keyboard shortcut bindings. You can use this allow users to enable and disable shortcut functionality.
2. Resume AirKeyboardShortcut - for resuming the keyboard shortcut bindings

How to use:

  1. Install the plugin
  2. Add the element to the page.
  3. Define the two properties as explained above
  4. In the workflow page add a new event
    image
  5. Choose one of your AirKeyboardShorcuts elements
    image
  6. Define your action as usual
  7. The plugin actions can be assessed from the Workflow page, the Plugin as shown below
    image

EDIT
Iā€™ve decided to removed the actions.
Theyā€™re not really needed as you can hide simply hide the element to stop triggering the shortcut binding
Most importantly with the actions, i had to put the plugin library in the shared header which seems not to be playing well with other plugins.

Enjoy
Seanhoots

19 Likes
2

Thank you so much for this plugin @seanhoots!! I have been wanting to setup a workflow which saves the value of a multiline input by hitting enter (instead of having to click the button), but assumed it wasnā€™t possible before! This plugin solves that!

Iā€™ve set up a page with the workflows; the only thing Iā€™m having trouble with is that if the User types something somewhat quickly, and then hits enter, the value isnā€™t fully updated/saved by Bubble. (For example, if the User types ā€œhey!ā€, only the ā€œhā€ is saved). I was wondering if you had any thoughts on how I could get the entire input value to be saved? Do you think adding a delay before the workflow is trigged is the only option? Here is my setup:

Preview:

Editor:

Thank you so much!

3

@fayewatson i gave your setup a quick look and from the little test i performed it seems the application is not processing stuff quick enough so from my limited experiment, its only when i add a 2sec delay that it works as expected.
I will give it some thought and see if there is a different approach without using the delay.

4

Thank you so much! :slight_smile: If itā€™s a hassle, no worries at all!

5

@seanhoots It looks like everything will update instantaneously if after enter is hit, the workflow first sets the focus to a second input, saves and then clears the first inputā€™s value, and then sets the focus back to the first input. All works great now! Thank you so, so much for this plugin! :slight_smile:

image
image2132Ɨ582 41 KB

Preview:

3 Likes
6

Hi @fayewatson, thatā€™s interesting. Iā€™m still not sure why it has to work this way.
When i run it with the debugger without any delay or this kind of workflow the textfield was receiving the value as expected.
Iā€™m guessing all these actions simply just gave enough time for the value to properly get set.

Anyway iā€™m happy its working. I tested it and it works really well. Good job.

1 Like
7

Hi! Is this possible to use FN key? (Function)

8

Loving this plugin, but I have an issue. Iā€™m using it to move up/down between repeating group cells. The problem is that the repeating group does not scroll the current cell into view once you move past the cells on the screen.

Does anyone know how to make the repeating group scroll as you move up/down?

@fayewatson @seanhoots

9

@Kfawcett Can you do something with the Scroll to entry action?
Havenā€™t giving it much thought and how it will work but thatā€™s the first thing that comes to mind.
image

1 Like
10

Unfortunately that isnā€™t providing the intended action. The ā€œScroll to entryā€ is supposed to move an entry to the top of the repeating group, but I want/need to only move the repeating group up/down from the last visible item by one cell. So, if youā€™re moving down it moves one cell up as you get towards the bottom of the screen. If moving up, it will move one cell down towards the top of the screen.

11

@Kfawcett I havenā€™t tried this but it might work if you start the scroll to entry action after the User has reached the second page, and scroll to the earlier entries.

For example, if you have a repeating group of 6 and the User presses the down arrow to view cell 7, the scroll to entry would be scroll to cell 2 (even though 7 is the selected cell)? Then if the User scrolls back up to 6, the scroll to entry would be 1? This way it looks like itā€™s loading one at a time?

12

Thanks @fayewatson! I just found this post, so Iā€™ll try to see if I can accomplish something similar.

13

No problem! :slight_smile: I need a similar setup with the keyboard shortcuts so Iā€™ll try a few things too!

14

@Kfawcett When you set up the scroll to entry action, does the scroll action move that item to the top of the repeating group every time? I adjusted the example here and it looks like itā€™s happening randomly. After scrolling down through all of the entires, it shows one at a time. After scrolling down through all of the entries a second time (without refreshing the page), the scroll to entry action instead moves items to the top of the repeating group. Not sure why there is a difference? :thinking:

Preview:

Editor:

15

Huge thanks to Sean Hoots for publishing this plugin and to Faye Watson for her demos. Navigating Repeating Groups via keyboard is really helpful. My only trivial contribution is that checking the ā€œanimate the scrollingā€ on the ā€œscroll to entryā€ action makes it easier for the user to see where the Repeating Group entries are going.

Many thanks again.

1 Like
17

@hikaru Is it still happening with the first action now setting focus to the transparent input? If so, the set focus and javascript actions could be happening at the same time. One workaround may be to keep the ā€œSet focus to transparent inputā€ action in the workflow, and then put the rest of the actions in a custom event. Then, after the ā€œSet focus to transparent inputā€ action, set the second action to Schedule the Custom Event to run in 0.2 seconds. That might work! :slight_smile: Let me know if that doesnā€™t do it though, and Iā€™ll definitely look again!

19

Hey All,

I am having issues with this working consistently. It does work sometimes. What I am trying to do is run a workflow to make changes to a thing, but it is only doing some of them and only occasionally. Here is an example. I type in the fields test info. I press ctrl+s as per my setup, and only some of the fields save. That is weird to me as the workflow has all of the input fields not just some of them.

Ben

1 Like
20

Hey there! Iā€™ve tried setting this up to trigger on ā€œtabā€ but nothing at all is happeningā€¦Is this plugin still working?

21

This is AWESOME! Got it to work quickly!

When I hit space, the page also scrolls. Any way to prevent this?

22

Has anyone been able to deploy a FN / Function Key using this?

@seanhoots is using the Function Key possible with this plugin?

Appreciate your work on this!