OK… this project isn’t as easy as it was yesterday…. So in the process of creating the contacts page I found a bug in the JSON output for my view. It really wasn’t easy to find either… 

I started as I normally do by creating the basic page template and JS code that I have done for the past two pages. I ran into a problem when my getJSON call wasn’t returning any results (the success callback wasn’t being called). I took the URL and pasted into a browser and every looked fine. The server was the same, so no cross domain issues. No errors on the server console. ACL was the same as the other database…. what was going on!

Reading though the doc on JQuery.getJSON I found this note:

Important: As of jQuery 1.4, if the JSON file contains a syntax error, the request will usually fail silently. Avoid frequent hand-editing of JSON data for this reason. JSON is a data-interchange format with syntax rules that are stricter than those of JavaScript’s object literal notation. For example, all strings represented in JSON, whether they are properties or values, must be enclosed in double-quotes. For details on the JSON format, see http://json.org/.

Hmmm….. could this be my problem? I went back to the output I got from the browser window and pasted it into a JSON validator and sure enough there was a problem.

Parse error on line 77:
...               "0": "Teamstudio CIAO\! C
-----------------------^
Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '['

So it looks as if Domino is trying to escape a the ‘!’ character when it shouldn’t be. This won’t fly with the JSON.parse call that JQuery.getJSON uses.

CRAP!

I have to say, I seem to run into this way too often with Notes and Domino. There are so many useful features that are just not robust enough to use. Even worse is most of the bugs you find are not easily worked around and you never seem to find them until you are a week into a project. It is extremely frustrating!

I have a few alternatives that I can explore so unless anyone has any ideas how to fix this, I think I’m gonna ditch the views and switch to an agent. I think that even though the agent is more work, there are a lot of cool possibilities that it offers that wouldn’t have been possible with just a view. Though, I really did like the simplicity and ease of reuse the views offered…. they just don’t do what they advertise.

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!

Since this is a Notes database on a Domino server, I figured the best way to get started would be with XPages. I don’t know XPages very well at all, but how hard could it be?

I have also chosen JQuery and JQuery Mobile as my framework. I’ve dabbled with these before so I’m most familiar with these, and that was really the only reason I chose them.

Note about the app: I’m not going crazy with features here, V1.0 will be a proof of concept.

Step 1 - Create the initial page.

The first page a user will see in version one is a list of all the customers. This turned out to be incredibly easy with XPages. After 10 minutes and a repeat control I ended up with this:

Here is all I have so far:

<xp:this.data>
 <xp:dominoView var="view1" databaseName=server/852!!test\crm.nsf" viewName="ALLCOMPANIES">
 </xp:dominoView>
</xp:this.data>
<ul>
	<xp:repeat var="vw" rows="30" value="#{view1}">
		<li>
			<a href="details.xsp?documentId=#{javascript:vw.getNoteID()}">
			<xp:text styleClass='companyName' escape="true" id="computedField1"
			 value="#{vw.fcftCompany_WB}">
			</xp:text>
			<br />
			<xp:text styleClass='companyAddress'
				escape="true" id="computedField2"
				value="#{vw.faddAddress_SS}">
			</xp:text>
			<xp:br />
			<xp:text styleClass='companyAddress'
				escape="true" id="computedField3"
				value="#{vw.faddAddress_SS_1}">
			</xp:text>
			<xp:br
				rendered="#{vw.faddAddress_SS_1!=''}" />
			<xp:text styleClass='companyAddress'
				escape="true" id="computedField4" value="#{vw.faddTown_SS}">
			</xp:text>
			<xp:text styleClass='companyAddress'
				escape="true" id="computedField5"
				value=",&#160;#{vw.faddCounty_SS}">
			</xp:text>
			<xp:text styleClass='companyAddress'
				escape="true" id="computedField6"
				value="&#160;#{vw.faddPostcode_SS}">
			</xp:text>
			<xp:text styleClass='companyAddress'
				escape="true" id="computedField7"
				value=",&#160;#{vw.faddCountry_SS}">
			</xp:text>
			</a>
		</li>
	</xp:repeat>
</ul>

I know, it’s a bit basic, but in the next post I’ll show how Jquery Mobile is going to help with that.

Here are the basics. I have a database where all my customer information is. Call this the ‘contacts’ db. I also have a database where I store all the license keys for the products people buy. Lets call this the ‘license’ db. As it stands right now, these two databases are not connected very well. Sure there are connections between the two, but they really can’t be called integrated. Oh, and neither of these are web enabled.

Both apps are fairly complicated and there probably isn’t anyone here that can say they know the app inside and out. I’ve been looking at these things for weeks and am totally baffled how it works at all!

In any case, the data is what I’m really after. I am not really trying to bring the app to the mobile web with all its functionality, I just want to make the data in it available to staff while they are on the road.