Working with Salesforce1 on the Desktop

Salesforce1, the new mobile app released by Salesforce at Dreamforce ’13, allows for rapid development of mobile apps, making it simple to add functionality to the mobile platform.

Salesforce1 is currently available in the iTunes Store (requires iOS6+) and Google Play Store (requires Android 4.2+). To speed up development, it is relatively simple to work with the Salesforce1 app directly on your desktop using Google Chrome. Here is how it’s done:

1) Allow Salesforce1 Access on Desktop

When logged into Salesforce, ensure Salesforce1 is set up to run as a mobile browser app. This is done through Administer > Mobile Administration > Salesforce1. If the Enable the Salesforce1 mobile browser app option is not already selected, select it and Save.

Next you will want to make sure that your user is set up to allow accessing Salesforce1. Each user has a Salesforce1 User option. Ensure this is checked.

2) Navigate to App

You should now be able to navigate directly to the Salesforce1 app in your browser. To do that, all you need to do is add /one/one.app to the end of your URL of the domain your Salesforce instance is on. So, in my case, my Developer Edition is located on na15, meaning when I log in my URL looks something like https://na15.salesforce.com/home/home.jsp. To navigate to the Salesforce1 app, change the /home/home.jsp to /one/one.app. When I navigate to https://na15.salesforce.com/one/one.app, I get:

3) Change User Agent and Dimensions

As you can tell from the above picture, this doesn’t look correct. You need to manipulate your browser to make it look like a mobile device. One way to do that is to simply just make your browser much smaller. With the responsive design that Salesforce1 uses, this is a valid option. However, this really isn’t ideal as it doesn’t truly simulate what the app would look like on the mobile device (the user agent is different and the dimensions will change based on your browser size). You can do this by utilizing a great feature of Google Chrome.

The first thing you need to do is open up the Developer Tools. The easiest way to do that is to just right-click anywhere on the page and select Inspect Element

This will open up your Developer Tools at either the bottom of the browser or in a different window (depending on the settings you have set up).

In the bottom right hand corner, you will see a small gear that will open up additional options.

You can then select Overrides.

You can now easily Enable the overrides and then specify a User Agent (which should default to the correct dimensions for that device – With that said, you will probably have to change these because the dimensions on the device are for retina displays which will not view properly on a browser).

Once you have this set, your browser should properly display the application. One thing to remember is that you have to keep the Developer Tools open in order to maintain these settings. If you close the Developer Tools, the browser will revert back to the standard Google Chrome.

Note: If you use Google Chrome Canary (bleeding edge version of Chrome w/ absolute latest features), you would be much better off using the new mobile emulation feature. This feature will eventually replace the above setup as well once it is released as part of the standard Google Chrome build.


So there you have it, Salesforce1 in your browser speeding up development and allowing easy access to your application. Now get out there and build some cool apps!

Advertisement

Go to Smartblog Theme Options -> Ad Management to enter your ad code (300x250)

Comments are closed.