PDA

View Full Version : How to implement Shortcut keys on web forms?


ABC123

doorscomputers
07-06-2013, 01:25 PM
Is it possible when I am on the web component to enable shortcut keys for buttons and on the web form? On the desktop it is possible to put shortcut keys on buttons and on the form, I want to press the function keys to execute buttons or press Alt+key to execute something but could not find a way to do it. Thanks very much!

Davidk
07-06-2013, 10:05 PM
Have a look here... excellent site for this. http://www.scottklarr.com/topic/126/how-to-create-ctrl-key-shortcuts-in-javascript/

I've tried the code in an A5W page between <script> tags and in the onRenderComplete event of a UX component... works great.

doorscomputers
07-07-2013, 01:59 AM
Have a look here... excellent site for this. http://www.scottklarr.com/topic/126/how-to-create-ctrl-key-shortcuts-in-javascript/

I've tried the code in an A5W page between <script> tags and in the onRenderComplete event of a UX component... works great.

Hi David, The link that you gave is helpful, I was able to press some key combinations and it displays an alert message. How do I execute the code behind a button in a grid or dialog component?

Davidk
07-07-2013, 12:17 PM
For UX components you can use {dialog.object}.buttonClick('BUTTON_1');

For Grid components I think you'd need to get the ID of the button, using Firefox, Firebug. E.g. I put an Action Button in the Freeform area below a grid. The button Id turned out to be


GRID1.ACTIONBUTTON.BUTTON_1.G0

Then I replaced GRID1 with the placeholder and used the Javascript .click() event.


$('{Grid.ComponentName}.ACTIONBUTTON.BUTTON_1.G0').click();

doorscomputers
07-07-2013, 01:09 PM
I dont know why it is not working on me, it says object doesn't support property or method click. Is this $('{Grid.ComponentName}.ACTIONBUTTON.BUTTON_1.G0').click(); what you placed on the javascript function declarations? where did you put this code David? Thanks!

Davidk
07-07-2013, 01:34 PM
You added a button to your Grid, Freeform Bottom area (for example). The button is named "BUTTON_1".

When you run your Grid and Inspect that button under Firebug you see that it's GRID1.ACTIONBUTTON.BUTTON_1.G0.

Now, in the hotkey code:


var isCtrl = false;
document.onkeyup=function(e){
if(e.which == 17) isCtrl=false;
}
document.onkeydown=function(e){
if(e.which == 17) isCtrl=true;
if(e.which == 83 && isCtrl == true) {
$('{Grid.ComponentName}.ACTIONBUTTON.BUTTON_1.G0').click();
return false;
}
}

It's in the Hotkey code that you must put anything you want to happen... run. You have a button defined... and now Javascript can click it for you when Ctrl-S is pressing (in this case).

doorscomputers
07-07-2013, 09:04 PM
Thank you David for the help. This will be my last question on you so please bear with it. can you please identify where to put your code?


I have this code on Javascript functions declarations
shortcut.add("Ctrl+F3",function() {
alert("Hi there!");
Anytime I can change the Ctrl+F3 with other keys and it works well. meaning the shortcut keys are properly handled, but when I change the code to be executed by shortcut keys in that case alert("Hi there!"); it works fine but when I change it with your code, $('{Grid.ComponentName}.ACTIONBUTTON.BUTTON_1.G0').click(); same error with my previous post.Maybe there must be a proper event handler on where to put your code.

doorscomputers
07-07-2013, 10:53 PM
Gotcha. Thank you David for your help , I appreciate it very much. for newbies here is the modification of the action to replace the cod of Davids suggestion

instead of $('{Grid.ComponentName}.ACTIONBUTTON.BUTTON_1.G0').click(); , change it to {grid.componentName}_X_ACTIONBUTTON_1(this);The one that David suggested is applicable on his first reply.

doorscomputers
07-07-2013, 10:54 PM
Gotcha. Thank you David for your help , I appreciate it very much. for newbies here is the modification of the action to replace the cod of Davids suggestion

instead of $('{Grid.ComponentName}.ACTIONBUTTON.BUTTON_1.G0').click(); , change it to {grid.componentName}_X_ACTIONBUTTON_1(this);The one that David suggested is applicable on his first reply.

Davidk
07-07-2013, 10:55 PM
Hey Roman,

Are you using a library to get this done?

I'm not sure what you're doing. The code I posted, taken from that site, I have in the Client-side onRenderComplete event of a component.

In the same component I added a button, named BUTTON_1. I then went and found the full ID of the button through Firefox, Firebug.

This code, sits, waiting for the appropriate keystrokes. When, in this case, it gets Ctrl-S it fires the click() event of my button.

Try just duplicating this process and comment out your Javascript functions declarations code.

doorscomputers
07-09-2013, 02:24 PM
Yes David Thank you very much for your help.