Wijmo OLAP: Answer Recurring Questions with Pre-Defined Views

March 15 2016

As you can see from the previous post, it is really easy to build views by dragging fields within the PivotPanel control. If your users are familiar with Excel’s Pivot Tables, they will feel right at home with Wijmo OLAP. But you may want your application to include some pre-defined views to answer recurring questions. In these cases, it would be nice to store the pre-defined views and allow users to pick them from a list instead of re-building them from scratch each time.

Full Wijmo OLAP series:

Getting Started with Wijmo's HTML5 OLAP Module: Create Basic Pivot Tables

Answer Recurring Questions with Pre-Defined Views

Filtering Data in a PivotGrid

Exporting a PivotGrid to Excel

Customizing the UI and PivotGrid

Wijmo’s PivotEngine class has a viewDefinition property that allows you to save and restore views using a simple JSON string. This makes it easy to build a catalog of standard questions so users can get the view they want instantly. The OlapIntro sample contains some code that implements this functionality. The HTML looks like this:



Use the **viewDefinition** property to save and restore  
view definitions. For example:  


Save View  


Load View

Or build a list of pre-defined views for the user to pick from. For example:

[/code] The code behind starts by defining an app.viewDefs array containing pre-defined views. Each entry in the array has a name and a JSON string representing the view definition:

// pre-defined views  
app.viewDefs = [  
{  
name: "Sales by Product",  
def: "{\\"showZeros\\":false,\\"showColumnTotals\\":2,…  
},  
{  
name: "Sales by Country",  
def: "{\\"showZeros\\":false,\\"showColumnTotals\\":2,…  
{  
name: "Sales and Downloads by Country",  
def: "{\\"showZeros\\":false,\\"showColumnTotals\\":2, …  
},  
… // more view definitions

The array is used to build the list of pre-defined views on the page, hosted by the views element:

// populate list of pre-defined views  
var viewList = document.getElementById('views');  
for (var i = 0; i < app.viewDefs.length; i++) {  
var li = wijmo.createElement('  


*   ' +  
    app.viewDefs[i].name + '





');  
viewList.appendChild(li);  
}

The code handles clicks on list items to load the pre-defined view by setting the PivotEngine‘s viewDefinition property:

// get a reference to the PivotEngine  
app.panel = new wijmo.olap.PivotPanel('#pivotPanel');  
var ng = app.panel.engine;  
// apply pre-defined views  
viewList.addEventListener('click', function (e) {  
if (e.target.tagName == 'A') {  
var index = parseInt(e.target.getAttribute('index'));  
ng.viewDefinition = app.viewDefs[index].def;  
e.preventDefault();  
}  
});

Finally, clicks on the Save View and Load View buttons are handled as follows:

// save/restore view definitions  
app.saveView = function () {  
if (ng.isViewDefined) {  
localStorage.viewDefinition = ng.viewDefinition;  
}  
}  
app.loadView = function () {  
if (localStorage.viewDefinition) {  
ng.viewDefinition = localStorage.viewDefinition;  
}  
}

The result looks like this:

Wijmo OLAP: Answer Recurring Questions with Pre-Defined Views

More from the Wijmo OLAP series