+1-888-365-2779
Try Now
More in this section
Categories
Bloggers
Blogs RSS feed

Keyboard Shortcuts for the Sitefinity Backend

by Slavo Ingilizov

Web development has gradually but steadily moved towards HTML5 in the recent years.  We’ve seen a lot of talk about using more client technologies and moving functionality from the server to the browser. It seems everyone is using AJAX already and Sitefinity is no exception. With these trends comes a responsibility for each developer to make his site more user-friendly and accessible.

One of the manifestations of this accessibility trend has been to enable keyboard shortcuts in web applications. Although we’ve seen those in most major desktop software packages, web apps like Gmail have introduced this concept to the web, too. Scott Hanselman published a blog post on keyboard shortcuts a while ago, which I highly recommend. In this blog post we’ll see how to enable Gmail-like keyboard shortcuts for the backend of the News module in Sitefinity. Here is a video of the result:

Binding keys to actions

In the blog post mentioned above, Scott Hanselman mentioned a jQuery plugin that can be used to easily bind a key to a specific action in your web pages. We are going to use the same library, called jQuery Hotkeys.

Once we’ve included the jQuery plugin on the page, binding a key to a custom handler is done with a single line of JavaScript. Here we’ll bind the “/” key (slash), to open the search box in the backend:

$(document).bind('keypress', "/", search);

We will see how the search method is implemented in a minute. Using the same pattern, we can also bind keys to the following actions:

Key Action
c open the “Create a News Item” screen
/ show the search box
j move to the next item
k move to the previous item
x select the currently highlighted item
d delete the currently selected item
y confirm deletion
n cancel deletion

All of these actions are performed on the master view, i.e. list of news items. We can also do the same binding in the detail view of the module (form for creating/editing items). For brevity, the only action that we will bind in the detail view is to cancel the item creation and go back:

Key Action
b Go back to the list of items

Using the Sitefinity Client API to perform the actions

Now that we have a handler for each button, we need to write the JavaScript that will perform the specific actions. Some of the actions will emulate clicking the buttons in the user interface, others will use the Sitefinity Client-side API. Here is for example, how we move to the next item in the grid:

function moveDown(evt) {
    var numberOfItems = itemsList.get_grid().get_masterTableView().get_dataItems().length;
    if (currentHighlightedItem + 1 < numberOfItems) {
        currentHighlightedItem++;
        var highlightedItem = itemsList.get_grid().get_masterTableView().get_dataItems()[currentHighlightedItem];
        $(highlightedItem.get_element()).addClass("sfhigh");
 
        var previousItem = itemsList.get_grid().get_masterTableView().get_dataItems()[currentHighlightedItem - 1];
        $(previousItem.get_element()).removeClass("sfhigh");
    }
}

The code gets an instance of the RadGrid client object and adds a specific CSS class to the current item (whose index is kept in a variable). Moving to the previous item is similar, as well as selecting an item. The more tricky part is the action bound to the “c” key. We need to open a dialog using the Sitefinity Client API. Here’s how it’s done:

function createItem(evt) {
    if (itemsList) {
        itemsList.openDialog("create", null, itemsList._getDialogParameters("create"), null, { language: itemsList._uiCulture });
    }
    return false;
}

As you can see, the ItemsList object exposes a method to open a dialog, and we just need to pass the correct parameters. The first one is the name of the command (“create”), which Sitefinity recognizes and knows that the newly open dialog will be used to insert an item. We also have to pass the parameters to our dialog and the current culture.

I will not go into details of explaining how to implement all actions mentioned above. It mostly involves using jQuery selectors and DOM manipulation. You can download the whole script here. Such scripts are especially useful for power users of the Sitefinity backend, who spend a lot of time on content creation. While the example provides only a small subset of the functionality, it gives an idea of how you can implement the rest.

Installation Instructions

  1. Download the script and styles.
  2. Include the three JavaScript files in the root folder of your project
  3. Include the CSS style from the download on the News backend page. Go to Administration –> Backend Pages, open the Sitefinity –> Content –> Types of Content –> News –> News page. Drop a CSS widget and paste the CSS from the file in the download
  4. Include the jQuery.hotkeys plugin and the master script on the News backend page. Go to Administration –> Settings –> Advanced –> News –> Controls –> NewsBackend –> Views –> NewsBackendScripts –> Scripts. Click “Create New” and enter the following info: Script Location: ~/jquery.hotkeys.js
    Name of the load method: dummyMethod
    Click on Scripts –> “Create New” again and enter the following info:
    Script Location: ~/MasterViewShortcuts.js
    Name of the load method: masterViewInit
  5. Include the jQuery.hotkeys plugin and the detail view script on the detail view. Go to Administration –> Settings –> Advanced –> News –> Controls –> NewsBackend –> Views –> NewsBackendInsert –> Scripts. Click “Create New” and enter the following info:
    Script Location: ~/jquery.hotkeys.js
    Name of the load method: dummyMethod
    Click Scripts –> “Create New” again and enter the following info:
    Script Location: ~/DetailViewShortcuts.js
    Name of the load method: detailViewInit
  6. Done. Go to the backend of the News module to use the shortcuts.

1 comment

Leave a comment
  1. Jens Lewald May 16, 2012
    And, in which browsers it will work?

    Leave a comment