Non closable dialogbox from Extension Library

Question

I'm creating a dialogbox from ExtLib and I want to prevent users to press Escape or click on X icon.

I've checked several posts about same implementation but none of them using a Dialogbox from ExtLib.

I was able to hide icon with CSS and I'm trying with dojo.connect to prevent the use of Escape key:

    XSP.addOnLoad(function(){
    dojo.connect(dojo.byId("#{id:dlgMsg}"), "onkeypress", function (evt) {  
        if(evt.keyCode == dojo.keys.ESCAPE) {           
            dojo.stopEvent(evt);
        }
    });
});

Note I'm able to get it working only if I create my dialogbox manually and not from ExtLib; then I can use for example:

dojo.connect(dojo.byId("divDlgLock"), "onkeypress", function (evt) {
        if(evt.keyCode == dojo.keys.ESCAPE) {           
            dojo.stopEvent(evt);
        }
});

Any ideas?

Stick to the manual approach. Or rethink your logic flow: a dialog box by nature has 2 outcomes: a button clicked (it would contain one or more) or being closed. So if a requirement says: User must click confirm, then you check for the result and prompt them again — stwissel, Oct 17 '12 at 00:59
I agree with stwissel, your requirement is against UX, I think — Frantisek Kossuth, Oct 17 '12 at 10:13
Not totally agree with you guys; sometimes we need a response from user; lets say something simple; a DialogBox with a comments box and and an Approve and Reject buttons (both with SSJS code and maybe a redirect). You may want your users to click on any of them before they can continue. Also question here goes beyond of that in regards of why dojo.connect won't work with ExtLib dialogbox. — PSolano, Oct 17 '12 at 13:44

Sven Hasselbach · Accepted Answer · 2012-10-17T13:20:28.747

4

By adding an output script block you can extend the existing declaration:

<xp:scriptBlock id="scriptBlockNonCloseableDialog">
   <xp:this.value>
      <![CDATA[
         dojo.provide("extlib.dijit.OneUIDialogNonCloseableDialog");
         dojo.require("extlib.dijit.Dialog");
         dojo.declare(
            "extlib.dijit.OneUIDialogNonCloseableDialog",
            extlib.dijit.Dialog,
            {
               baseClass: "",
               templateString: dojo.cache("extlib.dijit", "templates/OneUIDialog.html"),
               disableCloseButton: true,
               _onKey: function(evt){
               if(this.disableCloseButton &&
                  evt.charOrCode == dojo.keys.ESCAPE) return;
                  this.inherited(arguments);
               },
               _updateCloseButtonState: function(){
                  dojo.style(this.closeButtonNode,
                  "display",this.disableCloseButton ? "none" : "block");
               },
               postCreate: function(){
                  this.inherited(arguments);
                  this._updateCloseButtonState();
                  dojo.query('form', dojo.body())[0].appendChild(this.domNode);
               },
               _setup: function() {
                  this.inherited(arguments);
                  if (this.domNode.parentNode.nodeName.toLowerCase() == 'body')
                     dojo.query('form', dojo.body())[0].appendChild(this.domNode);               
               }        
            }
         );

         // This is used by the picker dialog to grab the correct UI
         XSP._dialog_type="extlib.dijit.OneUIDialogNonCloseableDialog";
      ]]>
   </xp:this.value>
</xp:scriptBlock>

edited Oct 17 '12 at 13:20

answered Oct 17 '12 at 10:15

Sven Hasselbach

10,455
1
18
26

1

This is great @Sven. I'll give a try now. I imagine this ovewrites all DialogBoxes on XPage where the output script block is and not only for an specific dialog id. Is that correct? Just for curiosity, why the dojo.connect doesn't work with ExtLib? it may be some scenarios where we will need to attach an event to ExtLib control. – PSolano Oct 17 '12 at 10:54
I just build an XPage with a button calling XSP.openDialog("#{id:dlgMsg}"), the output script block you added above. It works fine on Firefox but I'm getting a partial refresh error on IE8: Problem submitting an area of the page. Unknown runtime error, Submit the entire page? – PSolano Oct 17 '12 at 11:47
I have no IE8 here, cannot test this (works in all modes in IE9). But what if you add the code to a client script library instead of a script block? – Sven Hasselbach Oct 17 '12 at 12:12
2

You cannot attach your dojo event because the DOM element is not there. the XSP.openDialog method creates the element if called for the first time. After first time opening the dialog, *dojo.connect* should work – Sven Hasselbach Oct 17 '12 at 12:25
Definetly an excellent snippet for XSnippets. BTW, I tried using a client Script Library and I got Message: Could not load 'extlib.dijit.Dialog'; last tried '../extlib/dijit/Dialog.js' – PSolano Oct 17 '12 at 13:25
I get some unwanted behaviour: the dialog is placed in the background, so the overlay is covering it. can this be resolved? – Patrick Kwinten Mar 08 '19 at 11:11

Non closable dialogbox from Extension Library

1 Answers1

Linked