Converting Visualforce i-frame page to Salesforce 1 Mobile

Question

I converted my existing Visualforce Account i-frame (includes twitter / fb links on an account and a list of other nearby accounts) so that it is now responsive and I have also clicked the checkbox so that the Visualforce page is available for Salesfoce 1 mobile. I dragged the Visualforce page into the mobile card and it displays correctly under the related tab. HOWEVER, when I tap on the external Facebook or Twitter Links, it reloads the same mobile card in full view and I then have to scroll down to the link to click once more for it to finally open.

Is it possible for the user to tap on the i-frame in the related tab to interact with the external links or on the nearby accounts directly without reloading the same card in a separate screen? It would be great to use the i-frame within the context of the related tab.

Also I would like the external links to Twitter and Facebook to open in the SF 1 browser, how do I do that?

Thanks in advance!

Answer 1

Quite simply, it sounds like you have too much on your page for SF1 to handle. If you want you VF pages to load faster, you'll also want to use JS remoting for them wherever possible. If you want to not have to reload everything, then you need to create a single page that contains all of your code for everything that you want to do with a JS remote controller. I suspect that data associated with list of nearby accounts is a large part of your problem. That could be data heavy depending on the number of fields and accounts you're allowing to be sent. See below for more.

From Chapter 16 of the SF1 Developer's Guide:

Unsupported Visualforce Components

Here’s a list of Visualforce components that aren’t supported in Salesforce1, and shouldn’t be used in Visualforce pages that will be used with the Salesforce1 app.

• <analytics:reportChart>
• <apex:detail>
• <apex:emailPublisher>
• <apex:enhancedList>
• <apex:flash>
• <apex:inputField> for field types that use a widget for input, instead of a basic form field
• <apex:listViews>
• <apex:logCallPublisher>
• <apex:relatedList>
• <apex:scontrol>
• <apex:sectionHeader>
• <apex:selectList> for picklist fields
• <apex:vote>

Also note:

As is the case with multiple cards, although you can add multiple inline Visualforce pages to a page layout, it quickly becomes a user experience challenge to scroll past them to see the rest of the page. It’s a best practice to never add more than two Visualforce page elements in a row; separate Visualforce elements with a regular page element, such as a field. If you need a full screen to display your page, consider moving it to a custom action on the object instead.

And:

Additionally, if your page uses the Google Maps API, Google recommends using an HTML5 doctype.