posts - 88 , comments - 3 , trackbacks - 0

Databind Wijmo Grid to Salesforce.com Data

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.

  1. 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.
  2. 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
  3. 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));
    });
  4. 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: {}"><spanclass="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.

Print | posted on Thursday, September 27, 2012 3:38 AM | Filed Under [ salesforce cdata databind Wijmo Grid cloud drivers ]

Feedback

No comments posted yet.
Post A Comment
Title:
Name:
Email:
Comment:
Verification:
 

Powered by: