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.

5 thoughts on “Tech Tip: Add Keyboard Shortcuts through CUI

  1. Joe

    hi,thanks for you share,could you tell me how to set cui button click show custom frame?now i know set cui button,but idon’t how to created frame and show it.

  2. Christopher Gillis Post author

    Hi Joe,

    It sounds like you’re trying to open some kind of dialog when a user clicks a button in CUI. We have another blog post that covers how to open a dialog from within a client-side method which you can find at the link below.
    http://community.aras.com/en/opening-custom-dialog/

    You can then set the Click Method property of your CUI button to this new method, so that your dialog is displayed when a user clicks this button.

    I hope that helps!

    Chris

  3. Joe

    Hi Chris,
    Thank you for your reply,like ArasPDFViewer function,I want to click CUI button show page in current window,cui button can switch tab,Now, I don’t know how to create tab page and switch it.If you know, please guide me,thank you very, very much.

  4. Christopher Gillis Post author

    Hi Joe,
    I believe what you’re looking for is referred to as a Sidebar button. While it is possible to create your own custom sidebar through CUI, we don’t currently have any guides to show off how to do this. I am planning on continuing this series of blogs that demonstrate CUI, and creating a custom sidebar was going to be my next topic anyway. You can follow the Aras Labs Twitter account for notifications of when new blogs are posted.

    https://twitter.com/araslabs

    -Chris

Leave a Reply