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:

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 <b>viewDefinition</b> property to save and restore
view definitions. For example:
<button class="mdl-button mdl-button--raised mdl-button--colored">
Save View
</button>
<button class="mdl-button mdl-button--raised mdl-button--colored ">
Load View
</button>

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

    [/prettyprint]
    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('
    <ul>
    <li><a>' +
    app.viewDefs.name + '</a></li>
    </ul>
     
    ');
    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;
    }
    }
    
    [/gc_translate]

    The result looks like this:

    More from the Wijmo OLAP series

    1. Getting Started with Wijmo’s HTML5 OLAP Module: Create Basic Pivot Tables
    2. Answer Recurring Questions with Pre-Defined Views
    3. Filtering Data in a PivotGrid
    4. Exporting a PivotGrid to Excel
    5. Customizing the UI and PivotGrid

    See Angular OLAP demo  |  See JS OLAP Demo