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)
  • 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:

  • 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.

  • 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)

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

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

  • oldu oldu oldu gardas.

  • It is a really an instructive peace of article.

  • 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.

  • 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.

  • Mischa

    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

      were you able to create it?

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

  • 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