The Salesforce Cloud Driver provides Salesforce data as Web services, which enable connectivity to the live data. This article shows how to consume JSONP-formatted Salesforce data from a Wijmo Grid.
- If you have not already connected successfully in the cloud driver administration console, see the "Getting Started" chapter in the help documentation for a guide.
- Load the required Wijmo, jQuery, and Knockout libraries:
- http://code.jquery.com/jquery-1.11.1.min.js
- http://code.jquery.com/ui/1.11.0/jquery-ui.min.js
- http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css
- http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20143.59.min.css
- http://cdn.wijmo.com/jquery.wijmo-open.all.3.20143.59.min.js
- http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20143.59.min.js
- http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20143.59.js
- http://cdn.wijmo.com/wijmo/external/knockout-2.2.0.js
- http://cdn.wijmo.com/amd-js/3.20143.59/knockout-3.1.0.js
- http://cdn.wijmo.com/interop/knockout.wijmo.3.20143.59.js
- Create a ViewModel and connect to it using the ODataView:
$.support.cors = true;
var viewModel;
function ViewModel() {
var productView = new wijmo.data.ODataView("http://your-server/api.rsc/@7q2Hzh4x2FBr2w3K8c7y/Account", {
ajax: {
dataType: "jsonp",
data: { "$inlinecount": null },
},
pageSize: 10
});
productView.refresh();
productView.nextPage();
this.products = productView;
}
$(document).ready(function () {
viewModel = new ViewModel();
ko.applyBindings(viewModel, $(".container").get(0));
});
- Databind: Below is a simple table with some paging buttons, which you can paste into the body section of your markup.
<
h2
>Edit Live Salesforce Data in Real Time</
h2
>
<
h3
>Account</
h3
>
<
div
>
<
button
title
=
"previous page"
class
=
"pagebuttons"
data-bind
=
"click: prevPage, button: {}"
><
span
class
=
"ui-icon ui-icon-seek-prev"
/></
button
>
<
button
title
=
"next page"
class
=
"pagebuttons"
data-bind
=
"click: nextPage, button: {}"
><
span
class
=
"ui-icon ui-icon-seek-next"
/></
button
>
</
div
>
<
table
id
=
"demo-grid"
data-bind="wijgrid: {
data: products,
allowEditing: true,
showFilter: true,
allowPaging: true,
pagerSettings: { position: 'none'},
columnsAutogenerationMode: 'append',
}" >
</
table
>
Below is the resulting grid. You can filter, sort, edit, and save. Paging makes working with large datasets manageable.