Sample Ionic 2 Application with a Salesforce Back-End

In my previous post, I shared an Employee Directory application built with Ionic 2.

In this post, I share another Ionic 2 sample application: ContactManager is similar to EmployeeDirectory, but instead of using in-memory data, it uses the Salesforce REST APIs to retrieve contacts from Salesforce.


If you don’t have a Salesforce account to run this application, you can sign up for a free developer account here. It takes less than a minute.

Instead of its version 1 custom module infrastructure, Angular 2 now uses ECMAScript 6 modules, which streamlines the integration with third-party libraries: no need for Angular wrappers or Angular-specific versions of third-party libraries anymore. For example, the latest version of the forcejs OAuth and REST library for Salesforce is implemented as an ECMAScript 6 module, and that’s all you need for a natural and elegant integration with Angular 2. More information on the latest version of forcejs is available here.

Here is a quick look at the ContactService module that provides the data to the application:

import * as force from 'forcejs';

export let findAll = () => force.query(
        `SELECT Id, Name, Title, Phone, MobilePhone, Email
         FROM Contact LIMIT 20`);

export let findByName = (name) => force.query(
        `SELECT Id, Name, Title, Phone, MobilePhone, Email
         FROM Contact WHERE name LIKE '%${name}%' LIMIT 20`);

ECMAScript 6 Code Highlights:

  • Use of Modules: ContactService itself is defined as a module exporting two functions (findAll() and findByName()). ContactService also leverages (imports) the forcejs module.
  • Template strings: ES6 multi-line template strings are used to write the SOQL statements cleanly over multiple lines, and insert query parameters without the need for string concatenation.
  • Promises: findAll() and findByName() return an ES6 promise (the return value of force.query()).
  • Block-scoped let variables, arrow functions, etc.

Check it Out: Run the Hosted Version

Click here to run a hosted version of the application in your browser.

You may have to explicitly allow the OAuth login window in your browser’s popup blocker the first time you run the application.

Build and Run Locally

  1. Open a command prompt and type the following command to install Ionic 2 alpha:
    npm install -g ionic@alpha
  2. Type the following command to create a version 2 project called ContactManager:
    ionic start ContactManager --v2
  3. Navigate to your project directory:
    cd ContactManager
  4. Install the forcejs OAuth and REST library for Salesforce:
    npm install forcejs --save-dev
  5. Replace www with the www folder of this repository
  6. Type the following command to transpile the application, start the development server, and load the application in your default browser:
    ionic serve

Run on Device using the Mobile SDK

  1. On the command prompt, make sure you are in your project (ContactManager) directory and type the following command to add the Salesforce Mobile SDK plugin:
    cordova plugin add
  2. 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": [
      "isLocal": true,
      "startPage": "index.html",
      "errorPage": "error.html",
      "shouldAuthenticate": true,
      "attemptOfflineLoad": false
  3. Type the following command to build the project:
    ionic build ios
  4. 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.

    If you get a ‘bitcode’ related error while running your project in XCode, disable bitcode for your target (see this screenshot)

21 Responses to Sample Ionic 2 Application with a Salesforce Back-End

  1. Garry Lowther October 28, 2015 at 1:24 pm #

    Great article. If there are any Ionic developers out there who can program a version of this to work with the TriSys API (instead of SF), then we would like to hear from them:

  2. forma imalatı November 17, 2015 at 7:27 am #

    Fabrics we use in our form; The first-class micro-interlock; flex-fit, anti-bacterial, it has a thermo-balance, and immediately drying. This gives you the freedom to move your soccer jerseys of the match; It is designed stylish enough to be worn on a daily basis. Our models are produced in two types as my special jerseys and other digital printed.

  3. Juri November 18, 2015 at 12:36 pm #

    Did try writing this app in TypeScript? I have some issues in getting it to run.
    (Warning: webpack + Ionic 2 newbie, so that might be the reason)

  4. rkveni November 19, 2015 at 5:35 am #

    could you give me sample examples for ionic framework with sourcecode?

  5. Rebecca November 21, 2015 at 1:42 am #

    Thanks for sharing this important article, it is really very interesting to work in TypeScript.

  6. sohbet December 8, 2015 at 8:36 pm #

    oldu oldu oldu gardas.

  7. çelik raf January 1, 2016 at 2:21 pm #

    It is a really an instructive peace of article.

  8. Bakırköy Resim Kursu January 11, 2016 at 4:14 pm #

    Sanat insanın ruhunu aydınlatmaktadır. Bakırköy resim kursu ile sanat eserleri üretmek elinizde çok ucuz fiyatlara uygun ödeme koşulları ile sizlere hizmet vermekteyiz.

  9. Bakırköy Resim Kursu February 2, 2016 at 5:48 am #

    Kaliteli ve ayrıcalıklı bir kurum için bizi seçmenizi tavsiye ederiz. Neden mi çünkü tarafımızca eğitim alanların tamamı memnüniyetimize referans olabilir. Sizler için geçmişimiz önemliyse gelip atölyemizi inceleyebilirsiniz.
    Bakırköy resim kursu ile kalitenin farkına bizlerle varacaksınız.

  10. Mischa February 8, 2016 at 10:40 am #

    Hi there,

    It seems that your tutorial does not work any more with the latest Ionic 2.

    for example, it seems that the app/app.js is now in the root, while in your app its still in the www/app/app.js



    • kaushik ray July 10, 2016 at 3:52 pm #

      were you able to create it?

      • khalid April 7, 2017 at 10:53 am #

        Please any idea about this issue

  11. sathya March 22, 2016 at 8:04 am #

    the blog is very interesting to read the ionic2 salesforce oauth rest. thank you for sharing the blog with us.

    • khalid April 7, 2017 at 10:55 am #

      Hi please did u run this app on your external device. I got many errors with that. which the version of salesforce mobile SDK you are using.
      Best Regards

  12. propchill May 19, 2016 at 7:34 am #

    a luxury apartments in Pune private property in the range there is no base. Generally, an OC is given in the wake of doing careful check of power, water and sewerage association. In any case, shockingly kept with or without these guidelines offered OC to a couple of pads in. A few designers of pads available to be purchased have finished their work however can’t hand over pads as there are no interior streets, water and power supply and so forth.
    Real Estate Developers In Pune

  13. khalid March 30, 2017 at 6:21 am #

    no resource found matches the given name ( at ‘icon’ given name ‘@drawable/sf__icon’)
    this is the error while importing the project into android studio.
    It works fine in localhost.
    cordova 6.5.0
    ionic 2.2.2
    forcedroid version 5.1.0

  14. Hshubham June 1, 2017 at 3:22 am #

    Can you create a Contact App using Ionic 2 and smartsync

  15. Hshubham June 1, 2017 at 6:30 am #

    Can you create a Contact App using Ionic 2 and smartsync

  16. CIIT Noida April 21, 2018 at 2:33 am #

    This is complete package. You write briefly in this article. These both blog entry totally informative for readers.

    Hadoop Training Institute in Noida

  17. yuvaraj singh November 23, 2020 at 5:45 am #

    Informative content , Great work
    To crack scrum master interview : Scrum Master Interview Questions

  18. yuvaraj singh December 22, 2020 at 6:29 am #

    Thanks for sharing this informative content , Great work
    Leanpitch provides online training in Devops coaching during this lockdown period everyone can use it wisely.
    Devops Online Training

Leave a Reply