Creating Visualforce Pages That Work in Mobile and Desktop

The Salesforce mobile app provides a framework for handling various navigation controls and events. That framework isn’t available to Visualforce pages when they run on the full Salesforce site, because the sforce object is injected onto pages only inside the app. This means that, for pages shared between the Salesforce mobile app and the full Salesforce site, you’ll want to write code that uses the sforce object when it’s available, and standard Visualforce navigation when it’s not.

// Go back to the Account detail page
if( (typeof sforce != 'undefined') && sforce && (!!sforce.one) ) {
    // Salesforce app navigation
    sforce.one.navigateToSObject(aId);
}
else {
    // Set the window's URL using a Visualforce expression
    window.location.href = 
        '{!URLFOR($Action.Account.View, account.Id)}';
}

The if statement checks to see if the sforce object is available and usable. This is only true if the page is running inside the app. If sforce is available, the mobile navigation management system is used to go to the account’s detail page.

If the sforce object isn’t available, trying to use it to navigate anywhere results in a JavaScript error, and no navigation. So, instead, the code sets the window’s URL using a Visualforce expression that returns the URL for the account’s detail page. You don’t want to do this in the app because the navigation event will be lost by the framework, but it’s required in normal Visualforce.

(function(myContext){
    myContext.ForceUI = myContext.ForceUI || {};

    myContext.ForceUI.isSalesforce1 = function() {
        return((typeof sforce != 'undefined') && sforce && (!!sforce.one));
    }
})(this);