complex visualforce pages for mobile sales users

Question

I have a visualforce page that my users get to from a custom button. Got asked, "Can you make this mobile?"

So far, we have not mobile-customized any of the "internal" sales pages because touch works find for them. These custom pages, though, are a problem.

They function like wizards in a fairly complex process, and are also pulling out lookup fields and turning them in to picklists based on SOQL queries (don't offer choices that don't make sense based on what's already been entered) for usability and validation.

How would I make these mobile (mostly aimed at phones) without having to start from a blank slate for all the objects the users would use?

Answer 1

Chatter mobile will have visualforce pages as publisher actions very, very soon. We're waiting for that. Clicks not code, y'all.

Answer 2

Its hard to know exactly how much work you need to do without seeing the pages. Are they completely custom layout or is the layout done using standard Salesforce tags pageblocks,pageblocksections etc? Are the sidebar/header shown?

You could either go for a full on mobile solution as some of the other posters have suggested (JQM for example) or just try to make what you have more responsive so it looks good regardless of screen size.

I'd put this meta tag in your element and see how it looks on a mobile device:

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1" />

If you're handling your layout with CSS you may just be able to make adjustments there to respond better to the smaller screen.

Answer 3

IMO, your best bet would be to convert them to HTML5 using jQuery. Be sure to minimize/optimize and/or eliminate any graphics. I'd suggest you also take a look at the new tools that were released during the Mobile Developer's Week. One of them is intended to help you develop solely in HTML5 which isn't optimal for any specific Mobile OS, but "works" with any of them. My recollection is that it gave you the option of what version of JS you wanted to work with, including jQuery.

Answer 4

You should look at the Samples/jQueryMobileVF page provided in the jQuery Mobile Pack - https://github.com/developerforce/MobilePack-jQueryMobile

It is a good starting point for how to include jQuery Mobile UI constructs on a VisualForce page.

This recent blog post by Bob Buzzard would also help you understand the same - http://bobbuzzard.blogspot.in/2013/05/mobile-web-apps-with-html5-and-jquery.html

Answer 5

The best way to accomplish this in quick time is to use JQM .JQM will provide UI framework and data can be binded to apex controllers using javascript remoting.

you may like to look at Jquery mobile packs to get started.

Angulur JS is also very good framework and along with twitter bootstrap ui framework mobile friendly pages can be developed in quick time but this involves some amount of learning curve while jquery mobile is faster to learn and code but when it comes to flexibility angulur js gives greater flexibility.

Update -After winter 14 enhancements**

With new chatter mobile features this requirement is out of box .

http://www.verticalcoder.com/2013/11/06/chatter-mobile-and-visualforce/