XPages: display a panel as nice dojo/dijit dialog on page load
Julian Buss, April 26th, 2009 21:30:13
Tags:  XPages 
Dojo has a widget engine named Dijit, and dijit can display a DIV as a nice dialog. Since Domino 8.5 contains Dojo, and XPages are using Dojo extensively, the wish may come up to display a XPage panel (which is nothing else than a DIV) as dijit dialog.

Unfortunately, this is not that easy. Searching the web didn't lead me to any suitable description, and since dojo is quite new to me I had a hard time finding the following solution. Again, I'm no that expert in dojo at all yet, so please leave a comment if you have a suggestion.

1.) Create a panel on your XPage and give it a name, for example "myDialog". Place some stuff into the panel, labels and computed text are ok, fields are not.

2.) In the XPage "all properties", set "dojoParseOnLoad" and "dojoTheme" to true.

3.) In the XPage properties -> resources add a "dojo Module" resource with the name "dijit.Dialog" (mind the case!).

4.) Select your panel and go to the source tab of your XPage. Add a
tag before the and add the closing div after your panel:


<div id="myDialogWrapper" dojoType="dijit.Dialog" style="display:none">
<xp:panel>
....
</xp:panel>
</div>


You need this additional div tag since you are not allowed to add the "dojoType" attribute to the xp:panel tag

5.) In theory, you could use dijit.byId("myDialogWrapper").show() now to display the dialog. And actually if you place the .show() on a button click it works fine. But it doesn't work on loading the page... being a dojo newbie it took some time until I figured out that dojo has a "onLoad" event of it's own. It is named "dojo.addOnLoad()" and executes a script when everything is loaded and ready.

So, to show your dialog after the page is loaded, you can place the following at the bottom of the source of your XPage:


<script type="text/javascript">        
      var ynMsgShow = function(){
                      var yndialog = dijit.byId("myDialogWrapper");
                      if (yndialog != null) if (yndialog.containerNode.innerHTML != "") yndialog.show();
              }
             
              dojo.addOnLoad(ynMsgShow);
</script>


The containerNode.innerHTML condition checks if the XPage panel inside the wrapper dive actually contains anything. That means the dialog will only show if your panel is not hidden.

Closing the dialog, drawbacks and problems

To close the dialog you can place a button with "dijit.byId("myDialogWrapper").hide()" on your panel. But caution! This button can only execute client side javascript, it must not execute server side javascript, and it must not execute a full or partial refresh. If so, it won't work anymore.

That leads us to the main problem: you cannot work with fields on your dialog. You can place fields on your panel, but since you cannot use a button with server side javascript to save the content of the fields, they are useless.
The reason for that is that dijit moves the panel out of the
tag generated by Domino, for whatever reason.

But, if you want to have a dialog with fields, you can build if yourself. I just did it and it works fine, but that's another story for another time :-)
Comments (0) | Permanent Link | Search the Lotus universe at searchlotus.com!

Links: YouAtNotes Software | Worklow-Engine for Lotus Notes and Web | Complete solution for all things online support | XPages knowledge collection wiki

German links: YouAtNotes Startseite | CRM Software für Lotus Notes | Prozessmanagement / Workflow Software | Vollständige Lösung für perfekten Kundendienst im Web

Über diese Seite
Das YouAtNotes Blog ist ein Webtagebuch der Mitarbeiter von YouAtNotes. Hier möchten wir ihnen direkt aus dem Alltag eines Softwarehauses berichten.
Wir freuen uns über Ihre Kommentare und wünschen Ihnen anregende und unterhaltsame Lektüre.

Impressum

Blog of Julian Buss

Suche
RSS-Feeds
rssfeed.pngContent Feed
rssfeed.pngComment Feed
Aktuelle Einträge
Aktuelle Kommentare
Links zu YouAtNotes
Links zu YouAtNotes (in englisch)
Archiv