Dreamforce this year raised a lot of questions…What is Salesforce1? It’s an app and a platform? What can I do with the app right now? Sandeep wrote a great article outlining the foundation basics of what you need to know about the Salesforce1 app. You can also play with all of the available declarative and developer features by checking out the Salesforce1 App Developer Guide. Needless to say there is a lot of cool stuff to tinker with today.

One of the new features in the Salesforce1 arsenal is your ability to create mobile cards. A mobile card is an area of the enhanced page layout where you can drag in Visualforce pages or expanded lookups for mobile viewing. This section of the layout can be viewed from the Salesforce1 app on the related information page of a record detail view. Think of it like how traditionally in page layout editor you could drag Visualforce pages into any section on the layout and see it embedded in the record detail page. Mobile cards are the same deal, but they only show up in mobile interfaces. Now you may be asking yourself, “Okay, I get it…but what the heck is an expanded lookup?” I’m so glad your inner monologue asked.

Expanded Lookup Mobile Cards

What is an expanded lookup? Expanded Lookups are essentially fancy links to a related record that the record you are viewing looks up to. Its the declarative way to link to parent objects while simultaneously displaying key information about the related record.

What should I know about expanded lookups?

• You can drag any existing relationship field from the “Expanded Lookups” category in palette tray at the top of the page layout editor into the Mobile Card section. It will display a lookup card on the related list page of the record detail view in Salesforce1 app.
• By default, this will only show the name of the record just like a normal lookup link; however, you can customize what fields show up for this lookup field by modifying the compact layout of that related object. For example, if you are creating a mobile card for an invoice on a line item, you can create a new compact layout for the invoice (don’t forget to set your new layout to the primary compact layout assignment) and then refresh the app to see those fields displayed in the expanded lookup card.
  • Side tangent: “What the heck is a compact layout?” This is a mini layout you can create from the object setup detail page to display key fields at a glance. In the Salesforce1 app, the compact layout determines the fields you see at the top of the Salesforce1 record detail view, object preview cards (minus those shown in search results), and in enhanced lookup cards. In an enhanced lookup you can only see the first 4 fields in the compact layout, but it can show anything (including images!) other than multi-select picklists and any kind of text area (ie text, rich, and long).
• Any page layout can have up to 20 expanded lookups.

Visualforce Page Mobile Cards

As I mentioned before, mobile cards function the same way as a Visualforce page would when dragged into a section in the page layout editor. Little disclaimer, the Visualforce mobile card will only show up in Salesforce1 mobile app and any Visualforce page placed on the detail page in a section will not appear in the Salesforce1 mobile app only the desktop.

What should I know about Visualforce mobile cards?

• All associated Visualforce pages show up in the “Visualforce Pages” category in the palette at the top of the page layout editor and can be dragged to the mobile card section, but only Visualforce pages enabled to be available for Salesforce mobile apps will display in Salesforce1 app.
• You can enable Visualforce pages for mobile if you navigate to the page in the setup and check the “Available for Salesforce mobile apps” in edit mode.
• You control the height of the card from the page layout editor. A mobile card cannot be scrolled and this height is static. If your content extends the height specified, you can tap into the mobile card to view it full screen on your device.
• You can navigate to other records and pages within the context of the Salesforce1 app by using the sforce.one JavaScript object.
• Visualforce styling by default looks out of place. You can use any bootstrapping library for your UI, but the mobile design templates we released earlier this year are a good place to start for a look and feel similar to Salesforce1 app.

Show Me the App

My Visualforce page is fairly simple. I have a page with an account standard controller that calculates directions to get to the account using the Google Directions API and the HTML5 Geolocation API. The Geolocation API is able to retrieve the latitude and longitude of the device’s position as long as the browser being used supports it. You can check to see if the browser supports geolocation with a simple if statement

This means any device, from a laptop to a tablet, can inherently run this functionality from the browser given that its not archaic or out of date. You will have to manually give permission to the application when this page is loaded before the output will render. Once you’ve granted permission to the app, the page simply grabs the necessary account details (Billing Street, Billing City, and Billing State) using the standard controller and routes a request using the Directions service.

The Google Directions service routes this request to display the appropriate directions after they are set. No custom controller necessary! To see the full code sample, check out my repo on GitHub After the page is finished, all you need to do is open the appropriate Account page layout and drag the Visualforce page into the Mobile Cards section near the bottom of the layout. If the page is dragged in, but not showing up in Salesforce1, it is either a permissions issue or the page is not enabled for mobile. You can enable a page by checking the box while in edit mode in the setup.

If you want to learn about other features, both admin and developer, around how to customize the Salesforce1 app check out the Salesforce1 App Developer Guide. There are also a lot of great session recordings that are up on YouTube from Dreamforce with ranging from high level overviews to deep dives into code. Check out my session with an overview and code overview on the current developer features and how you can leverage them. In addition to putting Visualforce in a mobile card, you can also surface Visualforce in the mobile navigation, the publisher (by creating a custom action), and when overriding standard buttons or creating custom buttons and links. I will be writing another blog soon around Visualforce in the Salesforce1 app but around a different use case. Hit me up on twitter if you have any questions!