Enabling VisualForce page for use in Salesforce1 app

As more mobile and tablet users start using Salesforce 1 app as an alternate to the desktop, it becomes imperative to take into consideration the mobile bandwidth limitations when developing new functionality that would be accessed through one these mobile platform.

Mobile users need a custom Visualforce page for their Salesforce1 app that uses less bandwidth to be compatible with easy viewing on a mobile device. Also, the customization needs to reduce processing time as the user will have to update several records in less time. Optimizing Visualforce page for Salesforce1 app will need the use of HTML 5.0 tags, JavaScript remote action methods and JSON object for communication from controller to Visualforce page. Here are some instructions that will be helpful in implementing the desired solution in order to customize Visualforce page for Salesforce1 app.

● First thing to remember while creating Visualforce page for Salesforce1 app is to ensure that the “Available for salesforce mobile App” checkbox is checked.

● The ‘doctype’ of the apex page has to be set at HTML 5.0.

● The standard controller on the Visualforce page should be the standard or custom object that’s under work, any extra functionality should be controlled from extensions. This makes the page available to display on page layout, mobile cards and publisher actions.

● On Visualforce pages Pageblock ,PageblockSection, PageblockSectionItem are frequently used. These components are good for non-mobile devices but on mobile devices they look awkward and do not promote ease of usage. Following components are not recommended to be used on Salesforce1 app. Instead, HTML tags are preferred.

<apex: pageBlock>

<apex: pageBlockSection>

<apex: pageBlockTable>

<apex:inlineEditSupport>

<apex:form>

Apex HTML 5 tags

<apex: pageBlock>,<apex:pageBlockSection> <div>,<p>

<apex: form> <form>

<apex: inputField> <input type=””>

<apex: pageBlockTable> <table>

● Following native apex tags are also not supported on Salesforce1.

<apex: detail>

<apex:listView>

<apex:inputField>

<apex:relatedLis>

In order to display lists we can use <apex:repeat> tag.

● Communication from Visualforce page and extensions is better handled using JavaScript Remote Action methods. For using remote actions the apex class should be global, the remote action methods should be global static and identified by the annotation @RemoteAction.

@RemoteAction // annotation indicating the below method is a remote method

global staticreturnTypefunctionName(){

}

● Using JSON object for communication between Visualforce page and extension is encouraged as it helps in maintaining consistency.

● The format of JSON object returned from extension to Visualforce page will not be in the exact format. This simple code converts it to the exact format.

Function htmlEncode(value){return $(‘<div/>’).html(value).text();}

<need to include the screen shot of the page accessed from Desktop and Saelsforce1 app>

Page on Desktop

Page on mobile app