JSforce is a JavaScript Library utilizing Salesforce’s API, It works both in browser and with Node.js.
Unlike other Salesforce API libraries, it is intended to give integrated interface both server-side and client-side apps, so you don’t have to rewrite similar logics with different libraries only for running in different environment, which pretty much saves you a lot of time – How Awesome, Right ?
And The best part is it supports :
REST API (SOQL, SOSL, CRUD, Describe, etc.)
Apex REST
Analytics API
Bulk API
Chatter API
Metadata API
Streaming API
Tooling API
And Addition to that, sometimes you don’t even have to write apex classes (which you will see in the following demo). Believe it or not, it is so much fun programming with JSforce.
The following demo is only applicable to Visualforce.
So, Let's get started!!
Step 1: Include Scripts
Let's download the jsforce file from here and upload it onto your static resources and call it using this :<apex:includeScript value="{!URLFOR($Resource.JSforce)}"/>
Or else
The easy part, just include the cdn like this :<script src="//cdnjs.cloudflare.com/ajax/libs/jsforce/1.4.1/jsforce.min.js"></script>
Step 2: Get Data With JSForce
Create a Visualforce page and copy and paste the code below onto the Visualforce page you created and save, and your whole code should look similar to this...
What that code does is .. It queries for accounts in the JSforce way. But you might not be able to see any data on your page, this is because it says consle.log(res) which just logs the results. So to see query result –> Right Click on your page –> Click Inspect Element –> Console
So Here you can see the array of results returned by the query you did using JSforce … Wohooo!!
Step 3: Create Table
Now, Let's get the results onto the page with the following code… Let's create a div on the page as follows
And, Write the following code after the console.log(res) statement and save…
So here we can see the results we Queried for using JSforce, on the page in a tabular format.
So this looks flat with no styling . So lets add some features to the table like pagination, search and number of records per page. For that we are gonna use a simple Jquery Plugin Called Jquery DataTables …
Step 4 & the Final Step: Add The Datatable Plugin
Add the below code after the <apex:page> tag
IMPORTANT: Then declare jQuery no conflict right after the beginning of your script tag
and add the following syntax after the “tab variable” after the for loop and Save
Your Final code looks similar to this:
And Your page appears like this.
Congratulations !! You not only learned how to use JSForce and Use The DataTable plugin... But also you did the whole thing without any Apex Class, Just Html and Javascript Style… Awesome Right?
If you like the content, give it some sharing :)