Usability - Productivity - Business - The web - Singapore & Twins

Building a fieldset custom control

HTML has widely used and more exotic tags. Fieldset and Legend being of the later type. Theo reminded me, that they can be useful and asked how to incorporate them into a XPage. The best approach is to create a custom control with custom parameters and an editable area inside and simply type the html controls into the source code. The legend is rendered by a computed field, so translation will be able to pick it up.
Custom Control containing a FieldSet
The source code of the XPage looks like this (note: the custom property doesn't show up here since it is stored in a file hidden from the Domino Designer perspective):
< xp: view xmlns:xp=" http://www.ibm.com/xsp/core">
< fieldset>
< legend>
< xp: text escape=" false" id=" legendText" value=" #{javascript:compositeData.legendText}">
</ xp: text>
</ legend>
< xp: callback facetName=" facetFieldSetContent" id=" callbackFieldControlSet" />
</ fieldset>
</ xp: view>

When using the custom control in a XPage or another control it looks like this (note the content inside the "this.facets") is what you put in there. can be a panel or table with fields in it or another control.
< xp: view xmlns:xp=" http://www.ibm.com/xsp/core" xmlns:xc=" http://www.ibm.com/xsp/custom">
< xc: FieldSetControl id=" MyFieldSet">
< xc: this.legendText> This is the &lt;b&gt;legend&lt;/b&gt; text</ xc: this.legendText>
< xp: this.facets>
< xp: panel xp:key=" facetFieldSetContent" id=" stuffInsideTheFieldSet">
< xp: label id=" label1" for=" inputText1" value=" Test Field">
</ xp: label>
< xp: inputText id=" inputText1" />
</ xp: panel>
</ xp: this.facets>
</ xc: FieldSetControl>
</ xp: view>

As usual: YMMV

Posted by on 09 July 2009 | Comments (5) | categories: XPages


  1. posted by Theo Heselmans on Friday 10 July 2009 AD:
    Stephan, Thanks a lot.
    It just works !
  2. posted by Karsten Lehmann on Friday 10 July 2009 AD:
    It would be good to have the custom control property names and types also in the XPage code. Would make copy and paste of code snippets easier.
  3. posted by Benoit Dubuc on Wednesday 15 July 2009 AD:
    Be careful with fieldsets in IE: they can take forever to print. We had issues with printing forms in one application and I stumbled across an article saying that IE uses large images to make its nice rounded corners. Therefore, if you had a lot of fieldsets on a form, it would print these humongous images many times, taking forever. We ended up modifying the CSS to have all fieldsets show a 1px border.
  4. posted by Mikael Grevsten on Tuesday 15 November 2011 AD:
    Thanks for this. I just tried it out but the oneUI interface seems to block the layout of this fieldset/legend.
    Neither is rendered as expected.

    Please advice

  5. posted by Stephan H. Wissel on Wednesday 16 November 2011 AD:
    @Mikael I never tried fieldset with OneUI. Check the documentation, if it is not there, you either need to drop them or create your own CSS in the spirit of OneUI