New Salesforce Mobile SDK 2.3 with Cordova 3.5 Support

sfcdv

The Salesforce Mobile SDK allows developers to easily build Native (iOS and Android) and Hybrid (Cordova-based) applications on top of the Salesforce platform. Version 2.3 was released last week, and you can find the list of new and improved features in the official announcement blog post.

My own favorite new feature is Cordova 3.5 support for Hybrid apps. You can now build Salesforce mobile applications using your standard Cordova workflows, and using the latest versions of Cordova core and community plugins.

There are two options to create a Hybrid app using the Mobile SDK:

  1. Using the Mobile SDK’s own CLI
  2. Using the Cordova CLI, and installing the Salesforce Mobile SDK as a plugin
npm (the Node.js Package Manager) is required for both options, so make sure Node.js is installed on your system. If it’s not, you can install it from here.

Option 1: Using the Mobile SDK CLI

The Salesforce Mobile SDK CLI wraps the Cordova CLI: In addition to creating a Cordova project, it automatically sets up the Mobile SDK plugin and config file (bootconfig.json).

To create a Salesforce application using the Mobile SDK CLI:

  1. Install Cordova and the Force.com Mobile SDK for the platform of your choice. For example, for iOS:
    npm install -g cordova forceios
    

    On a Mac, you may have to use sudo:

    sudo npm install -g cordova forceios
    
  2. Create a new mobile application:
    forceios create
  3. Answer the prompts as follows (adjust the company id and organization name as needed):
    Enter your application type (native, hybrid_remote, or hybrid_local): hybrid_local
    Enter your application name: contact-force
    Enter the output directory for your app (defaults to the current directory): 
    Enter your company identifier (com.mycompany): org.coenraets.sample
    Enter your organization name (Acme, Inc.): Coenraets, Inc.
    Enter your Connected App ID (defaults to the sample app’s ID): 
    Enter your Connected App Callback URI (defaults to the sample app’s URI): 
    
    For a production application, you should create a Connected App in Salesforce and provide your own Connected App ID and Callback URI.
  4. Navigate (cd) to the project directory:
    cd contact-force
    
  5. Add some useful Cordova plugins (optional):
    cordova plugin add org.apache.cordova.console
    cordova plugin add org.apache.cordova.statusbar
    
  6. Build the project:
    cordova build
  7. Run the project. For example, for iOS, open the project (platforms/ios/contact-force.xcodeproj) in Xcode and run it in the emulator or on your iOS device.

Option 2: Using the Cordova CLI

To create a Salesforce application using the Cordova CLI:

  1. Install Cordova:
    npm install -g cordova
    

    On a Mac, you may have to use sudo:

    sudo npm install -g cordova
    
  2. Create a new application:
    cordova create contact-force org.coenraets.sample ContactForce
  3. Navigate (cd) to the project directory
    cd contact-force
    
  4. Add some useful Cordova plugins (optional):
    cordova plugin add org.apache.cordova.device
    cordova plugin add org.apache.cordova.console
    cordova plugin add org.apache.cordova.statusbar
    
  5. Add the Salesforce Mobile SDK plugin:
    cordova plugin add https://github.com/forcedotcom/SalesforceMobileSDK-CordovaPlugin
    
  6. Create the Salesforce Mobile SDK config file (bootconfig.json) in the www folder of your project:
    {
      "remoteAccessConsumerKey": "3MVG9Iu66FKeHhINkB1l7xt7kR8czFcCTUhgoA8Ol2Ltf1eYHOU4SqQRSEitYFDUpqRWcoQ2.dBv_a1Dyu5xa",
      "oauthRedirectURI": "testsfdc:///mobilesdk/detect/oauth/done",
      "oauthScopes": [
        "web",
        "api"
      ],
      "isLocal": true,
      "startPage": "index.html",
      "errorPage": "error.html",
      "shouldAuthenticate": true,
      "attemptOfflineLoad": false
    }
    

    For a production application, you should create a Connected App in Salesforce and provide your own Connected App ID and Callback URI.
  7. Add a platform. For example to add iOS:
  8. cordova platform add ios
    
  9. Build the project:
    cordova build ios
  10. Run the project. For example, for iOS, open the project (platforms/ios/ContactForce.xcodeproj) in Xcode and run it in the emulator or on your iOS device

Sample Application

contact-force

