Sample Application with Ionic 2 and Salesforce

December 8, 2016 in Angular 2, Ionic, Salesforce

A few weeks ago, I shared a version of the DreamHouse sample application built with the latest release candidate of Ionic 2. The app came with two interchangeable implementations of the data services: Mock and REST. Since then I’ve been working on ForceJS 2, a JavaScript library for the Salesforce REST APIs. ForceJS 2 is now built on ECMAScript 6, uses modules and promises, and integrates seamlessly with Angular 2 and Ionic 2.

In this post, I’ll share the same DreamHouse application using a Salesforce back-end, as an example of using ForceJS 2 to access Salesforce from an Ionic 2 application. The application is built with the Salesforce Mobile SDK and the latest release candidate of Ionic 2

Watch the video:

Source Code and 5 Minute Install

The source code and installation instructions are available in this GitHub repository.

  • D Riley

    Thank you for the example. I followed the readme.md (short of ionic cordova install, already installed) instructions and got the following error. Thoughts?
    ionic serve

    …[12:26:36] ionic-app-scripts 0.0.45
    [12:26:37] watch started …
    [12:26:37] build dev started …
    [12:26:37] clean started …
    [12:26:37] clean finished in 1 ms
    [12:26:37] copy started …
    [12:26:37] transpile started …
    events.js:160
    throw er; // Unhandled ‘error’ event
    ^

    Error: listen EADDRINUSE 0.0.0.0:53703
    at Object.exports._errnoException (util.js:1026:11)
    at exports._exceptionWithHostPort (util.js:1049:20)
    at Server._listen2 (net.js:1257:14)
    at listen (net.js:1293:10)
    at net.js:1403:9
    at _combinedTickCallback (internal/process/next_tick.js:77:11)
    at process._tickCallback (internal/process/next_tick.js:98:9)
    at Module.runMain (module.js:606:11)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)…

    Ionic version 2.1.13
    npm version 3.10.8
    node version v6.9.1

    • khalid

      @D R
      is there any problem using ionic 2.2.2 with salesforce. I encountered many problems.
      I can’t event display info using salesforce Mobile SDK with ionic. which versions you are using please.

  • Oktay Seo

    Çocuklar klasik bale ve dans eğitimi ve modern dansın eğlenceli ve enerjik egzersizleriyle vücut becerilerini , esneklik kazanacaklar.

    İçimizdeki dans aşkını yağmur, kar hiçbir şey dindiremez. Çünkü dans etmeyi seviyoruz ve bu işi yaparken çok mutluyuz. Bahçeşehir bale kursu eğitimi, sağlıklı, güçlü bir bünyeye sahip olabilir, bağışıklık sisteminizi güçlendirebilirsiniz. Öğrencilerin duruşu, yürüyüşünü kendini ifade edebilme tarzını geliştirebilirsiniz. Fiziksel estetik sağlar. Ücretsiz deneme eğitimi için arayabilirsiniz.

    http://ruyaavcisi.com/bahcesehir-bale-kursu/

  • Pingback: Ionic V2 Stater App using Salesforce SDK – Vivek Deepak()

  • khalid

    Mr. Christophe, Can you share updates please.
    I see Ionic 2.2.2 can’t work with Salesforce Mobile SDK . Can you tell us please tools version to use.
    I see even there is no adress to contact you. we are really stuck and wewant to know if it is possible to work with ionic 2 using Salesforce SDK.
    Best Regards

  • Daniel Heller

    Very nice post. I absolutely appreciate this site.Keep it up!

    https://www.writemyessayz.co/

  • https://www.korunemlak.com.tr/satilik-daire
    kayseride satılık daire ev ilanlarına ulaşmak artık çok kolay en geniş ve güncel portföy listemizle hizmetinizdeyiz.

  • Kanav

    Hi Christophe,

    I am trying to run this with the latest version of ionic, but I get the following error:
    “TypeError: AppScripts.serve is not a function”. Can you please help?

    • Kanav

      Hi Christophe,

      I was able to get this to work, however now I’m facing some issues with App performance:
      1) On the Property and Broker List views, the images take some time to load
      2) On the Property and Broker Detail pages, the data placeholders load first, followed by a slight delay, and then the actual Data loads.

      Would you have any recommendations on getting around this please?

      Thanks!

    • Hristo

      try this: npm install –save-dev @ionic/app-scripts@latest

  • Vijay Chauhan

    Hello,

    I am trying to run this with the latest version of ionic, but I get the following error:
    “TypeError: AppScripts.serve is not a function”. Can you please help?

    • Hristo

      npm install –save-dev @ionic/app-scripts@latest

      • Vijay Chauhan

        Thanks

  • Ravi Haibatti

    hi sir,
    when i login through the salesforce in app i am getting error cannot get oauthcallback.html. Can you please help about this issue.

    thanks

  • Rafael Delaflor Chumpitaz

    hi

  • Prashant Kumar Srivastava

    Hi Christophe, I have an issue in authentication part. After authentication, my callback is not being called. I have done it as following:

    let appId = ‘value of Consumer Key’;
    let loginURL = ‘https://login.salesforce.com/’;
    let oauthCallbackURL = ‘http://localhost:8100/callback’;

    let oauth = OAuth.createInstance(appId, loginURL, oauthCallbackURL);
    console.log(‘=============oauth: ‘, oauth)

    oauth.login().then(oauthResult => {
    //this part is not called after authentication
    DataService.createInstance(oauthResult);
    console.log(“Logged Into Salesforce Successfully”);
    });

    In pop-up URL i can see the access token but not able to use that because it is not going to callback part. Please suggest where i am missing. I am able to login through pop-up, but pop-up is not closing after successful/unsuccessful authentication.

  • scigazer

    Hi Christophe,

    I tried to run your app but I got this error:

    Runtime Error
    webpackJsonp is not defined

    Stack
    ReferenceError: webpackJsonp is not defined at http://localhost:8101/build/main.js:1:1

    Can you please advise how to resolve this? Thanks!

css.php