IQJam by Elguji Software - Best Practice for Reusing Custom Controls

Best Practice for Reusing Custom Controls

Say I have a custom control that I want to be able to reuse. For instance an addressblock that has the fields for Address, City, State, Zip etc....

I wondering the best way to bind any fields to the data without hardcoding the Data Source. What if you wanted to use a different datasource name?

For instance my custom control might have a field like this:

<xp:inputText id="inputText1" value="#{company.company}"></xp:inputText>

But what if I wanted to use this custom control on "contact" page and the datasource was called contact? Who knows maybe I'd have 1 page with both company and contact information.

The datasource doesn't have a diamond next to it indicating it's computable. Is there a way to pass a parameter in to the custom control with the name of the datasource to work on?

Thanks!!!

Domino Development / XPages

Tagged

XPages custom controls

David Leedy - about 1 year ago | Permalink | Email | Viewed 200 times

Voting

There are 5 answers

By Date
Active Tab
By Votes

1votes

David,

What you should be able to do is pass in the data source itself as a parameter to the custom control. Then rather than referring to the data source by the name it has on the containing custom control, you can refer to it "properly" with whatever you name you want to in the custom control to which the data source has been passed to.

More details here: http://www-10.lotus.com/ldd/ddwiki.nsf/dx/09082009095808AMWEBJDV.htm

Matt White - about 1 year ago | Permalink

Voting

0votes

Thanks Matt. I read the linked document and finally did get it to work - but not the way John suggested in his updated comments. I could only get the original method - but that does seem to be working fine.

David Leedy - about 1 year ago | Permalink

Voting

0votes

I can't remember the reason, but I know I had problems with passing the datasource. I think it was to do with implementations where the data source was being set by a repeat control, and I got errors saying something like the data source had not been defined. I seem to remember it only worked if I set repeatControls property to true, which then had other implications.

What I've done in the past is pass the UNID, sometimes even the form as well, as parameters to the custom control. Then I specify the datasource on the custom control and compute the documentId and form properties there.

I'm not sure if this would have any other impacts, but I've not encountered any to date.

Paul Withers - about 1 year ago | Permalink

Voting

0votes

