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.

    • Kanav

      Hi Prashant,

      I am facing the same issue. My Auth callback is not being called. Were you able to find a solution?

      • Gautam Choudhary

        Hi Prashant,

        Any solution?

    • Gautam Choudhary

      Hi Prashant,
      I am facing same issue. If you find any solution please guide.

      • Prashant Kumar Srivastava

        Hi Gautam,
        I have resolved this issue by placing oauthcallback.html in root directory(in the same directory of index.html). You can find this file under app directory of this git repository.

        Content of this file is:

        var event = new CustomEvent(“oauthCallback”, {“detail”: window.location.href});
        window.opener.document.dispatchEvent(event);
        window.close();

        • Gautam Choudhary

          Thanks Prashant for you response. It’s working find with iOS but not with android.

          regards,
          Gautam

          • Prashant Kumar Srivastava

            You need this authcallback.html for desktop browsers. For mobile devices only callbackURL in your JS should match to the callbackURL mentioned at salesforce connected app(I am not sure, but make sure your callbackURL is same at both places).

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

    • Kanav

      Hi @scigazer:disqus . Im facing the same issue. Were you able to resolve it?

      • Jacky Wang

        Hi Kanav

        Have u find the soltion about this problem?

  • Dibakar Sahoo

    Hi, I am Dibakar, working in a marketing team. We are looking for a salesforce influencer, who is technically strong and engaged in real paid reviews on salesforce related third party products.
    In case, you are interested please send your details like site URL, review links already done, site traffic and price per review. Looking forward for an early response.
    Thanks. Dibakar

  • Damny
  • Devesh Agarwal (IN)

    Hi All,

    Can anyone please help me. On running this app in the android emulator, I see a run time error, but no more info. The home screen opens to this error and the popup for login does not open. After the run time error occurs, the logs show this:

    [17:52:47] console.log: Angular 2 is running in the development mode. Call enableProdMode() to enable the production
    mode.
    [17:52:48] console.warn: Native: deviceready did not fire within 2000ms. This can happen when plugins are in an
    inconsistent state. Try removing plugins from plugins/ and reinstalling them.
    [17:52:48] console.log: DEVICE READY FIRED AFTER 3149 ms

    After this the properties page and others don’t open due to salesforce not being logged in.

    Any help would be appreciated.

  • ABDQUDUS DAMILARE
  • Ayo Adekola

    Thanks .

  • CIIT Noida

    Thanks for sharing this amazing post with us.

    Hadoop Training Institute in Noida

    Best Hadoop Training in Noida

  • Devesh Agarwal (IN)

    Hi Christophe,

    I want to call the salesforce login at a different point in my app. This is after 3-4 pages. My app is using Angular 2 and Ionic. Can you please help me on how to achieve this? On calling the login function in oauth later, I get the following error:

    TIMING com.salesforce.oauth:getAuthCredentials failed

  • Dinesh Kumar

    Very useful article. We are really thankful for this article.visit,
    mobile
    app development     for new techniques for boost your business.

css.php