Start tracking your progress
Trailhead Home
Trailhead Home

Implement Global Actions with Visualforce Pages

Learning Objectives

After completing this unit, you’ll be able to:
  • Describe two differences between global actions and object-specific actions.
  • Implement a Salesforce mobile global action using a Visualforce page.
  • Style a page using the Salesforce Lightning Design System to improve usability for a mobile user interface.

Implement Global Actions with Visualforce Pages

Quick actions enable users to do more in Salesforce and in the Salesforce mobile app. With custom quick actions, you can make your users’ navigation and workflow as smooth as possible by giving them convenient access to information that’s most important. For example, you can let users create or update records and log calls directly in their Chatter feed or from their mobile device.

Mobile users can quickly access commonly used tasks and functionality in the action bar and action menu in the Salesforce app. Tapping the More icon (Action Menu icon) opens the action menu, which contains the complete list of available actions.

Action bar and menu
Actions can be global or specific to an object.
  • Global actions don’t operate in the context of a specific object.
  • Object-specific actions operate on a specific record.

How are global actions different than navigation menu items? Like navigation menu items, global actions don’t operate in the context of a specific record. Global actions are best for implementing micro-tasks, such as a quick entry form where you fill in a few fields and create a new record. Navigation menu items are generally used to implement more complex processes or whole apps.

You can create both custom global and object-specific actions using Visualforce. We’ll start with global actions in this unit and get to object-specific actions in the next unit.

Create a Visualforce Page for the Global Action

A global action opens a Visualforce page, which can in turn invoke additional pages. You need to define the first page before you create the action that launches it.
Let’s create a global action that allows users to quickly create an account by capturing only the account name.
Note

Note

As before, this example is simple for the purposes of clarity. We hope you find it informative, and extend it as you build your own Salesforce apps.

  1. Open the Developer Console and click File | New | Visualforce Page. Enter QuickAccount for the page name.
  2. In the editor, replace any markup with the following.
    <apex:page docType="html-5.0" title="Create Account">
        
        <apex:remoteObjects >
            <apex:remoteObjectModel name="Account" fields="Id,Name"/>
        </apex:remoteObjects>
        
        <div class="mypage">
            Account Name:
            <input type="text" id="accountName"/>
            <button onclick="createAccount()">Create Account</button>
        </div>
        
        <script>
            function createAccount() {
                var accountName = document.getElementById("accountName").value;
                var account = new SObjectModel.Account();
                account.create({Name: accountName}, function(error, records) {
                    if (error) {
                        alert(error.message);
                    } else {
                       sforce.one.navigateToSObject(records[0]);
                    }
                });
            }
        </script>
        
    </apex:page>

As before, if you click the Preview button to see your page, you’ll see it in the standard desktop view, not the the Salesforce app version. You have to add the Quick Account page to the Salesforce app before you can see it inside the app. We’ll get to that in a minute.

Also like Latest Accounts, Quick Account doesn’t use a standard controller, and instead relies on Remote Objects for its behavior. Where Recent Accounts used Remote Objects just to load existing data, the Quick Account page uses Remote Objects to actually create a record in Salesforce. Remote Objects can also be used to update and even delete data where appropriate. It’s an extremely versatile tool that’s well-suited for use in Salesforce apps.

Beyond the Basics

While we’re not learning about Remote Objects specifically, it’s worth noting how Remote Objects uses sforce.one to navigate to the Account details page upon successful creation of the account. The magic happens in this call to create.

account.create({Name: accountName}, function(error, records) {
    if (error) {
        alert(error.message);
    } else {
       sforce.one.navigateToSObject(records[0]);
    }
});

The create function accepts two arguments. The first is probably fairly obvious: it’s a block containing name-value pairs that provide values for fields for the new account. If our Quick Account form had more fields, you could simply add appropriate name-value pairs to this block to create the account record with the additional field values. The second argument is a callback function. This function is called with the results of the Remote Objects operation once it completes.

Callback functions are a standard technique in JavaScript for handling events and asynchronous operations. Remote Objects uses this pattern to handle the response of its asynchronous operations. When you invoke a Remote Objects operation, you provide the parameters of the operation and, optionally, a callback function. Your JavaScript code continues uninterrupted after you invoke the operation. When the remote operation is completed and results are returned, your callback function is invoked and receives the results of the operation.

