Salesforce and Application Integration

Back Next

Connected Apps Guide Integration with Salesforce1 Mobile Applications

With Guide Designer, you can integrate guides with your Salesforce1 mobile applications. This type of integration requires you to use the Salesforce managed package as a Connected App.

Before you start:

Download the Salesforce1 app.

The integration requires the following steps:

Create a Visualforce page and enable it for Mobile Apps.

Create a new Action for the object in Salesforce.

Enable Publisher actions in Salesforce.

Put the new Action on the Salesforce object page.

Verify the Mobile App runs as expected.

Step 1: Create a Visualforce Page and Enable it for Mobile Apps

From the Setup menu, select

App Setup

Develop

Pages

Click

New

Enter a label, for example, aeOpportunityGuideMobileEnabled.

Check

Available for Salesforce mobile apps

Add the Visualforce markup as shown here:

Markup for a Home guide:

<apex:page sidebar="false" showHeader="false" standardStylesheets="false" 
        cache="true" expires="300" docType="html-5.0" >
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1, 
         maximum-scale=1.0, user-scalable=no" />      
 </head>
 <body style="margin: 0px; padding:0px;">
   <icrt:AeSalesGuides sf1="navigation" objectType="_any" 
        objectId="{!$User.Id}" extraInfo="Home Guides" nothingOnDone="true"   
        match="Role={!JSENCODE(SUBSTITUTE($UserRole.Name, ",", ""))},  
             Profile={!JSENCODE(SUBSTITUTE($Profile.Name, ",", ""))}" />
 </body>
</apex:page>

Markup for an Account guide:

<apex:page standardController="Account" sidebar="false" showHeader="false"  
   standardStylesheets="false" cache="true" expires="300" docType="html-5.0" >
 <head>
   <meta name="viewport" content="width=device-width, initial-scale=1, 
         maximum-scale=1.0, user-scalable=no" />      
 </head>
 <body style="margin: 0px; padding:0px;">
    <icrt:AeSalesGuides sf1="publisher" objectType="Account" 
         objectId="{!Account.Id}" extraInfo="{!JSENCODE(Account.Name)}" 
         match="Role={!JSENCODE(SUBSTITUTE($UserRole.Name, ",", ""))},
              Type={!JSENCODE(SUBSTITUTE(Account.Type, ",", ""))},
              Industry={!JSENCODE(SUBSTITUTE(Account.Industry, ",", ""))}"/>
  </body>
</apex:page>

For other objects, adapt the Visualforce page code for the object you want to work with.

Click

Quick Save

to verify that there are no errors.

Step 2: Create a New Action for the Object

From the Setup menu, select the App Setup option for the object you want to work with. For example,

App Setup

Customize

Opportunities

Buttons, Links and Actions

Click

New Action

and add the Visualforce page created in Step 1.

Step 3: Enable Publisher Actions

Select

App Setup

Customize

Chatter

Settings

In the Publisher Actions section, check

Enable Publisher Actions

Step 4: Put the New Action on the Object Page

Select

App Setup

Customize

Page Layout

Opportunity

Click Edit.
Locate the newly-defined action in the Actions list.

Drag and drop items to the location within the Publisher Actions section. This is before the Post Action.

Save the layout.

Step 5: Verify

Verify the newly added action in the SFDC1 mobile app.

Select an opportunity.

Press the "+" button that brings up the publisher actions, which includes the "CE Process Apps" action.

Press

CE Process Apps

to display the Designer Visualforce page. It may take a few seconds to load.

You should see the list of guides that are marked to run on a mobile device.

List of guides that can be accessed in a smart phone

Choose one of those guides to see if it runs successfully.

Creating a Salesforce1 App

Create a Visualforce Tab

Add it to the Mobile Navigation menu.

Add a new tab and add the Visualforce page you just created.

Select Setup > Create
> Tabs
.

In the Visualforce Tabs section, click New
.

In the Visualforce Page drop-down list, select the page you created in the previous step.

In the Tab Label field, enter a label name. Note that, this label appears on the navigation menu in Salesforce1.

Click into the Tab Style field, and select some a style. The icon for this style appears as the icon for the page in the Salesforce1 navigation menu.

Click Next
.

Click Next
to accept the visibility defaults.

Deselect the Include Tab
checkbox so that the tab isn't included in any of the apps in the organization. You only want this tab to appear when users are viewing it on their mobile device.

Click Save
.

On the Custom Tabs screen in the Visualforce Tabs section, click Edit
next to the new tab that you created..

Add the new tab to the navigation menu. Here, it is added as a navigation menu item. It will instantly become available to Salesforce1 app users that have access to it.

Select Setup > Mobile Administration
> Mobile Navigation
.

Select the newly added tab and click Add
to move it over to the selected list in the right.