{"id":1013,"date":"2012-10-19T10:52:13","date_gmt":"2012-10-19T08:52:13","guid":{"rendered":"http:\/\/hasselba.ch\/blog\/?p=1013"},"modified":"2012-10-19T10:54:18","modified_gmt":"2012-10-19T08:54:18","slug":"quick-n-dirty-non-closable-dialog-for-extlib","status":"publish","type":"post","link":"https:\/\/hasselba.ch\/blog\/?p=1013","title":{"rendered":"Quick-n-Dirty: Non Closable Dialog for ExtLib"},"content":{"rendered":"

I have created a dirty hack for dialogs which prevents users to close the dialog by pressing the escape key or the close button. In my first approach\u00a0 (StackOverflow.com<\/a>)the hack has overwritten all dialogs for the whole XPage. This version allows to enable \/ disable it per dialog.<\/p>\n

To use this hack you have to add the CSJS library to your XPage and call the dialog with an additional parameter ‚nonclosable<\/em>‚:<\/p>\n

XSP.openDialog(\"#{id:dialogNonClosable}\", {'nonClosable': true } );<\/pre>\n
The hack was tested with IE 9 and FF 16, ExtLib 8.5.3.20120605-0921. Here is the CSJS library you have to attach to your XPage:<\/p>\n
\/**\r\n\u00a0* ExtLib Dialog Hack to enable NonClosable Dialogs\r\n\u00a0* \r\n\u00a0* This function overrides the exsiting openDialog method of the XSP object. It\r\n\u00a0* adds a new option named 'nonclosable'\r\n\u00a0* \r\n\u00a0* To open a non closable dialog, you have to use it like this\r\n\u00a0* \r\n\u00a0* XSP.dialog('#{id:dialog}', {'nonclosable': true } );\r\n\u00a0* \r\n\u00a0* @category CSJS\r\n\u00a0* @category ExtLib\r\n\u00a0* @author Sven Hasselbach\r\n\u00a0*\/\r\n\r\nfunction injectExtLibHack() {\r\n\u00a0\u00a0 \u00a0XSP.openDialog = function xe_od(dialogId, options, params) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0dojo.addOnLoad( function() {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var created = false;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var dlg = dijit.byId(dialogId);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (!dlg) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var type = XSP._dialog_type;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0try {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (options['nonClosable'])\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0type = XSP._dialog_type_nonClosable;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0} catch (e) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0options = dojo.mixin( {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0dojoType : type || \"extlib.dijit.Dialog\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}, options);\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0dojo.parser.instantiate( [ dojo.byId(dialogId) ], options);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0dlg = dijit.byId(dialogId);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0created = true;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0} else {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (dlg.keepComponents) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0dlg.show();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var onComplete = function() {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0dlg.show();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0};\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var axOptions = {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0params : dojo.mixin( {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$$showdialog : true,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$$created : created\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}, params),\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0onComplete : onComplete,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0formId : dialogId\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0};\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0dlg.attr(\"content\", \"<div id='\" + dialogId + \":_content'><\/div>\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0XSP.partialRefreshGet(dialogId + \":_content\", axOptions);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (dojo.isIE < 8) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0dojo.query(\".lotusDialogBorder\").style(\"width\", \"500px\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0});\r\n\u00a0\u00a0 \u00a0}\r\n\r\n\u00a0\u00a0 \u00a0dojo.provide(\"extlib.dijit.OneUIDialogNonCloseableDialog\");\r\n\u00a0\u00a0 \u00a0dojo.require(\"extlib.dijit.Dialog\");\r\n\u00a0\u00a0 \u00a0dojo.declare(\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \"extlib.dijit.OneUIDialogNonCloseableDialog\",\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 extlib.dijit.Dialog,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 baseClass: \"\",\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 templateString: dojo.cache(\"extlib.dijit\", \"templates\/OneUIDialog.html\"),\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 disableCloseButton: true,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 _onKey: function(evt){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if(this.disableCloseButton &&\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 evt.charOrCode == dojo.keys.ESCAPE) return;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 this.inherited(arguments);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 _updateCloseButtonState: function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 dojo.style(this.closeButtonNode,\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \"display\",this.disableCloseButton ? \"none\" : \"block\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 postCreate: function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 this.inherited(arguments);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 this._updateCloseButtonState();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 dojo.query('form', dojo.body())[0].appendChild(this.domNode);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 },\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 _setup: function() {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 this.inherited(arguments);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (this.domNode.parentNode.nodeName.toLowerCase() == 'body')\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 dojo.query('form', dojo.body())[0].appendChild(this.domNode);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0 \u00a0);\r\n\r\n\u00a0\u00a0 \u00a0\/\/ This is used by the picker dialog to grab the correct UI\r\n\u00a0\u00a0 \u00a0XSP._dialog_type_nonClosable=\"extlib.dijit.OneUIDialogNonCloseableDialog\";\r\n\r\n}\r\n\r\nXSP.addOnLoad( injectExtLibHack );<\/pre>\n
And here is an example XPage which demonstrates how to use the hack:<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<xp:view xmlns:xp=\"http:\/\/www.ibm.com\/xsp\/core\"\r\n\u00a0\u00a0 \u00a0xmlns:xe=\"http:\/\/www.ibm.com\/xsp\/coreex\">\r\n\u00a0\u00a0 \u00a0<xp:this.resources>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:script src=\"\/dialogHack.js\" clientSide=\"true\"><\/xp:script>\r\n\u00a0\u00a0 \u00a0<\/xp:this.resources>\r\n\r\n\u00a0\u00a0 \u00a0<xp:button value=\"Show Dialog Closable\" id=\"button1\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:eventHandler event=\"onclick\" submit=\"false\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:this.script><![CDATA[\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0XSP.openDialog(\"#{id:dialogClosable}\");]]><\/xp:this.script>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:eventHandler>\r\n\u00a0\u00a0 \u00a0<\/xp:button>\r\n\u00a0\u00a0 \u00a0<xp:button value=\"Show Dialog Non Closable\" id=\"button2\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:eventHandler event=\"onclick\" submit=\"false\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:this.script>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<![CDATA[\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0XSP.openDialog(\"#{id:dialogNonClosable}\", {'nonClosable': true } );\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0]]>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:this.script>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:eventHandler>\r\n\u00a0\u00a0 \u00a0<\/xp:button>\r\n\r\n\u00a0\u00a0 \u00a0<xe:dialog id=\"dialogClosable\" title=\"This is a closable dialog\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xe:dialogContent>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0You can close me via Escape or the close button.\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xe:dialogContent>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xe:dialogButtonBar>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:button value=\"Ok\" id=\"button3\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0styleClass=\"lotusFormButton\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:eventHandler event=\"onclick\" submit=\"false\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:this.script><![CDATA[XSP.closeDialog('#{id:dialogClosable}')]]><\/xp:this.script>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:eventHandler>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:button>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xe:dialogButtonBar>\r\n\u00a0\u00a0 \u00a0<\/xe:dialog>\r\n\r\n\u00a0\u00a0 \u00a0<xe:dialog id=\"dialogNonClosable\" title=\"This is a non-closable dialog\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xe:dialogContent>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0Try to close me via Escape or the close button ;-)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xe:dialogContent>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xe:dialogButtonBar>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:button value=\"Ok\" id=\"button4\"\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0styleClass=\"lotusFormButton\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:eventHandler event=\"onclick\" submit=\"false\">\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<xp:this.script><![CDATA[XSP.closeDialog('#{id:dialogNonClosable}')]]><\/xp:this.script>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:eventHandler>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xp:button>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0<\/xe:dialogButtonBar>\r\n\u00a0\u00a0 \u00a0<\/xe:dialog>\r\n\r\n<\/xp:view><\/pre>\n
This is the „standard“ ExtLib dialog:<\/p>\n
\"\"<\/p>\n
And this is the „non-closable“ version:<\/p>\n
\"\"<\/p>\n
P.S.\u00a0Keep in mind that this article has been posted in the \u201cQuick-n-Dirty<\/strong>\u201d category.<\/p>\n","protected":false},"excerpt":{"rendered":"
I have created a dirty hack for dialogs which prevents users to close the dialog by pressing the escape key or the close button. In my first approach\u00a0 (StackOverflow.com)the hack has overwritten all dialogs for the whole XPage. This version … Weiterlesen →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[75,36,9,24],"tags":[33,8,7,37,91,4,32,3,85],"class_list":["post-1013","post","type-post","status-publish","format-standard","hentry","category-dojo","category-extlib","category-javascript","category-xsp","tag-8-5-3","tag-dojo","tag-domino","tag-extension-library","tag-extlib","tag-js","tag-tipp","tag-xpages","tag-xsp"],"_links":{"self":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1013"}],"version-history":[{"count":5,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1013\/revisions"}],"predecessor-version":[{"id":1018,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=\/wp\/v2\/posts\/1013\/revisions\/1018"}],"wp:attachment":[{"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1013"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1013"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hasselba.ch\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}