ForceJS is a client-side micro-library that makes it easy to integrate web or hybrid applications with Salesforce using OAuth and the Salesforce REST APIs.
I recently updated ForceJS to leverage ECMAScript 6. ForceJS is now available as an ECMAScript 6 module and can be installed from npm.
In this article, I’ll walk you through the simple steps to setup a ForceJS/ECMAScript 6 project, and build a simple web application that integrates with Salesforce.
Step 1: Set Up the Project
We’ll leverage npm, the node package manager, to install the libraries we need. Make sure Node.js is installed on your system.
- On the command line, create a directory for your project and navigate (cd) to that directory
- Type the following command to initialize your project (accept all the default values):
npm init
- Type the following command to install forcejs:
npm install forcejs --save-dev
- Type the following command to install an ECMAScript 6 toolchain:
npm install babel browserify babelify --save-dev
Current browsers don’t support all the ES6 features yet, so we have to use Babel to compile our ES6 code down to ES5. We’ll use ES6 modules in the sample app. So we also have to compile them down to ES5. Since ES5 doesn’t support modules natively, we need to use a third party module loader. We use Browserify here but you could also use webpack. - Open package.json using your favorite code editor. In the scripts section, add a script named compile to compile the ES6 application we write in the next step (app.js) down to ES5 using Babel and Browserify:
"scripts": { "compile": "browserify app.js -t babelify -o bundle.js", "test": "echo \"Error: no test specified\" && exit 1" }, - On the command line, type the following command to install the force-server development server:
npm install force-server -g
or (Mac):
sudo npm install force-server -g
Make sure you upgrade to the latest version (0.8) if you have an existing version of force-server installed on your system
Step 2: Create the Web Application
- In your project directory, create a file named app.js and implement it as follows:
import * as force from 'forcejs'; force.login() .then(() => force.query('SELECT Id, Name FROM Contact LIMIT 10')) .then(result => { let html = ''; result.records.forEach(item => html += `<li>${item.Name}</li>`); document.getElementById('list').innerHTML = html; });Code highlights:
- We use the ES6 import syntax to load the forcejs module
- force.login() is all you need to authenticate with OAuth
- force.login() is an asynchronous function that returns an ES6 promise. We use then() to specify what we want to do after a successful login. In this case we use force.query() to run a simple SOQL query.
- force.query() is also an asynchronous function returning an ES6 promise. We use then() again to specify what to do next. In this case, we build an HTML list.
- In your project directory, create a file named index.html and implement it as follows:
<html> <body> <ul id="list"></ul> <script src="bundle.js"></script> </body> </html>
We create the bundle.js file in the next step.
Step 3: Build and Run
- On the command line, type the following command to build the application:
npm run compile
- Type the following command to start the development server and load your application:
force-server
- Authenticate in the OAuth login window. You should now see a list of contacts.
You can sign up for a free developer environment here if you don’t already have one.
Work in Progress
This is work in progress. Comments and feedback are greatly appreciated.
http://jonsunsport.com/antrenman-malzemeleri.html.kalite,fiyat uygunlugu ve imalattan.
good blog thanks admin
very nice to blog admin
Sanat alanında somut, soyut alanlarda kişisel gelişiminizi güzel sanatlara hazırlık alanında tamamlayarak resim alanında yeteneğinizi gösterebilirsiniz.
Yağlı boyu, kuru boya, duvar çizimleri gibi bir çok alanda eserler ile gelişiminize tardımcı olmaktayız.
http://www.arkhesanat.com/
Hi Christophe – thanks for this.
Here’s a couple of fixes for the latest babelify (>7):
npm install –save-dev babel-preset-es2015
then in package.json:
“scripts”: {
“compile”: “browserify app.js -t [ babelify –presets [ es2015 ] ] -o bundle.js”,
},
Ubeyt Çağatay Rüya Avcısı Sanat Eğitim Merkezi Avcılar, Bahçeşehir, Bakırköy, Beylidüzü, Küçükçekmece, Büyükçekmece, Esenyurt, Güzel Sanatlara Hazırlık Bakırköy Resim Kursu haftanın yedi günü sizlere en kaliteli hizmeti sunmak adına 2 şubesi ile eğitimlerine devam etmektedir.Atöltelerimizi inceleyerek kalitemizi sizde değerlendirebilirsiniz.
http://ruyaavcisi.com/
Globalleşen dünyamızda teknolojinin ve internetin getirdiği yenilikler sonucunda, tercüme önemli bir hizmet sektörü haline gelmiştir. Tercüme hizmeti, artık insanların kolayca ulaşabileceği bir hizmet olmanın yanısıra, günümüzde hayatın her alanında ihtiyaç duyulan bir hizmettir. Taksim Tercüme , vita tercüme adı altında tüm dillere çevirileri gerçekleştirmektedir.
http://www.vitatercume.com/
Hi,
Nice article.but after putting in hours I am not sure why I am getting following error –
while doing gulp build – TypeScript error: app/app.ts(3,24): Error TS2307: Cannot find module ‘./force’.
Basically not able to import forcejs in my app.ts file
1. import * as force from ‘forcejs’;
2. import * as force from ‘./force’; – by adding the forcejs file to app folder
Can someone help me with same.? Thanks
Appreciate you sharing this blog.Really looking forward to read more. Much obliged.
Hadoop Training Institute in Noida
You have share the great info. I like your post. Thanks for sharing the good points.
Best B.Tech College in Noida
Very interesting post. This is my first-time visit here. I found so many interesting stuff in your blog especially its discussion. Thanks. Visit this link – https://gtacheatcode.com/gta-5-cheats-ps4/ and get latest gta 5 cheats ps4 and for main website click here – https://gtacheatcode.com/
VibesXclusive music download
Thanks for sharing this informative content ,
Leanpitch provides online training in Devops coaching during this lockdown period everyone can use it wisely.
Devops Online Training