Domino Upgrade

Search

About Me

I am the "Lotus Technology & Productivity Advisor" for IBM Asia Pacific. I'm based in Singapore.
Reach out to me via:
Follow notessensei on Twitter
Yahoo IM
Skype
Sametime
IBM

Ads by Google

Twitter

Languages

Other languages on request.

Visitors

« No more DIV tag hacks in XPages to get your favorite Dojo Widget | Main| XPages Custom Controls, what will you use? »

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

Comments

Gravatar Image1 - Stephan, Thanks a lot.
It just works !

Gravatar Image2 - 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.

Gravatar Image3 - 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.

Post A Comment

Please note: Comments without a valid and working eMail address will be removed. This is my site, so I decide what stays here and what goes.

:-D:-o:-p:-x:-(:-):-\:angry::cool::cry::emb::grin::huh::laugh::rolleyes:;-)

Disclaimer

This site is in no way affiliated, endorsed, sanctioned, supported, nor enlightened by Lotus Software nor IBM Corporation. I may be an employee, but the opinions, theories, facts, etc. presented here are my own and are in now way given in any official capacity. In short, these are my words and this is my site, not IBM's - and don't even begin to think otherwise. (Disclaimer shamelessly plugged from Rocky Oliver)

© 2003 - 2010 Stephan H. Wissel - all rights reserved as listed here: Creative Commons License
Unless otherwise labeled by its originating author, the content found on this site is made available under the terms of an Attribution/NonCommercial/ShareAlike Creative Commons License, with the exception that no rights are granted -- since they are not mine to grant -- in any logo, graphic design, trademarks or trade names of any type.

Get Firefox Use OpenDNS