Subscribe via Feed

XPages - Example on how to generate dynamic controls for your fields at runtime

John Mackey, Jul 20, 2009 12:47:34 PM

In my XPages Survey tool example that I demoed at Lotusphere, I showed how to dynamically generate fields at runtime for a document collection. The tool allows an administrator to create survey questions and select the control type and selection values. Then the tool generates the fields for the questions when the user opens a survey. The XPage utilizes a repeat control and panel control to accomplish this.

For today's example I pulled out the specific code that generates the fields, i.e. checkbox, list, radio button, edit box, etc., and simplified it so that it is clearer how this technique works....and just how easy it is to implement. In the full survey tool example, this feature and technique easily gets lost.

You can download the sample database here.

The real key to this technique is the separation between presentation and data in XPages as compared with traditional Domino development. With XPages, you can have multiple controls bound to the same Lotus Notes fields. As long as only one of these controls is rendered at runtime, there is no issue with data integrity.

Below is a screen shot of the example generating a radio button group control :

Image:John's Blog - XPages - Example on how to generate dynamic controls for your fields at runtime

Here's how it is built:

On the DynamicFieldDemo XPage, the fields in the Field Attributes section control how the control is generated. There is one control in the Field Preview section for each possible control type. The Required field sets the validation required property on each control to true or false. The Generate Field button reloads the page. This is only required for this example because we need to regenerate the controls, which is not something that would be changing for your users.

The XPage layout looks like this:

Image:John's Blog - XPages - Example on how to generate dynamic controls for your fields at runtime
The visibility formula for the "Combo Box" control returns true if the user selected "DropDown" for the Control Type. In this example I pick the value up from a session variable:

Image:John's Blog - XPages - Example on how to generate dynamic controls for your fields at runtime

The data Binding is set the same for all the controls. In this example I am not using a Notes form as a datasource in order to keep it simple and instead just using session variables:

Image:John's Blog - XPages - Example on how to generate dynamic controls for your fields at runtime

The Validation is set, in this case for the combo box, from the All Properties->basics->required property:

Image:John's Blog - XPages - Example on how to generate dynamic controls for your fields at runtime

The possible selection values are set by exploding out the choices using a "," as the delimiter:

Image:John's Blog - XPages - Example on how to generate dynamic controls for your fields at runtime

Lastly, the Display Error control will display an error if the field is required and you pushed the Test Validation button. The really cool thing here is that I have only one Display Error control which I compute what control it should report errors for. This is accomplished by computing the "Show error messages for" property. Since the control names I used match the selection names it is easy to compute which control is being displayed:

Image:John's Blog - XPages - Example on how to generate dynamic controls for your fields at runtime

As you can see, this opens up many possibilities. I'm sure it won't be long before you discover other uses for this technique.

-John



4 responses to XPages - Example on how to generate dynamic controls for your fields at runtime

Daniele Grillo, October 7, 2010 1:05 PM

Question: If I need to bind dynamically the Form named fields, have you any suggest?
I would dynamically bind (for example ina repeat control) to the field "AAA"+VARIABLE (ex 01, 02)


Debt Settlement, September 3, 2009 1:55 AM

Sorry for my bad english. Intresting title. It attracted me to read the complete post. Thanks


Andreas Olesch, August 30, 2009 9:18 AM

wrong entry. sry. :(


Andreas Olesch, August 30, 2009 9:18 AM

Hi!

Which Notes Designer version are you using?

I am using 8.5 FP1 and i cannot pass the NotesDocument to my control. The designer does not show the possibility to enter the code (doc.getDocument();) you show in your screenshot. I see a '+' there and different attributes to enter instead.

Where is the difference to your example?

Regards
Andreas