One of my big design goals with this app is simplicity. As I said earlier, this app is really complex in Notes desktop form. I am not intending to make the mobile app a one to one translation of the desktop app. In fact, the mobile version will be down right boring in terms of features.

However, boring doesn’t mean not useful. I want this to be as useful as possible given the limitations the typical smart phone puts on an app. However, I still want make the most use of all the new capabilities that phones can bring to a person in the field. With each customer record I basically want the following things available to a user:

• Details of the customer - Name, phone number, address
• The Contacts we have with the customer at a particular location with names, phone numbers and positions.
• The licenses for the products the customer has purchased. This is handy for knowing what they have for any up sell. It’s also handy so the user doesn’t have to phone the office again to have someone email them out - a common occurrence.
• Notes that someone may want to add about the customer while on site.

That’s it. Short and simple - but very handy when traveling to a customer for a meeting.

At this point, I’m going to mock up most of that structure. To do this, I’m starting with a template XPage that I can copy around when I need to add new pages.

Footer

I am also going to add one more feature to the footer - A ‘navbar’:

<div data-role="page">
	<div  data-position="fixed" data-role="header">
	    <h1></h1>
	</div><!-- /header -->
	<div data-role="content">
	</div> <!--content-->
	<div  data-position="fixed" data-role="footer">
	   <div data-role="navbar">
		<ul>
		<li><a href="#" class="ui-state-persist ui-btn-active">Details</a></li>
		<li><a href="contactList.xsp?documentId=#{javascript:thisDoc.getNoteID()}">Contacts</a></li>
		<li><a href="licenseList.xsp?documentId=#{javascript:thisDoc.getNoteID()}">Licenses</a></li>
		<li><a href="notesList.xsp?documentId=#{javascript:thisDoc.getNoteID()}">Notes</a></li>
		</ul>
	   </div><!— /navbar —>
	</div><!— /footer—>
</div> <!—page—>

My navbar looks like this on the screen:

This lays out the basic navigation of the app and will be essentially the same across all the pages. I don’t want anyone getting lost.

The JQM navbar is made with an <ul> with a bunch of links. The highlight is determinded with the class=”ui-state-persist ui-btn-active”  in the first link. The rest of the links bring the user to different sections of the app and pass the NoteId of the current document in the URL.

Header

I’m also going to tweak the header. In the header I’m going to add a ‘Back’ button that will bring me back to the main page, and I’m also going to put the customer name in the title bar. The customer name is a piece of cake thanks to XPages with only the following needed inside the header <div>:

<h1>
  <xp:text escape="true" id="computedField1"	
	value="#{thisDoc.fcftCompany_WB}">
  </xp:text>
</h1>

The back button is similarly easy with this:

<a href="home.xsp" data-icon="arrow-l" data-iconpos="left">Home</a>

A few things to note with the link though. First is the attribute data-icon=”arrow-l” this tells JQM that the link should actually render the link as a button and use the ‘arrow-l’ icon (which is a left pointing icon). The attribute data-iconpos=”left” positions the icon image to the left of the link text. More details can be found here regarding header buttons. The result is this:

So, this post is getting kinda long, so I’ll stop here, but next is gonna be cool. I’m going to add some Google maps!