前回でご理解いただけたように、PivotPanelコントロールでフィールドをドラッグしてビューを構築する作業は実に簡単です。Excelのピボットテーブルに慣れたユーザーなら、Wijmo OLAPにも苦労することはないでしょう。

ただし、アプリケーションにビューの表示条件を保存しておきたいこともあります。そのような場合は、定義済みビューを保存しておき、ユーザーが毎回最初からビューを作り直すのではなく、リストからビューを選択できるようにすると便利です。

Wijmo OLAP製品解説シリーズ

WijmoのPivotEngineクラスには、単純なJSON文字列を使用してビューを保存および復元できるviewDefinitionプロパティがあります。これにより、標準的な質問を簡単にカタログ化でき、ユーザーは必要なビューを即座に入手できます。

OlapIntroサンプルには、この機能を実装するコードが含まれます。

HTMLは次のとおりです。


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>
<p>Or build a list of pre-defined views for the user to pick from.<br />
For example:</p>
<ul id="views"></ul>
<p>

コードビハインドは、最初に、定義済みビューを格納するapp.viewDefs配列を定義します。配列の各エントリは、名前とビュー定義を表すJSON文字列です。

// 定義済みビュー
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, …
},
… // 他のビュー定義

この配列を使用して、ページに定義済みビューのリストを作成します。このリストは、views要素に格納されます。

// 定義済みビューのリストを生成します
var viewList = document.getElementById(‘views’);
for (var i = 0; i < app.viewDefs.length; i++) {
var li = wijmo.createElement(‘
<ul>
<li><a>’ +
app.viewDefs<em class="bbcode-em"></em>.name + ‘</a></li>
</ul>
 
‘);
viewList.appendChild(li);
}

次のコードはリスト項目のクリックを処理し、PivotEngineのviewDefinitionプロパティを設定することで、定義済みビューをロードします。

// PivotEngineの参照を取得します
app.panel = new wijmo.olap.PivotPanel(‘#pivotPanel’);
var ng = app.panel.engine;
// 定義済みビューを適用します
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();
}
});

最後に、[Save View]ボタンと[Load View]ボタンのクリックを処理します。

// ビュー定義を保存/復元します
app.saveView = function () {
if (ng.isViewDefined) {
localStorage.viewDefinition = ng.viewDefinition;
}
}
app.loadView = function () {
if (localStorage.viewDefinition) {
ng.viewDefinition = localStorage.viewDefinition;
}
}

結果は、次のように表示されます。

その他のWijmo OLAP製品解説シリーズ

  1. 基本的なピボットテーブルの作成
  2. ビューの表示条件を保存する
  3. PivotGridでデータをフィルタ処理する
  4. PivotGridをExcelにエクスポートする
  5. UIとPivotGridをカスタマイズする

Angular OLAPデモを参照  |  PureJS OLAPデモを参照