XPages: Displaying a view inside a Dojo Dialog

This is my first SnTT post for absolutely ages, but, hopefully I’ll be able to do quite a few more over the next few months as I am just starting a brand new XPages project for a customer that runs through until August.

One of the first things I have been bashing my head against the development wall over is how to get a view to act as a picklist in a dialog. In theory, it should be pretty easy, you just add the “dijit.Dialog” to your XPage resources like so:

Don’t forget to also enable the dojoParseOnLoad and dojoTheme properties at the same time.Then inside your XPage you’ll want to actually create the dialog HTML:

At this point I had assumed that I could just add my view control inside the div and Bob, as they say, would be my mother’s brother. But I hadn’t catered for Dojo taking control of the HTML in the XPage once it was rendered. Basically what happens is that after the page loads, Dojo moves the div I created out of the Domino generated form and makes it a child of the body element. This displays fine, until you try and navigate through the view using the pager control, which no longer works as the javascipt requires the HTML to beinside the Domino form. So as far I can tell you have a couple of options, either move the div back inside the form, but I’m assuming that Dojo moved it out for a reason so I wanted to avoid that.

In the end I moved the view control itself to be in a standalone XPage and then opened that via an iFrame that is embedded inside the dialog div. It’s just a matter then of changing my javascript to refer to window.parent when I want to send values back from the dialog to the main XPage.