Learn more
 

Ready to get started?

Learn more or sign up for a free trial:

CData Connect Server

In this article

Related articles

DataBind Wijmo Grid to IBM Cloud Object Storage Data


Provide real-time IBM Cloud Object Storage data to interactive controls.

The Connect Server enables you to use Web services to connect to and query IBM Cloud Object Storage data. This article details how to import an OData feed of IBM Cloud Object Storage data into Wijmo Grid.

Configuring Connect Server

To work with live IBM Cloud Object Storage data in Wijmo Grid, we need to connect to IBM Cloud Object Storage from Connect Server, provide user access to the new virtual database, and create OData endpoints for the IBM Cloud Object Storage data.

Add a Connect Server User

Create a User to connect to IBM Cloud Object Storage from Wijmo Grid through Connect Server.

  1. Click Users -> Add
  2. Configure a User
  3. Click Save Changes and make note of the Authtoken for the new user

Connect to IBM Cloud Object Storage from Connect Server

CData Connect Server uses a straightforward, point-and-click interface to connect to data sources and generate APIs.

  1. Open Connect Server and click Connections
  2. Select "IBM Cloud Object Storage" from Available Data Sources
  3. Enter the necessary authentication properties to connect to IBM Cloud Object Storage.

    Register a New Instance of Cloud Object Storage

    If you do not already have Cloud Object Storage in your IBM Cloud account, follow the procedure below to install an instance of SQL Query in your account:

    1. Log in to your IBM Cloud account.
    2. Navigate to the page, choose a name for your instance and click Create. You will be redirected to the instance of Cloud Object Storage you just created.

    Connecting using OAuth Authentication

    There are certain connection properties you need to set before you can connect. You can obtain these as follows:

    API Key

    To connect with IBM Cloud Object Storage, you need an API Key. You can obtain this as follows:

    1. Log in to your IBM Cloud account.
    2. Navigate to the Platform API Keys page.
    3. On the middle-right corner click "Create an IBM Cloud API Key" to create a new API Key.
    4. In the pop-up window, specify the API Key name and click "Create". Note the API Key as you can never access it again from the dashboard.

    Cloud Object Storage CRN

    If you have multiple accounts, you will need to specify the CloudObjectStorageCRN explicitly. To find the appropriate value, you can:

    • Query the Services view. This will list your IBM Cloud Object Storage instances along with the CRN for each.
    • Locate the CRN directly in IBM Cloud. To do so, navigate to your IBM Cloud Dashboard. In the Resource List, Under Storage, select your Cloud Object Storage resource to get its CRN.

    Connecting to Data

    You can now set the following to connect to data:

    • InitiateOAuth: Set this to GETANDREFRESH. You can use InitiateOAuth to avoid repeating the OAuth exchange and manually setting the OAuthAccessToken.
    • ApiKey: Set this to your API key which was noted during setup.
    • CloudObjectStorageCRN (Optional): Set this to the cloud object storage CRN you want to work with. While the connector attempts to retrieve this automatically, specifying this explicitly is recommended if you have more than Cloud Object Storage account.

    When you connect, the connector completes the OAuth process.

    1. Extracts the access token and authenticates requests.
    2. Saves OAuth values in OAuthSettingsLocation to be persisted across connections.
  4. Click Save Changes
  5. Click Privileges -> Add and add the new user (or an existing user) with the appropriate permissions (SELECT is all that is required for Reveal).

Add IBM Cloud Object Storage OData Endpoints in Connect Server

After connecting to IBM Cloud Object Storage, create OData Endpoints for the desired table(s).

  1. Click OData -> Tables -> Add Tables
  2. Select the IBM Cloud Object Storage database
  3. Select the table(s) you wish to work with and click Next
  4. (Optional) Edit the resource to select specific fields and more
  5. Save the settings

(Optional) Configure Cross-Origin Resource Sharing (CORS)

When accessing and connecting to multiple domains from an application such as Ajax, there is a possibility of violating the limitations of cross-site scripting. In that case, configure the CORS settings in OData -> Settings.

  • Enable cross-origin resource sharing (CORS): ON
  • Allow all domains without '*': ON
  • Access-Control-Allow-Methods: GET, PUT, POST, OPTIONS
  • Access-Control-Allow-Headers: Authorization

Save the changes to the settings.

Connect to IBM Cloud Object Storage Data using Wijmo Grid

Create a Real-Time Grid

Follow the steps below to consume IBM Cloud Object Storage data from the Wijmo JavaScript controls:

  1. Load the required Wijmo, jQuery, and Knockout libraries: 
    			
			<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
			<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>

			<!--Theme-->
			<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css">

				<!--Wijmo Widgets CSS-->
				<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.min.css" rel="stylesheet" type="text/css">

					<!--Wijmo Widgets JavaScript-->
					<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20161.90.min.js"></script>
					<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20161.90.min.js"></script>
					<script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20161.90.js"></script>

					<!--Knockout JS Library-->
					<!-- Both of the links below can work -->
					<script src="http://cdn.wijmo.com/wijmo/external/knockout-2.2.0.js"></script>
					<!--<script src="http://cdn.wijmo.com/amd-js/3.20161.90/knockout-3.1.0.js"></script>-->

					<!--Wijmo Knockout Integration Library-->
					<script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20161.90.js"></script>
  2. Create a ViewModel and connect to it using the ODataView. You will need to replace the placeholder values for the URL of the API Server, an API Server user, and the authtoken for that user. 
    			
			<script id="scriptInit">
			$.support.cors = true;
			var viewModel;

			function ViewModel() {
			var objectsView = new wijmo.data.ODataView("http://MyServer:MyPort/api.rsc/Objects", {
			ajax: {
			dataType: "jsonp",
			username: "MyUser",
			password: "MyAuthtoken",
			data: { "$inlinecount": null }
			},
			pageSize: 10
			});
			objectsView.refresh();
			objectsView.nextPage();
			this.objects = objectsView;
			this.prevPage = function () {objectsView.prevPage();};
			this.nextPage = function () {objectsView.nextPage();};
			}

			$(document).ready(function () {
			viewModel = new ViewModel();
			ko.applyBindings(viewModel, $(".container").get(0));
			});
			</script>
  3. DataBind: Below is a simple table with some paging buttons, which you can paste into the body section of your markup. 
    			
			<h2>Connect to Live IBM Cloud Object Storage Data in Real Time</h2>

			<h3>Objects</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: objects, 
      showFilter: true, 
      allowPaging: true,
      pagerSettings: { position: 'none'},
      columnsAutogenerationMode: 'append',
    }" >
			</table>

At this point, you may be prompted to re-enter the username and authtoken. After doing so, a resulting table or grid should appear, as seen below. You can filter and sort through pages of IBM Cloud Object Storage data.

Free Trial & More Information

If you are interested in connecting to your IBM Cloud Object Storage data (or data from any of our other supported data sources) from Wijmo Grid, sign up for a free trial of CData Connect Server today! For more information on Connect Server and to see what other data sources we support, refer to our CData Connect page.