Try this. (Attempting to post raw XPage source. Hopefully it will work.)

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

   <xp:this.afterPageLoad><![CDATA[#{javascript:// technique thanks to Tommy Valand - http://dontpanic82.blogspot.com/2010/01/xpages-binding-customizable-scoped.html
var application = facesContext.getApplication();
var contactType = compositeData.contactType;
var sField, asFields = ['Name', 'Address', 'City', 'State', 'Zip', 'Email', 'Phone', 'Fax'];
var contactFieldNames = {};
var sDocFieldName = "";
var sComponentName = "";

for( var i = 0; i < asFields.length; i++ ) {
   sField = asFields[i];
   sComponentName = 'contact' + sField;
   sDocFieldName = 'contact' + contactType + sField;

   contactFieldNames[sComponentName] = sDocFieldName

   var valueBinding = application.createValueBinding( '#{currentDocument.' + sDocFieldName + '}');
   getComponent(sComponentName).setValueBinding( 'value', valueBinding );
}

ContactInfoPicklist.setContactFieldNamesForType(contactType, contactFieldNames);
}]]>
   </xp:this.afterPageLoad>
   <xp:this.resources>

       <xp:script src="/ContactInfoPicklist_Server.jss"
           clientSide="false">
       </xp:script>

   </xp:this.resources>
   <xp:this.beforePageLoad><![CDATA[#{javascript:requestScope.isDocBeingLoaded = true;}]]></xp:this.beforePageLoad>
   <xp:panel id="panelContact" styleClass="contactpanel">
       <xp:label id="contactHeader" for="contactName"
           style="font-weight:bold"
           value="#{javascript:compositeData.contactHeaderText}">
       </xp:label>

        
       <xp:button value="Choose Contact" id="buttonLaunchDialog"
           rendered="#{javascript:currentDocument.isEditable()}">
           <xp:eventHandler event="onclick" submit="false">
               <xp:this.script><![CDATA[ContactInfoPicklist.launchDialog('#{javascript:compositeData.contactType}')]]></xp:this.script>
           </xp:eventHandler>
       </xp:button>



       <xp:scriptBlock id="scriptBlock1" type="text/javascript"
           value="dojo.require('db.ContactInfoPicklist');"
           rendered="#{javascript:currentDocument.isEditable()}">
       </xp:scriptBlock>

       <xp:table>
           <xp:tr>
               <xp:td style="width:72.0px">
                   <xp:label value="Name:" id="contactName_Label"
                       for="contactName">
                   </xp:label>
               </xp:td>
               <xp:td style="width:821.0px">
                   <xp:inputText id="contactName" style="width:100%">
                   </xp:inputText>
               </xp:td>
           </xp:tr>
           <xp:tr>
               <xp:td style="width:72.0px">
                   <xp:label value="Address:" id="contactAddress_Label"
                       for="contactAddress">
                   </xp:label>
               </xp:td>
               <xp:td style="width:821.0px">
                   <xp:inputText style="width:100%"
                       id="contactAddress">
                   </xp:inputText>
               </xp:td>
           </xp:tr>
           <xp:tr>
               <xp:td style="width:72.0px">
                   <xp:label value="City:" id="contactCity_Label"
                       for="contactCity">
                   </xp:label>
               </xp:td>
               <xp:td style="width:821.0px">
                   <xp:inputText style="width:100%" id="contactCity">
                   </xp:inputText>
               </xp:td>
           </xp:tr>
           <xp:tr>
               <xp:td style="width:72.0px">
                   <xp:label value="State:" id="contactState_Label"
                       for="contactState">
                   </xp:label>
               </xp:td>
               <xp:td style="width:821.0px">
                   <xp:inputText style="width:100%"
                       id="contactState">
                   </xp:inputText>
               </xp:td>
           </xp:tr>
           <xp:tr>
               <xp:td style="width:72.0px">
                   <xp:label value="Zip:" id="contactZip_Label"
                       for="contactZip">
                   </xp:label>
               </xp:td>
               <xp:td style="width:821.0px">
                   <xp:inputText style="width:100%" id="contactZip">
                   </xp:inputText>
               </xp:td>
           </xp:tr>
           <xp:tr>
               <xp:td style="width:72.0px">
                   <xp:label value="Email:" id="contactEmail_Label"
                       for="contactEmail">
                   </xp:label>
               </xp:td>
               <xp:td style="width:821.0px">
                   <xp:inputText style="width:100%"
                       id="contactEmail">
                   </xp:inputText>
               </xp:td>
           </xp:tr>
           <xp:tr>
               <xp:td style="width:72.0px">
                   <xp:label value="Phone:" id="contactPhone_Label"
                       for="contactPhone">
                   </xp:label>
               </xp:td>
               <xp:td style="width:821.0px">
                   <xp:inputText style="width:100%"
                       id="contactPhone">
                   </xp:inputText>
               </xp:td>
           </xp:tr>
           <xp:tr>
               <xp:td style="width:72.0px">
                   <xp:label value="Fax:" id="contactFax_Label"
                       for="contactFax">
                   </xp:label>
               </xp:td>
               <xp:td style="width:821.0px">
                   <xp:inputText style="width:100%" id="contactFax">
                   </xp:inputText>
               </xp:td>
           </xp:tr>
       </xp:table>
   </xp:panel>
</xp:view>

John Smart - about 1 year ago | Permalink

Voting

0votes

hrm... now that I posted, that, I realize I'm answering a different question. :-/

The question I was answering was how to dynamically bind a custom control to a set of fields, so that a document can have ContactMainName, ContactMainPhone, etc, etc, and ContactEngineerName, ContactEngineerPhone, etc, by putting the same custom control twice.

I'd delete my comment if I could. My apologies.

John Smart - about 1 year ago | Permalink

Voting

There are 5 answers

IQSpaces

Latest Answers for Domino Development / XPages

Welcome to IQJam

Tags for Domino Development / XPages

Experts for Domino Development / XPages