Popup Dialog Forms from Views in XPages

10/18/2011 11:20:00 AM by Chris Toohey

I have used parent/child (document/response) relationships for NotesData in my applications when I have a otherwise simple form that needs to store an unknown number of values. In other words, you won't see a NotesDatabase from me with fields like "field_1", "field_2". "field_1_1", and so on...

For example, Junction Lite (my $5 Microsoft Excel Import Utility App for the IBM Lotus Notes Client </shamelessplug>) uses this very technique to allow you to configure an unlimited number of @Formula-driven "NotesItems" to be set per each imported row/NotesDocument. To show this in the user interface, I use a simple embedded view (single category set to the current document UniversalID) which contains all of the "NotesItems" created.

Junction Lite v1.1 'document' with the 'NotesItems' embedded view (Click to zoom)

Now, ideally I would double-click on a NotesItem and launch it in a pop-up dialog for editing... and while this is certainly possible with some rather elaborate (and well beyond the typical RAD techniques for a Lotus Notes Client application) combination of form formulas pointing to a "launcher" Form whose PostOpen event triggers a dialogbox or some... y'know, I'm bored at this point -- you get the idea.

With XPages and the OpenNTF XPages Extension Library, a simple dialog-based form for contents from a viewPanel is easy.

To start, let's get an overall idea for the architecture that we're doing about here. Specifically, here's a quick overview of the dialog and viewPanel control relationship in the XPage:

XPage Extension Library Dialog + viewPanel Controls architecture

The dialog and the viewPanel controls will coexist on the same XPage (Home.xsp in the demo). The dialog control ("dialog_document"), will contain a panel control with a data source bound to a view scoped variable (viewScope.UNID).

By default, the UNID will be blank, and thus a new document can be created from the "dialog_document" panel data source.

The viewPanel ("viewPanel1") does two things worth noting.

1. The viewTitle (which is set to "") contains the "New Entry" button. This simple SSJS-based button sets the viewScope.UNID to "" (ensuring the "dialog_document" will create a new NotesDocument), and the tells the "dialog_document" to .show()

2. The first viewColumn is set to display contents as a link to open the document, but uses the SSJS onclick event to set the viewScope.UNID to the UniversalID of the given viewPanel entry, then tells the "dialog_document" to .show().

Yep -- pretty much identical save for the viewScope.UNID value.

<img data-cke-saved-src="getFile.xsp?id=xpages_popupdialogforms_from_views.html&filename=xpage_dialog_viewpanel_demo_screencap.jpg" src="getFile.xsp?id=xpages_popupdialogforms_from_views.html&filename=xpage_dialog_viewpanel_demo_screencap.jpg" title="XPage Extension Library Dialog + viewPanel Controls Demo Screencap" alt="XPage" extension="" library="" dialog="" +="" viewpanel="" controls="" demo="" screencap"=""> XPage Extension Library Dialog + viewPanel Controls Demo Screencap

Let's take a look at the "dialog_document" dialog Control:

As for the "viewPanel1" viewPanel Control:

And that's it really - the rest of the XPage markup and resources are used for the visual presentation -- the functionality is dead simple and this architecture can easily be extended to create those parent/child (document/response) NotesData relationships without the need to even create Forms or XPages for the individual NotesDocuments. Yep, despite the data sources pointing to a "document" Form, no such Design Element exists.

Online Demo

Check out Dialog Forms for an interactive online demo and take this technique for a spin.

Conclusion

This is a simple demo... but it should give you ideas. Imagine if you had a bank of actions across the top of your viewPanel that would allow you to create or add an infinite number of NotesDocuments and an infinite number of NotesItems of various types therein. Need to update a status? Comment as part of a workflow? Approve a submitted request? The groundwork for that functionality is all right here... and with nothing more than a single XPage, a View, and a single control from the OpenNTF.org Extension Library!