Article
3 comments

Close SharePoint Modal Dialogs with “Esc”-Key press

Whenever a list items will be checked or reviewed in SharePoint a modal dialog come up. This feature of SharePoint 2010 is really helpful from a usability point of view, because the user is able to return to the list where the interaction with the list item has been started by closing the modal dialog. When this will be done a couple of times a day, the user will always have to move the mouse pointer to the close button to close the dialog.

As user learned over the last couple of year, when the user want something to go away that pops out of the current browser window, no matter if it is a modal dialog, image or full screen video the use only have to press the “Esc”-Key to make it go away.

As I mentioned before this is not implemented in SharePoint now, but could be changed with a simple JavaScript and the usage of the Modal Dialog Framework implemented in SharePoint. To add this functionality I created a simple sandbox solution, which has a module and a JavaScript.

First of all the elements.xml contains the following definition:

<?xml version="1.0" encoding="utf-8"?>
xmlns="http://schemas.microsoft.com/sharepoint/">
  <CustomAction
      ScriptSrc="~sitecollection/Style Library/FetchKeyStroke/CloseDialogOnEsc.js"
      Location="ScriptLink"
      Sequence="102"
      ></CustomAction>
  <Module Name="FetchKeyStroke" Url="Style Library">
    <File Path="FetchKeyStroke\CloseDialogOnEsc.js" 
          Url="FetchKeyStroke/CloseDialogOnEsc.js" />
  </Module>
</Elements>

The custom action register a JavaScript on the Master Page. The module definition deploy the JavaScript file the style library, the location for the deployment is URL parameter on the module. The JavaScript file only has few lines of code that capture the ESC-Key press  and close the mos recent dialog. The rest could be found in the following script.

document.onkeypress = function(e) {
    e = window.event || e;

    // Check if ESC-Key is pressed
    if (e.keyCode == 27) {

        // Check if a dialog was recently opened
        var dialog = SP.UI.ModalDialog.get_childDialog();
        if (dialog != null) {
            // Try to close the dialog
            SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel,
                "Closed by ESC");
        }
    }
}

Conclusion

With this simple solution I think the usability in SharePoint could be improved a bit and based on SharePoint components like the modal dialog framework. jQuery would be to overweight for this task.

You can download the visual studio solution as well as the sandbox solution.

After the solution deployment a the site collection feature “Close Dialog on Esc-Key press” needs to be activated. In the Style Library the new added JavaScript file needs to be checked in.

3 Comments

  1. This post is a few years old now, and I know SharePoint has changed a lot since then, but I’m not able to get this working in SharePoint running under Office 365. I downloaded the sandbox solution, added it to the “Solutions” page, and made sure everything was active, but my escape key still doesn’t do anything. I can see the JS file being referenced in the source code just fine. Any ideas?

    Reply

    • Sorry I haven’t checked that script for a long time. The problem might is that some of the api things have changed. I will check this up in the next couple of days and get back to you.
      /Stefan

      Reply

      • I just did some more testing, and the escape key works in IE 11 and Firefox, but not Chrome (main browser) or Microsoft Edge. I don’t have Safari installed on this computer, so I can’t test it.

        I’m not able to get anything to show up in any of those browsers’ consoles that might indicate where the error is. I do have AdBlock installed in Chrome.

        Reply

Leave a Reply

Required fields are marked *.


This site uses Akismet to reduce spam. Learn how your comment data is processed.