Here our callback function is extremely simple. It receives two values when called, an error object and an array containing the records that were affected by the operation. If there’s an error, the callback displays it in an alert. (That’s not ideal for production use, but it works while we’re exploring.) If the record was created successfully, we use the sforce.one.navigateToSObject function to navigate to the first item of the array of affected records. This just so happens to be the account that was created. Neat!

Create a Global Action with the Visualforce Page

Global actions aren’t associated with any specific object, so they’re created in their own section in Setup.

To use the QuickAccount page as a global action:

  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. Define the global action.
    1. From Setup, enter Actions in the Quick Find box, then select Global Actions.
    2. Click New Action.
    3. In the Action Type drop-down list, select Custom Visualforce.
    4. In the Visualforce Page drop-down list, select QuickAccount.
    5. In the Label field, enter Quick Account.
      The other default values are fine.
      Create a global action with the new page
    6. Click Save.
  3. Add the global action to the publisher layout.
    1. From Setup, enter Publisher Layouts in the Quick Find box, then select Publisher Layouts.
    2. Click Edit to the left of Global Layout.
    3. In the Salesforce Mobile and Lightning Experience Actions, click to override the predefined actions.
    4. From the Mobile & Lightning Actions category in the palette, drag the Quick Account action to the Salesforce Mobile and Lightning Experience Actions section. Put it in the first position.
      Add the Quick Account action to the global publisher layout
    5. Click Save.

You’re ready to test the new action. In a prior unit, we led you through the individual steps one-by-one. From here, we’ll go more quickly.

To test your new global action, force a reload of your Salesforce mobile app. Then, anywhere in the app, tap Action Menu icon to access the action menu, and tap the Quick Account action. You should see your page, ready to create an account.
View the Quick Account action page

Give it a whirl! You should be able to create an account and then go to that account’s detail page in the Salesforce mobile app. Overall, pretty good for a quick effort.

Style the Action Page for Mobile Devices

Use the Salesforce Lightning Design System (SLDS) to style the action’s Visualforce page. Styling the page optimizes it for mobile devices and the look of the Salesforce app.
  1. Open the Developer Console and click File | Open to open your page.
  2. Replace any markup with the following code.
    <apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
    
      <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
        <head>
          <meta charset="utf-8" />
          <meta http-equiv="x-ua-compatible" content="ie=edge" />
          <title>SLDS QuickAccount Page in Salesforce Mobile</title>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
    
          <!-- Import the Design System style sheet -->
          <apex:slds />
        </head>
    
        <apex:remoteObjects >
          <apex:remoteObjectModel name="Account" fields="Id,Name"/>
        </apex:remoteObjects>
    
        <body>
    
          <!-- REQUIRED SLDS WRAPPER -->
          <div class="slds-scope">
    
            <!-- PRIMARY CONTENT WRAPPER -->
            <div class="myapp">
    
              <!-- INPUT FIELD -->
    
              <div class="slds-form-element">
                <label class="slds-form-element__label slds-text-heading_medium 
                              slds-p-bottom_medium" for="text-input-id-1">Account Name:</label>
                <div class="slds-form-element__control">
                  <input type="text" id="accountName" class="slds-input"> </input>
                </div>
              </div>
    
              <!-- / INPUT FIELD -->
    
              <!-- BUTTON -->
    
              <button class="slds-button_neutral slds-size_1-of-1 
                             slds-m-top_x-small slds-p-bottom_x-small slds-p-top_x-small" 
                             onclick="createAccount()">Create Account</button>
    
              <!-- / BUTTON -->
    
            </div>
            <!-- / PRIMARY CONTENT WRAPPER -->
    
          </div>
          <!-- / REQUIRED SLDS WRAPPER -->
    
          <!-- JAVASCRIPT -->
    
          <!-- / JAVASCRIPT -->
        </body>
      </html>
    </apex:page>
    This code creates the input field and buttons and styles the page to match the Salesforce app’s look using the Lightning Design System.
  3. Add the following code under <!-- JAVASCRIPT -->.. This is the JavaScript code you wrote earlier in the unit.
    <script>function createAccount() {
      var accountName = document.getElementById("accountName").value;
      var account = new SObjectModel.Account();
      account.create({Name: accountName}, function(error, records) {
        if (error) {
          alert(error.message);
        } else {
          sforce.one.navigateToSObject(records[0]);
        }
      });
    }</script>
    
  4. Reload the app and view your changes. If you don’t see your page, enable the page for mobile apps again.
    The Latest Accounts page after mobile styling

Much better! As before, text, entry fields, and tap targets are larger and more suitable for touch-based devices.