Keyboard shortcuts to run actions (not for use within Wappler)

Feature Request
#1

(This is not related to the various requests for keyboard shortcuts when using Wappler.)

The more I use Wappler, the more I can see it’s potential for web/browser based application development rather than just conventional websites. One thing which is missing and would be a great feature to have anyway - for CRUD/admin pages etc. - would be the ability to assign keyboard shortcuts to actions. Eg pressing keys to move between records in tables as in this example: here (press J or K to navigate up or down).

There are some basic features related to this already available - eg you can control the tab order and then run actions on fields or buttons via the keyboard with modifier keys. It would be great if this feature could be extended. Just a thought.

Can you build notion like software on Wappler
Activate Button Which Executes a GET Server Connect on Pressing Enter
#2

really good idea :+1:

#3

Implemented now in version 1.6.3 :slight_smile:

You can add the key names as modifiers with the keyboard events, so you can choose ctrl+keyA for example to run an action.

it is advisable to bind to keydown for the best browser compatibility

2 Likes
#4

that’s very interesting, as I use Wappler to build our application to manage clients.
It is possible to have a screenshot how to use the modifiers on keyboard event ?

thank you

Roberto

Run flow with keydown
#5

Thanks George. A few hours from request, to implementation and release!

I was puzzled about where to attach these events. I attached them to the <body> and that seems to work, but I’m not sure if there are other options or possibilites. I’ve used key stroke events once or twice before, but not in this way.

I don’t think more than one key stroke event could be added to a dynamic event before (at least, via the UI), but this has been resolved. I think there may be a slight bug - I noticed Modifiers ‘jumping’ between two Key Down events. I’ll see if it happens again.

#6

I may not be using these new options correctly, but here is very simple example. I created two events and assigned two keyboard shortcuts to them:

image

Ctrl+M opens modal 1; Ctrl+L opens modal 2.

I attached these events to the <body>.

I assume any event can be triggered like this. Make sure you add a modifier key as well as a letter. Earlier, I tried using just ‘N’ for creating a new record in a modal - it worked fine. I then added another key to display another modal. This time both modals appeared on top of one another. In fact, any keystroke triggered these two events.

4 Likes
#7

Lovely… Thank you very much. I never used them but now I will start!

1 Like
#8

Awesome feature, nice when you want to add a hidden admin area, cmd + alt + 2 to open a modal with a username and password field, once correct details entered then show all the medium editor content editable areas. So it becomes a little like the old dmx zone advanced editor which made great CMS’s

1 Like
#9

lol, only just realised this little Gem was here :slight_smile:

#10