Moving on, we get to the License page. This lists all the licenses that the customer has for our tools. This is really handy especially when you are going on site for training or installation help as the customer has probably just purchased the tools and does not yet have them installed. The person on site typically has to call back to the office and have someone email the customer or the tech person the license details. It’s a huge pain if the person on site can’t get in touch with the office.

Once again we start with the same page template I developed earlier I once again drop a repeat control into the content section. This time however the data is coming from a different database, so I need to add a new datasource to the top of the XPage.

<xp:this.data>
	<xp:dominoDocument var="thisDoc"
		databaseName="server!!test/rm.nsf" action="openDocument"
		formName="CCLF00SS">
	</xp:dominoDocument>
	
	<xp:dominoView var="view1"
		databaseName="server!!test/licence.nsf"
		viewName="DBCompanyProducts" categoryFilter="#{thisDoc.fcftCompany_WB}">
	</xp:dominoView>
</xp:this.data>	  

The document object is created with the documentId url parameter. Then the view object is created. Notice that the categoryFilter attribute is computed based on the document object. This works out perfect since my license database already had a view that was categorized on the company name! The other nice thing about the view I am using is that the next column is a category also that splits the documents on the product the key is for. There are lots of times where a customer may have a number of licenses for the same product so grouping them is really helpful and I want to maintain that grouping in the mobile app. Here is where JQM can help out. There is a nice feature called ‘list dividers’ that I’m going to use. A list divider is basically just an <li> tag with the data-role=’list-divider’ attribute. The trick is how do you get the list divider only on a category?

JQM List dividers and categorized views

The way I did it was to use an <xp:scriptBlock> with a rendered attribute based on the note id of the current document.

<xp:scriptBlock rendered="#{javascript:lic.getNoteID()==''}">
	<li data-role="list-divider" data-dividertheme="b">
	<xp:text escape="true" id="computedField1"
			value="#{lic.fappName_LC}">
		</xp:text>
	</li>
</xp:scriptBlock>  

I used an <xp:scriptBlock> because the entire thing just goes away and doesn’t leave any trace if the rendered attribute is false. Other tags I tried left bits behind that would mess up the list. So this works great. I also added the data-dividertheme=”b” attribute to the <li> tag to give it a blue color.

Along with that script block I add another that works the opposite way:

<xp:scriptBlock rendered="#{javascript:lic.getNoteID()!=''}">
	<li>
		<a
			href="license.xsp?documentId=#{javascript:lic.getNoteID()}">
		<xp:text escape="true" id="computedField2"
			value="#{lic.fserKey_LC}">
		</xp:text>, 
		<xp:text escape="true" id="computedField4"
			value="#{lic.fserNumber_LC}">
		</xp:text>
		</a>
	</li>
</xp:scriptBlock>

With those two blocks in place I get a view that looks like this:

License Details

Just like the customer list page clicking on a license entry here will bring you to the license details page. This page isn’t fancy at all. I used a table to layout the data from the license document (passed in via the documentId url paramter) and a highlighted area to call out the license data itself along with an ‘email this’ button.

<div class="ui-body ui-body-e" >
	<h2><xp:label style="font-weight:bold" value="Serial Number" for="computedField7" id="label1"></xp:label><br/></h2>
	<xp:text escape="true" id="computedField7" value="#{thisDoc.fserNumber_LC}"></xp:text>
	<br/>
	<h2><xp:label value="Serial Key" for="computedField8"
			id="label5" style="font-weight:bold">
		</xp:label>
	<br/></h2>
	<xp:text escape="true" id="computedField8" value="#{thisDoc.fserKey_LC}"></xp:text>
	<br/>
	
	<a href="mailto:#{document1.fmctEMAddr_WB}?subject=#{thisDoc.fappName_LC} License Key&amp;body=Number: #{thisDoc.fserNumber_LC}%0AKey: #{thisDoc.fserKey_LC}%0A" data-theme="c" data-icon="grid" data-role="button">Email This</a>
</div>

The end result is this:

And there you have it! One last page to go and I’m done. Next up - Notes (not that one).

Just wanted to share a site I really find useful. With JavaScript being more and more important in the projects I’m working on, it’s really handy to have this around to test little snippets without having to go through all the effort of creating an actual test page.

Some great tips when planning what your mobile app is going to and not going to do….