DataBind Wijmo Grid to Jira Data



Provide real-time Jira data to interactive controls.

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

About Jira Data Integration

CData simplifies access and integration of live Jira data. Our customers leverage CData connectivity to:

  • Gain bi-directional access to their Jira objects like issues, projects, and workflows.
  • Use SQL stored procedures to perform functional actions like changing issues status, creating custom fields, download or uploading an attachment, modifying or retrieving time tracking settings, and more.
  • Authenticate securely using a variety of methods, including username and password, OAuth, personal access token, API token, Crowd or OKTA SSO, LDAP, and more.

Most users leverage CData solutions to integrate Jira data with their database or data warehouse, whether that's using CData Sync directly or relying on CData's compatibility with platforms like SSIS or Azure Data Factory. Others are looking to get analytics and reporting on live Jira data from preferred analytics tools like Tableau and Power BI.

Learn more about how customers are seamlessly connecting to their Jira data to solve business problems from our blog: Drivers in Focus: Collaboration Tools.


Getting Started


Configuring Connect Server

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

Add a Connect Server User

Create a User to connect to Jira 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 Jira 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 "Jira" from Available Data Sources
  3. Enter the necessary authentication properties to connect to Jira.

    To connect to JIRA, provide the User and Password. Additionally, provide the Url; for example, https://yoursitename.atlassian.net.

  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 Jira OData Endpoints in Connect Server

After connecting to Jira, create OData Endpoints for the desired table(s).

  1. Click OData -> Tables -> Add Tables
  2. Select the Jira 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 Jira Data using Wijmo Grid

Create a Real-Time Grid

Follow the steps below to consume Jira 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 issuesView = new wijmo.data.ODataView("http://MyServer:MyPort/api.rsc/Issues", {
    			ajax: {
    			dataType: "jsonp",
    			username: "MyUser",
    			password: "MyAuthtoken",
    			data: { "$inlinecount": null }
    			},
    			pageSize: 10
    			});
    			issuesView.refresh();
    			issuesView.nextPage();
    			this.issues = issuesView;
    			this.prevPage = function () {issuesView.prevPage();};
    			this.nextPage = function () {issuesView.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 Jira Data in Real Time</h2>
    
    			<h3>Issues</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: issues, 
          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 Jira data.

Free Trial & More Information

If you are interested in connecting to your Jira 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.

Ready to get started?

Learn more or sign up for a free trial:

CData Connect Server