At first glance this seems like an exercise in can it be done versus should it be done. So lets review our options for "dynamic" output of data on an XPage. There are two controls you can use
- View Control
- Data Table Control
Both of these controls use a repeat control to display the contents of a data source. Using the View control for view data is a no brainer, but what about other data? In one of my previous articles I demonstrated how to use XML as a data source and I used a Data Table control for the output. One of my issues with using the data table control is that in version 8.5.0 there is no easy way to add column headers to the Data Table so your data is just listed there without the benefit of labels and sometimes formatting the elements of the data table can be challenging, for example you can not select a table row for formatting only the columns.
So wanting to have some more control I decided to see if I could combine an HTML Table with the Repeat control so that I could have a dynamic HTML table that could be used for view content or XML content or down the road "other" data sources.
The tricky part was that I only wanted to repeat the table row and there was no way to do that in the UI. So I used the following steps to combined the two.
Create a new or modify an existing XPage.
Add a Table control to the XPage with at least two rows and however many columns you need to display your data. The first table row will be used for the column headers and the second table row will be used to hold the repeated elements.
Next Add a Repeat control that uses the included Domino View as a Data source and sets a value for the collection name that we can use with the repeat control.
Next add a computed field to the repeat control to repeat the view data for the first column. For the value of the computed field use the variable name set in the repeat control which will allow you to choose one of the columns from the view source. At this point the XPage Design mode will look like the following.
Now we need to combine the two elements so that the table row is repeated for every row in the view.
Switch from the Design mode to the Source mode. The code should look like the following.
Here is the tricky part. You need to edit the source code to surround the table row element with the repeat control and pace the computed field inside of the table data element.
The second table row is what we want to repeat so I manually edit the source code so it looks like the following.
The repeat control now surrounds the table row element to be repeated and the computed field resides in the table data element.
This is what it will look like in Design mode.
Now you can add the table header values and the additional computed fields to finish out the design so it looks like the following.
When it's rendered in the browser it will look like the following
A pager control can be added to page through multiple records.
The Pros of this technique are
You now have more control over the formatting and layout of the table
Works with view data or XML data
The only con is that once you modify the source code then the Repeat Control no longer is editable in the Properties tab of the designer UI and changes will need to be made via the source view.
I'm going to be using this technique as the basis of my next two articles so I wanted to lay it all out here for you.
As always the complete source code and example application can be downloaded from my website http://www.nnsu.com
Just click on the downloads link and download the XPages Playground applications