Skip to content

Commit

Permalink
Added RemoteTK
Browse files Browse the repository at this point in the history
  • Loading branch information
Pat Patterson committed Oct 1, 2012
1 parent 026cfcc commit 774a837
Show file tree
Hide file tree
Showing 4 changed files with 610 additions and 7 deletions.
45 changes: 38 additions & 7 deletions README.markdown
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
Force.com JavaScript REST Toolkit
=================================

This minimal toolkit allows JavaScript in Visualforce pages to call the Force.com REST API either via the Ajax Proxy (in the case of web apps) or directly (from a PhoneGap app), providing an easy-to-use JavaScript wrapper.
This minimal toolkit allows JavaScript in Visualforce pages to call the Force.com REST API in a number of different ways.

Background
----------

Due to the [same origin policy](http://en.wikipedia.org/wiki/Same_origin_policy), JavaScript running in Visualforce pages may not use [XmlHttpRequest](http://en.wikipedia.org/wiki/XMLHttpRequest) to directly invoke the REST API, since Visualforce pages have hostnames of the form abc.na1.visual.force.com, and the REST API endpoints are of the form na1.salesforce.com.

We can work around this restriction by using the [AJAX Proxy](http://www.salesforce.com/us/developer/docs/ajax/Content/sforce_api_ajax_queryresultiterator.htm#ajax_proxy). Since the AJAX proxy is present on all
Visualforce hosts with an endpoint of the form https://abc.na1.visual.force.com/services/proxy, our Visualforce-hosted JavaScript can invoke it, passing the desired resource URL in an HTTP header.
The RemoteTK Visualforce Component (comprising RemoteTK.component and RemoteTKController.cls) provides an abstraction very similar to the REST API, implemented via `@RemoteAction` methods in the component's controller. The advantage of this mechanism is that no API calls are consumed. A disadvantage is that upsert is not currently implemented.

Alternatively, to host JavaScript outside the Force.com platform, we can deploy a simple PHP proxy to perform the same function as the AJAX proxy.
Alternatively, the ForceTK JavaScript library works around the same origin restriction by using the [AJAX Proxy](http://www.salesforce.com/us/developer/docs/ajax/Content/sforce_api_ajax_queryresultiterator.htm#ajax_proxy) to give full access to the REST API. Since the AJAX proxy is present on all
Visualforce hosts with an endpoint of the form https://abc.na1.visual.force.com/services/proxy, our Visualforce-hosted JavaScript can invoke it, passing the desired resource URL in an HTTP header. A drawback here is that using the REST API, even from a Visualforce page, consumes API calls.

To host JavaScript outside the Force.com platform, we can deploy a simple PHP proxy to perform the same function as the AJAX proxy.

[PhoneGap](http://www.phonegap.com/) provides a way for HTML5/JavaScript apps to run as native applications; in this configuration a proxy is not required - the toolkit simply provides a convenient abstraction of the REST API.

Expand All @@ -23,10 +25,39 @@ The toolkit uses [jQuery](http://jquery.com/). It has been tested on jQuery 1.4.
Configuration
-------------

You must add the correct REST endpoint hostname for your instance (i.e. https://na1.salesforce.com/ or similar) as a remote site in *Your Name > Administration Setup > Security Controls > Remote Site Settings*.
RemoteTK requires no configuration.

ForceTK requires that you add the correct REST endpoint hostname for your instance (i.e. https://na1.salesforce.com/ or similar) as a remote site in *Your Name > Administration Setup > Security Controls > Remote Site Settings*.

Using RemoteTK in a Visualforce page
------------------------------------

Add RemoteTKController.cls and RemoteTK.component to your org by creating an Apex Class and a Component and pasting in the respective content, pasting the files into a [Force.com IDE](http://wiki.developerforce.com/page/Force.com_IDE) project, or by using the [Force.com Migration Tool](http://wiki.developerforce.com/page/Migration_Tool_Guide).

Your Visualforce page will need to include the component, then create a client object, passing a session ID to the constructor. An absolutely minimal sample is:

<apex:page>
<!-- Include the RemoteTK component -->
<c:RemoteTK />
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" />
<script type="text/javascript">
// Get a reference to jQuery that we can work with
$j = jQuery.noConflict();
// Get an instance of the RemoteTK client
var client = new remotetk.Client();
client.query("SELECT Name FROM Account LIMIT 1", function(response){
$j('#accountname').html(response.records[0].Name);
});
</script>
<p>The first account I see is <span id="accountname"></span>.</p>
</apex:page>

A more fully featured sample is provided in [RemoteTKExample.page](Force.com-JavaScript-REST-Toolkit/blob/master/RemoteTKExample.page).

Using the Toolkit in a Visualforce page
---------------------------------------
Using ForceTK in a Visualforce page
-----------------------------------

Create a zip file containing app.js, forcetk.js, jquery.js, and any other static resources your project may need. Upload the zip via *Your Name > App Setup > Develop > Static Resources*.

Expand Down
187 changes: 187 additions & 0 deletions RemoteTK.component
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
<!--
Copyright (c) 2011, salesforce.com, inc.
All rights reserved.

Redistribution and use in source and binary forms, with or without modification, are permitted provided
that the following conditions are met:

Redistributions of source code must retain the above copyright notice, this list of conditions and the
following disclaimer.

Redistributions in binary form must reproduce the above copyright notice, this list of conditions and
the following disclaimer in the documentation and/or other materials provided with the distribution.

Neither the name of salesforce.com, inc. nor the names of its contributors may be used to endorse or
promote products derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED
WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION)
HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
POSSIBILITY OF SUCH DAMAGE.
-->
<apex:component controller="RemoteTKController">
<script>
var remotetk = window.remotetk;

if (remotetk === undefined) {
remotetk = {};
}

if (remotetk.Client === undefined) {
function unescapeHTML(input) {
var y = document.createElement('textarea');
y.innerHTML = input;
return y.value;
}

function handleResult(result, callback, error, nullok) {
if (result) {
result = JSON.parse(unescapeHTML(result));
if ( Array.isArray(result) && result[0].message && result[0].errorCode ) {
if ( typeof error === 'function' ) {
error(result);
}
} else {
callback(result);
}
} else if (typeof nullok !== 'undefined' && nullok) {
callback();
} else {
error([{ message : "Null return from action method","errorCode":"NULL_RETURN"}]);
}
}

/**
* The Client provides a convenient abstraction similar to the Force.com
* REST API, allowing JavaScript in Visualforce pages access to data
* without consuming API calls.
* @constructor
*/
remotetk.Client = function(){
}

/*
* Completely describes the individual metadata at all levels for the
* specified object.
* @param objtype object type; e.g. "Account"
* @param callback function to which response will be passed
* @param [error=null] function to which jqXHR will be passed in case of error
*/
remotetk.Client.prototype.describe = function(objtype, callback, error) {
RemoteTKController.describe(objtype, function(result){
handleResult(result, callback, error);
});
}

/*
* Creates a new record of the given type.
* @param objtype object type; e.g. "Account"
* @param fields an object containing initial field names and values for
* the record, e.g. {:Name "salesforce.com", :TickerSymbol
* "CRM"}
* @param callback function to which response will be passed
* @param [error=null] function to which jqXHR will be passed in case of error
*/
remotetk.Client.prototype.create = function(objtype, fields, callback, error) {
RemoteTKController.create(objtype, JSON.stringify(fields), function(result){
handleResult(result, callback, error);
});
}

/*
* Retrieves field values for a record of the given type.
* @param objtype object type; e.g. "Account"
* @param id the record's object ID
* @param [fields=null] optional comma-separated list of fields for which
* to return values; e.g. Name,Industry,TickerSymbol
* @param callback function to which response will be passed
* @param [error=null] function to which jqXHR will be passed in case of error
*/
remotetk.Client.prototype.retrieve = function(objtype, id, fieldlist, callback, error) {
RemoteTKController.retrieve(objtype, id, fieldlist, function(result){
handleResult(result, callback, error);
});
}

/* NOT YET IMPLEMENTED!!!
* Upsert - creates or updates record of the given type, based on the
* given external Id.
* @param objtype object type; e.g. "Account"
* @param externalIdField external ID field name; e.g. "accountMaster__c"
* @param externalId the record's external ID value
* @param fields an object containing field names and values for
* the record, e.g. {:Name "salesforce.com", :TickerSymbol
* "CRM"}
* @param callback function to which response will be passed
* @param [error=null] function to which jqXHR will be passed in case of error
*/
/*
remotetk.Client.prototype.upsert = function(objtype, externalIdField, externalId, fields, callback, error) {
RemoteTKController.upser(objtype, externalIdField, externalId, JSON.stringify(fields), function(result){
handleResult(result, callback, error, true);
});
}
*/

/*
* Updates field values on a record of the given type.
* @param objtype object type; e.g. "Account"
* @param id the record's object ID
* @param fields an object containing initial field names and values for
* the record, e.g. {:Name "salesforce.com", :TickerSymbol
* "CRM"}
* @param callback function to which response will be passed
* @param [error=null] function to which jqXHR will be passed in case of error
*/
remotetk.Client.prototype.update = function(objtype, id, fields, callback, error) {
RemoteTKController.updat(objtype, id, JSON.stringify(fields), function(result){
handleResult(result, callback, error, true);
});
}

/*
* Deletes a record of the given type. Unfortunately, 'delete' is a
* reserved word in JavaScript.
* @param objtype object type; e.g. "Account"
* @param id the record's object ID
* @param callback function to which response will be passed
* @param [error=null] function to which jqXHR will be passed in case of error
*/
remotetk.Client.prototype.del = function(objtype, id, callback, error) {
RemoteTKController.del(objtype, id, function(result){
handleResult(result, callback, error, true);
});
}

/*
* Executes the specified SOQL query.
* @param soql a string containing the query to execute - e.g. "SELECT Id,
* Name from Account ORDER BY Name LIMIT 20"
* @param callback function to which response will be passed
* @param [error=null] function to which jqXHR will be passed in case of error
*/
remotetk.Client.prototype.query = function(soql, callback, error) {
RemoteTKController.query(soql, function(result){
handleResult(result, callback, error);
});
}

/*
* Executes the specified SOSL search.
* @param sosl a string containing the search to execute - e.g. "FIND
* {needle}"
* @param callback function to which response will be passed
* @param [error=null] function to which jqXHR will be passed in case of error
*/
remotetk.Client.prototype.search = function(sosl, callback, error) {
RemoteTKController.search(sosl, function(result){
handleResult(result, callback, error);
});
}
}
</script>
</apex:component>
Loading

0 comments on commit 774a837

Please sign in to comment.