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.