đź“Ł Attention Salesforce Certified Trailblazers! Link your Trailhead and Webassessor accounts and maintain your credentials by December 14th. Learn more.
close
trailhead

Use Visualforce Pages in Page Layouts and Mobile Cards

Learning Objectives

After completing this unit, you’ll be able to:
  • Describe two differences between adding a Visualforce page to a page layout section and adding the page to a mobile card.
  • Create Visualforce pages to use in Salesforce app page layouts.
  • Create Visualforce pages for mobile cards in the Salesforce app.

Use Visualforce Pages in Page Layouts and Mobile Cards

Customize record detail pages by embedding Visualforce pages in your page layouts, or by adding them as mobile cards on a page layout.

Customizing page layouts by embedding Visualforce in a section on the page has long been a feature of Salesforce. This feature works as well with the Salesforce app as it does with regular Salesforce. Pages added to a layout this way appear in both the standard desktop version of Salesforce and in the Salesforce app.

Mobile cards, however, allow you to add a Visualforce page to a layout for mobile users only. Mobile cards are a great way to add small pieces of information and to format them specifically for mobile use. For example, imagine a mobile card that gives you directions to your contact’s office or shows you a quick summary of a company’s important data.

A Visualforce page used in a page layout or as a mobile card runs in the context of a specific record. As with object-specific actions, a specific record ID is associated with the page and it must use the standard controller for that object.

Create a Visualforce Page to Use on Page Layouts

Design embeddable Visualforce pages by using the standard controller and keep the page focused, ideally on a single task or kind of information.

Let’s create a Visualforce page that provides a stock quote for the selected account.

  1. Open the Developer Console and click File | New | Visualforce Page. Enter StockQuote for the page name.
  2. In the editor, replace any markup with the following.
    <apex:page docType="html-5.0" standardController="Account">
        <style>
            .mypage .quote {
                margin: 12px 0;
                font-size: 64px;
                text-align: center;
            }
            .mypage .delta {
                font-size: 24px;
                text-align: center;
                color: green;
            }
        </style>
        
        <div class="mypage">
            Stock:
            <div class="quote">$42.00</div>
            <div class="delta">+1.32%</div>
        </div>
        
    </apex:page>
Well, this page isn’t hard to understand! It’s almost entirely static, simple HTML. Note the use of the standard controller for Account, which lets you add this page on an Account layout as an embedded page or mobile card.
Note

Note

Why are we using static HTML instead of SLDS here? Static styles keep the embedded page focused and lightweight. Of course, the tradeoff is that the page doesn’t automatically match the Salesforce app UI.

What’s important here isn’t any specific programmatic technique, so much as understanding the best uses for embedded pages and mobile cards. Especially in a mobile environment, keep your Visualforce focused on the essential information a user needs to accomplish a specific task. Simple mobile apps perform better, and users can stay focused on the job they’re doing.

Keep in mind the context where users will use your app—on the plane, while walking into an appointment, while waiting in line, and so on. You might be tempted to add extra fields or information, “just in case.” Don’t. Focus. If users need details, they can zoom into them on another page.

Use the Page on a Page Layout or Mobile Card

Add a Visualforce page to a section on a page layout to add it for all users. Add it as a mobile card on a page layout to add it only to the Salesforce app.

The steps are similar whether you’re adding the page as a section on a page layout or as a mobile card.

  1. From Setup, enter Visualforce Pages in the Quick Find box, then select Visualforce Pages, and then enable the page for mobile apps.
    You learned how to enable a page for mobile apps in a previous unit.
  2. Add the Visualforce page to a page layout.
    1. From Setup, enter Object Manager in the Quick Find box, then click Object Manager | Account | Page Layouts.
    2. Select Edit from the dropdown arrow to the right of Account Layout.
    3. Select Visualforce Pages and drag the StockQuote page to where you want it displayed on the page.
      Add the action to the Opportunity layout
      Pages added to the Mobile Cards section only appear in the Salesforce app. Pages added to another section on the page layout are visible to both mobile and desktop clients.
    4. Click Save.
To test your new mobile card, force a reload of your Salesforce app. Then navigate to an account record and swipe to the Related panel. You should see something like the following.
The Close Opportunity action page

Although this stock widget is hard-coded, you could easily connect it to a stock quotation lookup service you write in Apex, a Web Services callout, or any other data source. You can add multiple mobile cards to a layout, and they’ll all appear in the Related panel.

retargeting