Salesforce1 Navigation and Page Design

We often found that navigation in Salesforce1 specially from a Visualforce page, using java script is sometime little tricky. There are two most common reasons because of which it happens

  • Bad usage of JavaScript. Yes it is the most common one
  • Missing Publisher.js when using publisher action (Object Specific)

According to me it is 90% of the time because of the first reason. But before that lets go through the best practice for designing VF pages for SF1.

Use SF1 Compatible CSS framework

We always struggled with this because SF1 UI is always different from the CSS frameworks we have used like jQuery Mobile, BootStrap etc. But now we don’t have to worry about it. If you want to make your pages look native and with less issues from the CSS, try using BootStrap SF1 or Lightning Design System
Tutorials for both of them is provided on respective links they are same like your other CSS frameworks but more cooler and compatible with SF1.

Note :- Try to use AngularJS because it is one of the most popular JS framework as of now. And if you know AngularJS it will help you in understanding the Lightning components concepts easily and you will be able to create lightning components on the go.

In the Javascript

Most of the time we build same page for both SF1 and Salesforce Browser (now referred as Salesforce Classic). To detect whether it is SF1 or classic you can use

if( (typeof sforce != 'undefined') && (sforce != null) ) {
 // Salesforce1
} else {
 // Desktop
}

If it is desktop you can use window.location , but if it Salesforce1 you can use any of the sforce.one methods depending on your need. sforce methods are readily available once you are on SF1 platform you don’t need to add any JS file.

sforce.one.navigateToSObject(recordId,view)
sforce.one.navigateToURL(url)
sforce.one.navigateToFeed(subjectId, type)
sforce.one.navigateToFeedItemDetail(feedItemID)
sforce.one.navigateToRelatedList(relatedListId, parentRecordId)
sforce.one.navigateToList(listViewId, listViewName, scope)
sforce.one.createRecord(entityName, recordTypeId)
sforce.one.editRecord(recordId) 

In Publisher

There is no much difference in a normal VF page and a publisher action page except for few things add publisher.js in the page and use standardController

<apex:includeScript value="/canvas/sdk/js/publisher.js" />

Close publisher before you are navigating, for example :-

function(){
 // I want to naviagte 
Sfdc.canvas.publisher.publish({ name : "publisher.close", payload : { refresh:"true" }});
sforce.one.navigateToSObject(someobjectId); 
}

Most of the time it is not even required to close the publisher but still lot of people face problem because of it. So there is no harm adding a line of code.

Example

Publisher

Created above page, and I am using it as both publisher action on account and a tab on Salesforce1 navigation panel. I am able to navigate from both the places very smoothly.
The one thing you have to keep in mind is that make sure your server call is completed before you call navigation methods. In such scenarios AngularJS is the best using its services you can identify and perform certain actions once the remoting call is completed.

Code

Submit Button
MY_SERVICE_TO_SAVE_ACC($scope.account).then(function(resp){                    
   if( (typeof sforce != 'undefined') && (sforce != null) ) {
       Sfdc.canvas.publisher.publish({ name : "publisher.close", payload : { refresh:"true" }});
       sforce.one.navigateToSObject(resp); 
   } else {
       window.open('/'+resp);
          }                   
   },function(error){                
      $log.error(error);
   });
Cancel Button
Sfdc.canvas.publisher.publish({ name : "publisher.close", payload : { refresh:"true" }});
GoSomeWhere Button
Sfdc.canvas.publisher.publish({ name : "publisher.close", payload : { refresh:"true" }});
sforce.one.navigateToList('somelistviewId', 'DisplayNameCanBeAnyThing', 'Account');

Hope it will be helpful for you 🙂

Advertisements

3 thoughts on “Salesforce1 Navigation and Page Design

  1. Hi Vivek,

    As you mentioned, I have used following code in tag:

    if( (typeof sforce != ‘undefined’) && (sforce != null) ) {
    // Salesforce1
    } else {
    // Desktop
    }

    But script tag is not being called in SF1. Can you please guide for any work around for this.

    Thanks!!

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s