After you created an application using one of the options above, follow the steps below to install a simple application that demonstrates how to access your Salesforce data in a Mobile SDK application:

  1. Delete the contact-force/www folder in the generated project folder.
  2. Clone this GitHub repository, or click here to download the sample application Zip file, and unzip the file anywhere on your file system.
  3. Copy the www folder from the GitHub project to the contact-force/www folder in your own project folder.
  4. Rebuild the project and run it
This project uses ForceJS instead of the ForceTK library that ships with the Mobile SDK. One difference between these two libraries is that ForceJS doesn’t have a dependency on jQuery.

To solve the iOS7 status bar issue where the header of your application collides with the iOS status bar, make sure you installed the status bar plugin as described above, and add the following preferences to your project’s config.xml:

<preference name="DisallowOverscroll" value="true"/>
<preference name="StatusBarOverlaysWebView" value="false" />
<preference name="StatusBarBackgroundColor" value="#ffffff" />
<preference name="StatusBarStyle" value="default" />

Source Code

The source code for this sample application is available in this repository on GitHub.

Resources

  • Julián

    Great post, One quick question, I’m starting out with Ionic, how would you change the second method to also use ionic for a hybrid app?

    • Christophe Coenraets

      (1) Create your Ionic app with the Ionic CLI, (2) install the Salesforce Mobile SDK (cordova plugin add https://github.com/forcedotcom/SalesforceMobileSDK-CordovaPlugin), and (3) create bootconfig.json in the www folder.

      • @altius_rup

        Hi Chris,
        Have you a suggestion for creating a mobile app with Ionic for the UI (View) and SmartSync+Salesforce Mobile SDK for the rest (Model and Controller) ?
        Re. the Controller : Ionic requires Angular, whereas SmartSync relies on BackBone so …

        Is there a way to use Ionic+Angular+SDK+SmartSync+Backbone ?

        Hope you can help,
        Rup

      • chuba

        Hi Christophe,
        I have created an Ionic app and added the cordova plugin but is it necessary to add the bootconfig.json file?. In my app I have used inappBrowser for the authentication.

  • Chris

    Very nice post, thanks !
    I’m new with cordova and salesforce and i’m facing a problem. It seems the Salesforce OAuth plugin has not been installed.
    I got a class not found exception on “com.salesforce.androidsdk.phonegap.SalesforceOAuthPlugin”. Any idea on how to solve this ?

    • Akhilesh Gupta

      How did you create your Android SDK project? Did you use the forcedroid npm tool: npmjs.org/package/forcedroid

      • Chris

        Fixed ! Thank you anyway.

    • Urahara

      @Chris How to solve that issue ??

  • the information is play the blessing role for my recent project.

  • pls help my ı am dont understand

  • Nick Jemis

    Hi, Christophe, I’ve never delt with Cordova so far and the company we work with uses some other platforms (find here). But I see the advantages of Cordova and it’s interesting to get to know it better. Thanks for the post.

  • Tyler

    What are the advantages/disadvantages of both options? If I am building an app to run on iOS and Android that leverages visualforce which option should I choose?

  • Good work put ı am understand %100 / 100 ı reat ın translaters thanks for work

  • sachin

    Hi,I am using windows,I want to build application for android using cordova cli ,i added android platform,build successfully also…but it is not showing any contact list as like as ios(showing only heading(contacts)),pls help me to connect salesforce in droid.

  • Formalarımızda kullandığımız kumaş; birinci sınıf mikro-interlok olup; esnek-fit, anti-bakteriyel, termo-balans ve hemen kuruma özelliğine sahiptir. Futbol maçlarınızda size hareket özgürlüğü sunan bu formalar; günlük olarak giyilebilecek kadar şık tasarlanmıştır. Forma Modellerimiz özel dikim ve Dijital baskılı olarak iki tür üretilmektedir.
    Firmamızın en fazla üretim yaptığı, spor çoraplarında kullandığımız ürünler: pamuk ,koton, polyester, naylon ve likradır. Anti-bakteriyel içermektedir.

  • So how could i fix this to see the app running as in browser ?

  • Ema Watson

    Excellent written goods from you!In Fact I obtained a valuable data concerning my studies and knowledge.
    Tedwed

  • sameish

    I am trying the second part where you leverage ForceJS instead of ForceTK and it will not bring up the auth/login screen. It just pulls up an empty table w/ “Salesforce Contacts” in the header. What am I doing wrong? I’ve followed this and the trailhead and it will not let me log in. Thanks!

  • wingsio

    Your article is easy to understand, the simple way of communicating is accessible to the majority of people. I will keep track of your posts regularly.
    wingsio

css.php