The first thing you need to do to make your Xpage application look like a native iPhone app is to put all the parts(view, form, etc.) into 1 Xpage.  I did this with two panels, one is hidden while the other is showing.  In the first panel, which is set to display:none by default, is the contact form.  The other panel which is visible by default is the view and search function.

Configure the links in the view to set the document(data source for the contact panel) to the universal docid  by using the columns onClick event on the events tab. Set it to partial update the contact panel to receive the information from the document data source. On the client side js in the onClick event, set the panel with the search view in it to display:none, then set the contact panel to display:block.

dde1

Then create a back button on the contact form that hides the contact panel, and displays the search view panel.

The reason you need to put everything on one page and use Ajax refresh is because of the next step, also it is much much faster then changing pages.  Add this meta tag to the Xpage.

<meta name="apple-mobile-web-app-capable" content="yes" />

When a user bookmarks a your web page with this meta tag on the iPhone home screen, it will open in its own safari app process, it will not show the location bar or the bottom nav bar.  If you click on a link to another web page it will open it in a normal Safari window and take you away from the app, ruining your appearance of it being a native app.

Another meta tag that really makes a difference is:

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

photo6 photo7

This will set the top bar with “ATT and time” to be black when the app is opened.   

Now we want a custom icon on the iPhone home page, and a startup image too.  For this we add two links:

<link rel="apple-touch-icon" href=”/icon.png” />
<link rel="apple-touch-startup-image" href="/startup.png" />

Notice the CRM app icon on the desktop, then look at the startup “splash screen” image.

photo photo 4

The start up image comes up immediately, then waits for your page to open.  I suggest making your own Domcfg.nsf login form using the ultralite login subform as a start, then make the buttons and fields allot bigger.  i also found out that sometimes this replaces the iPhone home icon with the ultralight login image, so fix that as well, every app will have to have a custom login form.  I also added the ability to remember the password, not just the username.  You can search the web to find the correct dimensions for these pictures.

login

All that is left is to put in some nice webkit transitions when you hide and then display the panels.  I like to first fade out the current panel, after the fade out has occurred – set it to display:none, Set the next panel to display:block, then fade that panel in.  Most of this can be done with CSS, i will blog on this later.  You can also do the card flip or any webkit transition you would like.

photo photo 4 login photo6

 

6 Responses to Xpages: Part 3, making an CRM app iPhone Friendly – Making it look like a native app

  1. Carlos says:

    Wow, really nice. Thanks for sharing. Any plans to take the next step and do data capture from iPhone? I remember trying a while back without xpages and got buried trying to do something as simple as date/time pickers.
    Carlos

  2. Mark Hughes says:

    I plan on starting to work on todo's and the journal. Neither have a real counterpart on the iPhone, so i thought they would be good things to have.

  3. Minerva says:

    Hi I am so excited I foynd your site, I really found you byy error, while I
    was looking on Aol ffor something else, Anyways I aam here nnow and would juhst
    like to say thanks ffor a tremendous post and a all round interesting
    blog (I also llove the theme/design), I don’t have time tto rowse it aall at the
    moment but I have bookmarked itt aand also added your RSS feeds, soo when I
    have time I will bee back tto read much more, Pleas do keep upp the excellent job.

    Alsso visit my weblog … Candy Crush Sagga app (Minerva)

  4. Hello there, I found your web site by the use of Google at the same time as looking for a similar matter,
    your website came up, it appears to be like good.
    I’ve bookmarked it in my google bookmarks.
    Hi there, just was alert to your blog via Google, and
    found that it is really informative. I’m gonna be careful for brussels.
    I will appreciate for those who continue this in future.
    Lots of people will be benefited out of your writing.

    Cheers!

    My blog – Celine Handbags

  5. Marvelous, what a weblog it is! This webpage gives useful facts to us, keep it up.

  6. game trainer says:

    Attempting to make your ex-spouse jealous is one of the worst things you can do if
    you wish to acquire back with your ex, since all it is going to do is reveal him that you have actually relocated on and that he
    needs to do the very same. Stay away from obtaining
    dismayed if he is viewing somebody else, considering that you will not be able to quit it no matter
    what you attempt.

Leave a Reply

Your email address will not be published. Required fields are marked *