Alpha Software Blog



How to Make Apps That Use Keyboard Buttons to Execute Actions


Alpha Anywhere already traps certain key combinations in web components, such as ESC to cancel edits and F9 to save edits on editable components. Internally, a key watcher JavaScript method is used. While not documented, you can add your own JavaScript key watcher to web components using our built in library. There are some caveats with this method. You don't want to assign an action to a key already captured by Alpha Anywhere (such as ESC on an editable form), and once a key event is assigned to an object that is defined on a page, it fires for every component on the page. So if you assign a key watcher to a grid opened by a tabbed UI, once the grid is opened, the key watcher will fire for every component opened on the Tabbed UI. So the code run by the key needs to check for context.

Walking Through The Code

The first step is create some JavaScript in something that runs when the component or page loads. This can be in the JavaScript functions for the component, in a client side event such as 'onGridInitializeComplete' in a grid object, or directly on a page. NOTE: All of the code below is JavaScript. Next, attach a new key watcher to a JavaScript object. You can create a new object or use the component object. If this is placed directly on a page, you will need to define a new object. Code:
var KeyWatch = new Object()
KeyWatch.kw = new AUI.KeyWatcher([

// or use the component object - grid object placeholder shown
{Grid.object}.kw = new AUI.KeyWatcher([
They key actions are defined in a JavaScript array in the key watcher. Each key prototype has a 'key' parameter, and a 'handle' which is the code to run if the key is pressed. A single key code array entry is something like this:
	{key: 'F2', handle: function(){
		// JavaScript code to run
		alert('F2 pressed');
		}
	}
Pressing the F2 key with this will show an alert. Each key array entry is separated by a comma. There is no comma after the last key definition. Once the watcher is defined, it must be turned on with:
keyWatch.kw.on()

//or if  using the component object - grid object placeholder shown
{Grid.object}.kw.on();
The complete JavaScript to define multiple key watchers would look something like this:
{Grid.object}.kw = new AUI.KeyWatcher([
	{key: 'F2', handle: function(){
		// JavaScript code to run
		alert('F2 pressed');
		}
	},
	{key: 'SHIFT+F2', handle: function(){
		// JavaScript code to run
		alert('SHIFT-F2 pressed');
		}
	},
	{key: 'PAGEUP', handle: function(){
		// JavaScript code to run
		alert('PAGEUP pressed');
		}
	},
	{key: 'HOME', handle: function(){
		// JavaScript code to run
		alert('HOME pressed');
		}
	}	

]);
{Grid.object}.kw.on();
Key watchers support prefixes as shown above, so you can add CTRL, ALT, or SHIFT as prefixes (they can be added together). Here is a list of supported keys:
Key = 'ENTER'
Key = 'TAB'
Key = 'BACKSPACE'
Key = 'LEFT'
Key = 'UP'
Key = 'RIGHT'
Key = 'DOWN'
Key = 'ESCAPE'
Key = 'PAGEUP'
Key = 'PAGEDOWN'
Key = 'END'
Key = 'HOME'
Key = 'INSERT'
Key = 'DELETE'
Key = 'F1'
Key = 'F2'
Key = 'F3'
Key = 'F4'
Key = 'F5'
Key = 'F6'
Key = 'F7'
Key = 'F8'
Key = 'F9'
Key = 'F10'
Key = 'F11'
Key = 'F12'
Learn more about Alpha Anywhere
How to Develop a Messaging System for Multi-Tenant Database Apps
Alpha Anywhere Helps Build Maintenance App for Offshore Oil Platforms

About Author

Default Author Image
Chris Conroy

Chris Conroy runs digital programs for Alpha Software.

Related Posts
Build a Mobile Application Quickly - A Tutorial
Build a Mobile Application Quickly - A Tutorial
Boiler Minder - Real World Industrial Strength Example App Built Rapidly In hours with Alpha TransForm vS Weeks with Low-Code Platforms
Boiler Minder - Real World Industrial Strength Example App Built Rapidly In hours with Alpha TransForm vS Weeks with Low-Code Platforms
6 Reasons to Build industrial Strength Mobile apps for Standing Workers
6 Reasons to Build industrial Strength Mobile apps for Standing Workers

The Alpha platform is the only unified mobile and web app development and deployment environment with distinct “no-code” and “low-code” components. Using the Alpha TransForm no-code product, business users and developers can take full advantage of all the capabilities of the smartphone to turn any form into a mobile app in minutes, and power users can add advanced app functionality with Alpha TransForm's built-in programming language. IT developers can use the Alpha Anywhere low-code environment to develop complex web or mobile business apps from scratch, integrate data with existing systems of record and workflows (including data collected via Alpha TransForm), and add additional security or authentication requirements to protect corporate data.

Comment