Tech Tip: Add Keyboard Shortcuts through CUI

We've previously covered how you can utilize CUI to add custom buttons to toolbars. However, you can also take advantage of CUI to add keyboard shortcuts for more advanced users. In this blog post, we will cover how to add a shortcut to select all of the items in a grid when a user presses "Ctrl+A".

Getting Started

You can find all of the code in this blog post in the cui-shortcut project on the Aras Labs GitHub.

ArasLabs/cui-shortcut

Note: This project will should only be used with Aras 11 SP7 and later. The necessary CUI capabilities were not yet implemented in versions earlier than 11.0 SP7.

Create the Shortcut Handler

We will begin with writing the Method that will select all of the items in the grid.

1. Create a new JavaScript method called my_mws_ctrl_a
   1. This follows the naming conventions of the other shortcuts which will make it easier to find in the future
   2. MWS stands for "Main Window Shortcut"
2. Copy and paste the code from the editor below into this new method
3. Save, unlock, and close the my_mws_ctrl_a method

Adding the Shortcut

1. In the TOC, navigate to Administration > Configuration > Client Presentation and click the hyperlink highlighted below
2. In the Command Bar Section relationship tab, search for the item below 
   • Classification: Data Model
   • Name: com.aras.innovator.cui_default.main_window_main_menu
   • Location: Main Window Main Menu
3. Open and lock this item
4. In the Command bar Item relationship tab, create a new item with the information below
   • ItemType: Shortcut
   • Name: my.cui.mws_ctrl_a
   • Action: Add
   • For Identity […]: World
     • This is the group of users that will be able to use this shortcut
5. Right-click > View "Command Bar Item" to view this shortcut in a new window
6. Fill in the following information
   • Handler: my_mws_ctrl_a
   • Shortcut: ctrl+a
7. Save, unlock, and close this Shortcut
8. Save, unlock, and close the Command Bar Section

You can now try out this new shortcut by selecting any ItemType in the TOC and clicking ctrl+a. You should see that all of the items in the grid are selected.

LOOKING FOR MORE ARAS INSPIRATION?

Subscribe to our blog and follow @ArasLabs on Twitter for more helpful content! You can also find our latest open-source projects and sample code on the Aras Labs GitHub page.