Bind a Wijmo Grid to Salesforce.com Through the Salesforce OData Connector
- by dataintegration
This article will explain how to connect to any RSSBus OData Connector with Wijmo's data grid using JSONP. While the example will use the Salesforce
Connector, the same process can be followed for any of the RSSBus OData Connectors.
Step 1: Download and install both the Salesforce Connector from RSSBus and the Wijmo javascript library.
Step 2: Next you will want to configure the Salesforce Connector to connect with your Salesforce account. If you browse to the Help
tab in the Salesforce Connector application, there is a link to the Getting Started Guide which will walk you through setting up the
Salesforce Connector.
Step 3: Once you have successfully configured the Salesforce Connector application, you will want to open a Wijmo sample grid file to
edit. This example will use the overview.html grid found in the Samples folder.
Step 4: First, we will wrap the jQuery document ready function in a callback function for the JSONP service. In this
example, we will wrap this in function called fnCallback which will take a single object args.
<script id="scriptInit" type="text/javascript">
function fnCallback(args) {
$(document).ready(function () {
$("#demo").wijgrid({
...
});
});
};
</script>
Step 5: Next, we need to format the columns object in a format that Wijmo's data grid expects. This is done by adding the headerText:
element for each column.
<script id="scriptInit" type="text/javascript">
function fnCallback(args) {
var columns = [];
for (var i = 0; i < args.columnnames.length; i++){
var col = { headerText: args.columnnames[i]};
columns.push(col);
}
$(document).ready(function () {
$("#demo").wijgrid({
...
});
});
};
</script>
Step 6: Now the wijgrid parameters are ready to be set. In this example, we will set the data input parameter to the args.data object and
the columns input parameter to our newly created columns object. The resulting javascript function should look like this:
<script id="scriptInit" type="text/javascript">
function fnCallback(args) {
var columns = [];
for (var i = 0; i < args.columnnames.length; i++){
var col = { headerText: args.columnnames[i]};
columns.push(col);
}
$(document).ready(function () {
$("#demo").wijgrid({
allowSorting: true,
allowPaging: true,
pageSize: 10,
data: args.data,
columns: columns
});
});
};
</script>
Step 7: Finally, we need to add the JSONP reference to our Salesforce Connector's data table. You can find this by clicking on the Settings tab of the
Salesforce Connector. Once you have found the JSONP URL, you will need to supply a valid table name that you want to connect with Wijmo. In this example, we
will connect to the Lead table. You will also need to add authentication options in this step. In the example we will append the authtoken of the user
who has access to the Salesforce Connector using the @authtoken query string parameter. IMPORTANT: This is not secure and will expose the authtoken of the
user whose authtoken you supply in this step. There are other ways to secure the user's authtoken, but this example uses a query string parameter for simplicity.
<script src="http://localhost:8181/sfconnector/data/conn/Lead.rsd?@jsonp=fnCallback&sql:query=SELECT%20*%20FROM%20Lead&@authtoken=<myAuthToken>" type="text/javascript"></script>
Step 8: Now, we are done. If you point your browser to the URL of the sample, you should see your Salesforce.com leads in a Wijmo data grid.
