Version

Adding igOlapXmlaDataSource to an HTML Page

Topic Overview

Purpose

This topic explains how to add the igOlapXmlaDataSource™ to and HTML page and how to configure it for retrieving data from a Microsoft® SQL Server Analysis Services (SSAS) Server.

Required background

The following table lists the topics and concepts required as a prerequisite to understanding this topic.

Concepts

Topics

igOlapXmlaDataSource Overview

This topic provides an overview of the igOlapXmlaDataSource component which uses SSAS instances for retrieving data.

Configuring IIS for Cross-Domain OLAP Data (igOlapXmlaDataSource)

This topic explains how to configure Internet Information Services (IIS) hosting HTTP data provider (msmdpump.dll) for SQL Server Analysis Services (SSAS), for cross-domain access (both authenticated and non-authenticated access).

In this topic

This topic contains the following sections:

Adding igOlapXmlaDataSource to an HTML Page – Conceptual Overview

Adding igOlapXmlaDataSource to an HTML page summary

The igOlapXmlaDataSource makes the OLAP data from a SSAS server available for use in a JavaScript client environment. In order for the component to work correctly, the serverUrl property has to be specified. Also before using the component, you must initialize it.

Normally this data source component is used together with one of the OLAP pivot UI controls available with Ignite UI for jQuery.

Requirements

Following are the general requirements for configuring igOlapXmlaDataSource for working with an MS SSAS Server.

  • A MS SSAS Server (with at least one database) configured with the msmdpump.dll HTTP data provider
  • The required JavaScript files:
    • The jQuery library
    • The required Ignite UI for jQuery™ JavaScript files

Steps

Following are the general conceptual steps for adding the igOlapXmlaDataSource to an HTML page and configuring it for working with an MS SSAS Server.

  1. Adding the required references to JavaScript files

  2. Defining the igOlapXmlaDataSource

  3. Initializing the igOlapXmlaDataSource

Adding igOlapXmlaDataSource to an HTML Page – Procedure

Introduction

The following procedure defines and initializes an igOlapXmlaDataSource object that connects to and obtains data from the Adventure Works sample database residing on an Infragistics® server.

The first step of the procedure offers both alternative ways for providing the references to the required JavaScript files – by using the Infragistics Loader and manually.

Prerequisites

To complete the procedure, you need the following:

  • The required JavaScript files (The Infragistics JavaScript files reside by default in the JavaScript modules folder under the Ignite UI for jQuery™ installation path):
    • Jquery-[versionNumber].js (for example, jquery-1.9.0.js) – the jQuery library (available at the jQuery site)
    • infragistics.util.js, infragistics.util.jquery.js – the JavaScript file containing shared non-UI logic used by some of the Ignite UI for jQuery™ components
    • infragistics.olapxmladatasource.js – the JavaScript file containing the igOlapXmlaDataSource component
    • (Conditional – if the Infragistics Loader is used) infragistics.loader.js – the Infragistics Loader component which can be used to automatically load all the Infragistics JavaScript and CSS files required by a component
    • The Adventure Works DW Standard Edition database deployed on a SSAS server instance configured with HTTP access through the msmdpump.dll

Steps

  1. Add the required references to JavaScript files

    • (Recommended) If using Infragistics Loader:

      Add a reference to the Loader file. (No need to place references to the individual files)

      <script src="js/jquery-1.9.0.js" type="text/javascript"></script>
      <script src="js/infragistics.loader.js" type="text/javascript"></script>
      
    • If referencing files manually:

      Add an individual reference to every required file.

      <script src="js/jquery-1.9.0.js" type="text/javascript"></script>
      <script src="js/infragistics.util.js" type="text/javascript"></script>
      <script src="js/infragistics.util.jquery.js" type="text/javascript"></script>
      <script src="js/infragistics.olapxmladatasource.js" type="text/javascript"></script>
      

      Note: The jQuery version number may vary. The version number listed in the code is the latest as of this writing.

  2. Define the igOlapXmlaDataSource

    Create a new $.ig.OlapXmlaDataSource object by calling its constructor function and then pass a JavaScript object containing the data source options as properties; at a minimum, you must specify the serverUrl option.

  3. Initialize the igOlapXmlaDataSource

    Initialize the XMLA data source by calling the OlapXmlaDataSource object’s initialize() method that returns a promise object that will be resolved with the root MetadataTreeItem (The root node of the metadata tree). This is because the initialization is an asynchronous process (a call to the servers is made). The promise is an object that encapsulates an asynchronous operation exposing methods that can initiate and execute callbacks when the operation either completes or fails such as done, fail, etc.

    Note: The jQuery version number may vary. The version number listed in the code is the latest as of this writing.

Code

The following code demonstrates creating and initializing a new instance of the OlapXmlaDataSource.

In this code example, the serverUrl setting points to an Infragistics server for XMLA data source.

Instantiating OlapXmlaDataSource using the Infragistics Loader:

In JavaScript:

$.ig.loader({
    scriptPath: '[path to js folder]',
    cssPath: '[path to css folder]',
    resources: 'igOlapXmlaDataSource'
});
$.ig.loader(function () {
    var dataSource = new $.ig.OlapXmlaDataSource({
        serverUrl: 'http://sampledata.infragistics.com/olap/msmdpump.dll',
        catalog: 'Adventure Works DW 2008',
        cube: 'Adventure Works',
        measureGroup: "Internet Sales",
        rows: "[Sales Territory].[Sales Territory]",
        columns: "[Product].[Product Categories]",
        measures: "[Measures].[Internet Order Count]"
    });
    var promise = dataSource.initialize();
    promise.done(function (metadataTree) {
            // do something when the data source is initialized
        }).fail(function (error) {
            throw error;
        });
});

Instantiating OlapXmlaDataSource without using the Infragistics Loader:

In JavaScript:

$(function() {
    var dataSource = new $.ig.OlapXmlaDataSource({
        serverUrl: 'http://sampledata.infragistics.com/olap/msmdpump.dll',
        catalog: 'Adventure Works DW Standard Edition',
        cube: 'Adventure Works'
    });
    var promise = dataSource.initialize();
    promise.done(function (metadataTree) {
            // do something when the data source is initialized
        }).fail(function (error) {
            throw error;
        });
});

Related Content

Topics

The following topics provide additional information related to this topic.

Samples

The following samples provide additional information related to this topic.

  • Binding to Xmla Data Source: This sample demonstrates how to bind the igPivotGrid to an igOlapXmlaDataSource and uses an igPivotDataSelector for data selection.

  • Remote Xmla Provider: This sample demonstrates one of the benefits of using the remote provider feature of the igOlapXmlaDataSource - less network traffic. All requests are proxied through the server application to avoid cross domain problems. In addition, the data is translated to JSON reducing the size of the response.

View on GitHub