Salesforce and Application Integration > Running a Guide within a Salesforce Organization > Connected Apps Guide Integration with Salesforce1 Mobile Applications
  

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:
The integration requires the following steps:
  1. 1Create a Visualforce page and enable it for Mobile Apps.
  2. 2Create a new Action for the object in Salesforce.
  3. 3Enable Publisher actions in Salesforce.
  4. 4Put the new Action on the Salesforce object page.
  5. 5Verify the Mobile App runs as expected.

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

  1. 1Log in to your Salesforce organization as a system administrator.
  2. 2From the Setup menu, selectApp Setup > Develop > Pages.
  3. 3Click New.
  4. 4Enter a label, for example, aeOpportunityGuideMobileEnabled.
  5. 5Check Available for Salesforce mobile apps.
  6. 6Add the Visualforce markup as shown here:
    7. 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.
  7. 7ClickQuick Save to verify that there are no errors.

Step 2: Create a New Action for the Object

  1. 1From 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.
  2. 2Click New Action and add the Visualforce page created in Step 1.

Step 3: Enable Publisher Actions

  1. 1Select App Setup > Customize > Chatter > Settings.
  2. 2In the Publisher Actions section, check Enable Publisher Actions.

Step 4: Put the New Action on the Object Page

  1. 1Select App Setup > Customize > Page Layout > Opportunity.
  2. 2Click Edit. Locate the newly-defined action in the Actions list.
  3. 3Drag and drop items to the location within the Publisher Actions section. This is before the Post Action.
    4. Drag to the location
    And then drop it at its location
  4. 4Save the layout.

Step 5: Verify

Verify the newly added action in the SFDC1 mobile app.
  1. 1Login to the mobile app.
  2. 2Select an opportunity.
    3. Select an opportunity in a smart phone
  3. 3Press the "+" button that brings up the publisher actions, which includes the "CE Process Apps" action.
    4. New Opportunity page in a smart phone
  4. 4Press CE Process Apps to display the Designer Visualforce page. It may take a few seconds to load.
    5. Visualforce page within a smart phone
    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
  5. 5Choose one of those guides to see if it runs successfully.
    6. Guides thata can run in a smart phone

Creating a Salesforce1 App

  1. 1Create a Visualforce Tab
  2. 2Add it to the Mobile Navigation menu.
  3. 3Add a new tab and add the Visualforce page you just created.
    1. aSelect Setup > Create > Tabs.
    2. bIn the Visualforce Tabs section, click New.
    3. cIn the Visualforce Page drop-down list, select the page you created in the previous step.
    4. dIn the Tab Label field, enter a label name. Note that, this label appears on the navigation menu in Salesforce1.
    5. eClick 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.
    6. fClick Next.
    7. gClick Next to accept the visibility defaults.
    8. hDeselect 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.
    9. iClick Save.
    10. jOn the Custom Tabs screen in the Visualforce Tabs section, click Edit next to the new tab that you created..
      11. Custom tab page
  4. 4Add 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.
    1. aSelect Setup > Mobile Administration > Mobile Navigation.
    2. bSelect the newly added tab and click Add to move it over to the selected list in the right.
      3. Setting up mobile navigation
    3. cClick Save.
  5. 5When your Salesforce1 users log in, they'll see the CE Opportunities menu item in the navigation menu.
  6. 6Test it out by opening the app. You should be able to open your side menu in Salesforce1 and see your Visualforce Tab in this menu
    7. Note: You might need to clear the cache for the app if the page does not display immediately.