The next two pages of the app are the easiest. Both the ‘Contacts’ page and the ‘Licenses’ page will have 2 XPages each. Once to list the documents, and one to show the details of the selected document.

The ‘Contacts’ pages

Starting with the basic page template I had from before with a header that contains the company name and a footer with the 4 tabs, I’m going to add a repeat control in the content div for the list of documents to display. It’s at this point that the two pages differ slightly. The ‘Contacts’ page is built from the list of contacts at a particular company. These documents are responses to the actuall company document that was used on the ‘Details’ pages. Also, in the URL the Note ID of the company document is passed along so the document I start with is already bound to the variable ‘thisDoc’ in the XPage. In my repeat control I can get the list of responses using the getResonses() call in a bit of JavaScript like so:

<xp:repeat rows="50" var="contact">
  <xp:this.value><![CDATA[#{javascript:thisDoc.getDocument().getResponses()}]]></xp:this.value>
</xp:repeat>

The only small problem with this is that there are more than just contacts in the list of responses. I have other things like email histories and purchase orders for example, and I don’t want those to show up here. There are a few different ways I could have gone here, but since there are never that many total documents in the response list ( I think 45 was the most I counted ) my simple trick to get just the contacts was to have an <xp:panel> that would only render if the form was a contact.

<xp:repeat rows="50" var="contact">
  <xp:panel rendered="#{contact.Form=='CCNT00SS'}">
  </xp:panel>
</xp:repeat>

Let me be clear, this is not the best solution for every application. In fact it’s pretty wasteful because the repeat control is still loading all the data, we are just hiding the ones we don’t want to see. Also, the repeat is capped at 50 rows so any contacts that don’t make that cut off will be missing. All that said, knowing my data, I’m fine with this as the alternatives would be more work.

Like with the main company list, inside the repeat control I have a <li> that contains an anchor tag and some text.

<li>
	<a href="contact.xsp?documentId=#{javascript:contact.getNoteID()}">
	<xp:image styleClass="jobImage">
		<xp:this.url><![CDATA[#{javascript:
			var job =  contact.getItemValueString('fpjrFunction_WB');
			if( job.toLowerCase() == "developer" ){
				return "designer.png"
			}
			return "admin.png";
		}]]></xp:this.url>
	</xp:image>
	<xp:text styleClass='contactName' escape="true" id="computedField1" value="#{contact.fpnhName_WB}"></xp:text>
	<br/><xp:text styleClass='contactDetails' escape="true" id="computedField2" value="#{contact.fpjrPosition_WB}"></xp:text>
	<br/><xp:text styleClass='contactDetails' escape="true" id="computedField4" value="#{contact.fppbPhone_WB}"></xp:text>
	<xp:text rendered="#{javascript:contact.getItemValueString('fppbXtn_WB').length()!=0}" styleClass='contactDetails' escape="true" id="computedField5" value="&#160;&#160;Ext: #{contact.fppbXtn_WB}"></xp:text>
    </a>
</li>

I also added a little bit of JavaScript for an image that changes depending on their job role. The end result looks like this:

Finally, to finish up the contact section I created a XPage called ‘contact.xsp’ that will display the basics of the contact data along with a call button that just contains another ‘tel:’ link. You get to this page when you touch a contact in the list. The anchor tag above uses a little bit of magic to construct the URL:

<a href="contact.xsp?documentId=#{javascript:contact.getNoteID()}">

The contact page looks like this:

Next up is the ‘License’ page and a neat little bit of JQuery Mobile to go with it.