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

      • fin shelby

        Share this kinda educational information on Whatsapp sniffer and also use it for the best advanced features in sharing the data. Download Whatsappsniffer apk here.

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

  • Great and really helpful article! Adding to the conversation, providing more information, or expressing a new point of view…Nice information and updates. Really i like it and everyday am visiting your site..java training

  • Wow, this is really good. I had no clue so far that IONIC too can work with salesforece SDK. Nice Blog Post

    Thanks on behalf of Team TechnoBrains (www.technobrains.net)

  • Shahbaz Sharif
  • David King

    Thanks on behalf of Team Hypemedia (https://www.hypemedia.com.ng)

  • Why Telling You

    Awesome posts. your website is awesome. keep up the good work. thank you. free network monitoring tools

  • zubair hameed

    Great Blog With Full Information I Love This Blog Thanks To Sharing Keep It Up
    FL Studio Crack

    BlueSoleil Crack

    AnyDVD Crack

    VCE Exam Simulator Crack

    HMA Pro VPN Crack

  • Sajid

    Such a great site in the world, very helpful for me, thank you for sharing your great skills with us, keep it up.
    Stellar Phoenix Pro Crack

  • Sajid

    Such a great site in the world, very helpful for me, thank you for sharing your great skills with us, keep it up.
    SpyHunter 5 Crack

  • Sajid

    Such a great site in the world, very helpful for me, thank you for sharing your great skills with us, keep it up.
    Dr.Fone Crack

  • Can you please help me on how to achieve this? thanks

  • TargbaBenjamin
  • TargbaBenjamin
  • Hopeyemi

    Jay Z Is Being Sued For Sampling A Track Released 1969
    read more
    https://loadedmp3.com/jay-z-is-being-sued-for-sampling-a-track-released-1969/

  • Hopeyemi

    Jay Z Is Being Sued For Sampling A Track Released 1969Read more
    https://loadedmp3.com/jay-z-is-being-sued-for-sampling-a-track-released-1969/

  • Marmaris tekne turu olarak hizmetlerimiz, marmaris efes turu | Dalyan tekne turu | kleopatra plajı | marmaris pamukkale turu gibi ve daha fazla avantajlardan yararlanmak için bizimle iletişime geçebilirsiniz.

  • Çakıroğlu Nakliyat olarak verilen başlıca hizmetlerimizden bir kaçı, Asansörlü nakliyat | Ofis taşımacılığı | Piyano taşımacılığı | Buca evden eve nakliyat | Karşıyaka evden eve nakliyat | İzmir eşya depolama vb. işlemleri en kaliteli ve profesyonel şekilde müşterilerine sunmaktadır.

  • Opeyemi

    nice one here,a very useful information https://loadedmp3.com/lira-phakade/

  • CRACKS [2020]

    excellent work is done here. thanks for sharing…
    Spyhunter

  • Etimesgut oto kiralama bulunduğu konum itibariyle belli başlı müşteri potansiyeline sahip güncel araç kiralama firmasıdır.

    Etimesgut Oto Kiralama – Etimesgut Rent A Car
    Etimesgut ve çevre illerinde kiralama firmaları arasında en önde gelen acar grup bünyesinde kurulan etimesgut oto kiralama firması diğer kiralama firmalarına nazaran daha uygun fiyat avantajları ile fark yaratmaktadır.

    Etimesgut Araç Kiralama – Etimesgut Oto Kiralama
    Etimesgut ilçesinin kurulduğu alanın ilk çağlarda önce Hitit daha sonra da Frig uygarlıklarının topraklan içinde yer alındığı bilimsel bir gerçektir. Tarihçi Afif Erzen “İlkçağda Ankara” adlı eserinde, Ahi Mesud adlı yerde bulunan aslanların Frigya Aslanı olduğunu yazmakta ve ilk çağda bu yörenin adının Amaksis olduğunu belirtmektedir. Haritacı Kiepert de çizdiği haritalarda, Etimesgut ilçesinin bulunduğu bölgeyi Amaksiz olarak anar. Osmanlı haritalarında bu isim Amaksus ve Akmasus olarak geçmiştir.

    Etimesgut yöresi, Cumhuriyetin ilanından sonra Batı Trakya’dan gelen göçmen Türkler için 1924-25 yıllarında Atatürk’ün emri ile 50 haneli bir köy olarak kurulmuştur. 1928 yılında iskâna açılarak belde olarak yeniden yapılandırılmıştır. Ata’nın Etimesgut yöresine özel bir ilgisi vardı. Buraya haftada birkaç kez gelip at gezintileri yapar, halkla yıllık mahsuller hakkında konuşur hatta tarlalara kadar gidip çiftçilerden bilgi alırdı. Bölgede Atatürk zamanında yaptırılan Sağlık Merkezi, Devlet Hastanesi, PTT, hamam, çarşı, memur lojmanı gibi binalar halen varlığını sürdürmektedir.

    Etimesgut, kendisine bağlı 18 köy ile 1968 yılına kadar belde olarak kalmış, aynı yıl mahalle olarak yeniden kurulmuştur. 20 Mayıs 1990 gün ve 20523 sayılı Resmi Gazetede de yayınlanan 3644 sayılı Kanunla ilçe statüsü kazanmış, hemen ardından da 19 Ağustos 1990 tarihinde yapılan belediye başkanlığı seçimi ile Belediye teşkilatı kurulmuştur.

    İlçedeki kültür varlıklarına örnek teşkil eden Atatürk Çeşmesi 1928 yılından beri ayaktadır. 1925 yılında Mimar Ahmet Burhanetün tarafından yapılan Gazi Tren İstasyonu ile Atatürk’ün İstanbul’a gidiş ve gelişlerinde uğurlandığı Etimesgut Tren İstasyonu tarihi yapı özellikleriyle dikkat çekicidir. Etimesgut yöresine adını veren Ahi Mesud, Ahi Elvan gibi Türk büyüklerindendir. Ahi Elvan Hazretlerinin türbesi Elvanköy semtinde Elvanköy Camisi avlusundadır.

    İlçenin Eryaman bölgesinde bir mesire ve piknik yeri olan Göksu Parkı, tatil günlerinde Ankaralıların dinlenme yeridir. Ayrıca, Atatürk Orman Çiftliği, ilçe sınırlan içinde olup iyi bir dinlenme, piknik ve gezi alanıdır.

    Etimesgut Oto Kiralama – Etimesgut Filo Kiralama

    AHİ MESUD TÜRBESİ
    Etimesgut’a adını veren Ahi Mesud’un Bağlıca Mahallesi’nde bulunan mezarı da dönemin mimari özellikleri dikkate alınarak projelendirilerek ilçeye kazandırılmıştır.

    AHİ ELVAN AİLE YAŞAM, EĞİTİM VE SPOR MERKEZİ – Etimesgut Oto Kiralama

    Merkezde havuz, spor merkezleri, sauna, kreş ve halk kütüphanesi ile çeşitli sosyal ve kültürel donatılar hizmet vermektedir.

    TUĞRA PARKI – Etimesgut Oto Kiralama

    Parkta, geleneksel Türk motifleri, 11,5 metre yüksekliğinde kule olarak tasarlanmış ve üç tarafına üç ayrı tuğra yerleştirilmiş Tuğra Anıtı, Ayyıldızlı havuzlar, koşu yolu, fitness ve çocuk oyun alanı, kafeterya ve özel aydınlatma sistemleri yer almaktadır.

    https://www.etimesgutotokiralama.net/etimesgut-oto-kiralama/

  • Hafiz Muhammad Hasan

    Thank you for sharing a lot of useful information VideoPad Video Editor Registration Code

  • ab

    royasan CO Is A 30 Year Old Company And One Of Top Iranian Used Oil Recycling Plant Manufacturers , Oil Distillation Plant , Grease , Solvement 402 , Sulfurization ,Waste Engine Oil Distillation Plant Manufacturers And Other

  • kashif baba

    https://greencracks.com
    Crack torrent software is free here

  • hanaan virk

    https://fullycrack.org/fl-studio-crack-final-torrent-march-updated/
    FL Studio Full Crack is the software amazing and famous for audio workstation works. It’s a good music production tool globally. It is also known as the powerhouse of music tools. That tool FL Studio Torrent entirely helps to make the best music. Here is a great way to find the best way for different elements of music and composition. This has a new innovation. That improves music in addition to lighting. This application is possible to use in 3 distinct versions of MS Windows. This application FL Studio Keygen has a number of unique tools, including music and that’s 100% right.

  • Gistbased

    I am trying to run this with the latest version of ionic, but I get the following error:
    “TypeError
    Music Download

  • Meeno bhai is a very great person. e always love neature.
    https://crackshops.com/phpstorm-crack-torrent/
    https://4softpc.com/

  • Oliver Wright

    I needed help with my assignment, and i needed it quick. I dont normally shop for an essay, but this time around i had no other option as i was running out of time. I gave it a try, and the essay came out as perfect as my professor had hoped. Here https://essaywriter.org/ service simply one of the best online paper writing service.

  • Alat launched the Asron site. Dear customers and you users, you can buy all kinds of construction and industrial hardware in Asron online store, such as oil sheets, rebars, beams, black sheets, copper and aluminum, corner, studs, profiles, لیست قیمت ورق سیاه
    alloy and industrial sheets, galvanized, Types of wire cases, roll bolts, polycarbonate, etc.

  • yuvaraj singh

    Advanced Scrum Master training
    At Leanpitch, we believe in creating WoW (World of Work) experiences in our workshop and beyond. So our workshops are full of real life simulations and post-workshop support ensures you have help when you get started implementing concepts at your workplace.

  • yuvaraj singh

    Thanks for sharing
    Leanpitch provides online training in Advanced Scrum Master during this lockdown period everyone can use it wisely.
    Advanced Scrum Master Training Online

css.php