PivotGridはExcelのピボットテーブルのように縦、横軸を設定することで、データをクロス集計した結果が表示可能で、データの集計、分析等に使用できる非常に便利なウィジェットです。今回のTipsでは、PivotGridのクリックイベント処理で、縦、横軸の情報を使用して他のウィジェットを絞り込む方法を紹介します。
PivotGridウィジェットとは？
PivotGridウィジェットは、クロス集計が行える便利なウィジェットです。
例えば、売上日、売上金額、担当者、商品が記録されている売上のトランザクションファイルを使用して、横列に売上年月、縦列に担当者、商品を設定することで、売上金額を集計した結果を表示することができます。
例えば、以下のような売上トランザクションファイルが存在している場合
例) 売上トランザクションファイル
売上日から、データソース側で年度/月度の情報を出力するように設定後、列ラベル(縦軸)に年度と月、行ラベル(横軸)に担当者名と商品名、集計に売上金額を設定することでクロス集計ができます。
例) PivotGridウィジェットの「カラム」設定
例) PivotGridウィジェットの表示
PivotGridウィジェット上に、「年度/月度」と「担当者名/商品名」でクロス集計をした売上金額が表示されました。
クリックイベントで他のウィジェットを絞り込む方法
PivotGridウィジェットは、集計したレコードの結果を表示するため、フィルターウィジェットによって他のウィジェットを絞り込むことはできません。
しかし、「スクリプトの実行」を使用することで、選択したPivotGridセルの縦軸、横軸のラベルを取得することが可能です。ラベルを使用することで、他のウィジェットを絞り込む処理が追加できます。
例) スクリプトの実行でGridウィジェットを絞り込む
つまり、PivotGridのセルを選択時(クリック時)に、「スクリプトの実行」を使用することで、選択したセルの縦軸「年度/月度」と横軸「担当者名/商品名」を取得します。次に、Gridウィジェットのフィルター条件を設定後、Gridウィジェットを再読込みすることで、データを絞り込むことができます。
絞り込みの実装方法
絞り込む対象のGridウィジェットに名前を設定
はじめに、絞り込む対象のGridウィジェットにあらかじめ「名前」を設定します。
ウィジェットに名前を設定するには、アプリケーション編集画面でウィジェットを選択後、左上の「歯車」アイコンをクリックします。
左側のパネルに表示される、「名前」フィールドにウィジェットの名前を設定して「OK」ボタンをクリックすることで、ウィジェットに名前を設定できます。
例では、GridウィジェットにGridと名前を設定しました。
スクリプトの実行にJavaScriptを追加
アプリケーションの編集画面から「動作内容」を選択後、PivotGridウィジェットの「行クリック」イベントに「スクリプトの実行」を追加します。
「スクリプトの実行」には、以下のようなJavaScriptを追記します。
//フィルタ条件を格納する変数
let filter= '';
//選択セルの縦、横列ラベルの取得
let data = rec.getData();
//ウィジェットのフィールド名を使用してアクセス
let nendo = data["DYEAR"];//年度
let tuki = data["MONTH_CRDATE"];//月度
let tanto = data["F1_CRTTNM"];//担当者名
let syohin = data["F2_SHSHNM"];//商品名
//フィルタ条件が空でない場合 and を返却する関数
function addAndString(filter){
if(filter){
return ' and ';
}
return '';
}
//年度が設定されている場合
if(nendo){
//フィルタ条件に年度を追加
filter = "year(f1.crdate) = " + nendo;
}
//月度が設定されている場合
if(tuki){
//フィルタ条件に月度を追加、ラベルから月の文字を削除
filter = filter + addAndString(filter) + "month(f1.crdate) = " + tuki.replace('月','');
}
//担当者名が設定されている場合
if(tanto){
//フィルタ条件に担当者名を追加
filter = filter + addAndString(filter) + "f1.crttnm = '" + tanto + "'";
}
//商品名が設定されている場合
if(syohin){
//フィルタ条件に商品名を追加
filter = filter + addAndString(filter) + "f2.shshnm = '" + syohin+ "'";
}
//絞り込む対象のGridウィジェットを取得
let grid = getWidget('Grid');
//Gridウィジェットにフィルター条件を設定
grid.filter(filter);
//GridウィジェットのStore(データストア)を取得
let store = grid.getStore();
//Store(データストア)を再読み込み
store.reload();JavaScriptの詳細
//フィルタ条件を格納する変数
let filter= '';
//選択セルの縦、横列ラベルの取得
let data = rec.getData();
//ウィジェットのフィールド名を使用してアクセス
let nendo = data["DYEAR"];//年度
let tuki = data["MONTH_CRDATE"];//月度
let tanto = data["F1_CRTTNM"];//担当者名
let syohin = data["F2_SHSHNM"];//商品名PivotGridのクリック時イベントでは、recオブジェクトが引数に渡されます。
recオブジェクトのgetDataメソッドを使用すると、縦軸、横軸のラベル情報が連想配列として取得できます。
連想配列のキーには、ウィジェットのフィールド名が設定されているため、取得したい情報に合わせて
キーの記述を変更してください。
ウィジェットのフィールド名は、ウィジェットの編集画面で確認できます。
//フィルタ条件が空でない場合 and を返却する関数
function addAndString(filter){
if(filter){
return ' and ';
}
return '';
}
//年度が設定されている場合
if(nendo){
//フィルタ条件に年度を追加
filter = "year(f1.crdate) = " + nendo;
}
//月度が設定されている場合
if(tuki){
//フィルタ条件に月度を追加、ラベルから月の文字を削除
filter = filter + addAndString(filter) + "month(f1.crdate) = " + tuki.replace('月','');
}
//担当者名が設定されている場合
if(tanto){
//フィルタ条件に担当者名を追加
filter = filter + addAndString(filter) + "f1.crttnm = '" + tanto + "'";
}
//商品名が設定されている場合
if(syohin){
//フィルタ条件に商品名を追加
filter = filter + addAndString(filter) + "f2.shshnm = '" + syohin+ "'";
}JavaScriptでは、filter変数にGridウィジェットのフィルタ条件を設定していきます。addAndString関数は、条件が設定されている場合に、and を返却する関数です。
ラベル情報の有無を判別して、変数が設定されている場合にフィルタ条件をfilter変数に格納していきます。
条件句は、SQLのWhere条件句に設定できる形式で記述する必要があります。
また、フィルタ条件で指定するフィールド名はデータソースのフィールド名となるため注意してください。
//絞り込む対象のGridウィジェットを取得
let grid = getWidget('Grid');
//Gridウィジェットにフィルター条件を設定
grid.filter(filter);
//GridウィジェットのStore(データストア)を取得
let store = grid.getStore();
//Store(データストア)を再読み込み
store.reload();最後の処理は、最初にGridと名前を付けたGridウィジェットをValenceで用意されているgetWidget関数で取得します。
取得した、Gridウィジェットのfilterメソッドでフィルタ条件(filter変数)を設定できます。
次に、GridウィジェットのgetStoreメソッドを呼び出すことで「データストア」を取得後、「データストア」のreloadメソッドを実行することで、Gridウィジェットを絞り込むことが可能です。
おわりに
PivotGridウィジェットから「スクリプトの実行」を使用することで、比較的簡単に他のウィジェットを絞り込みが可能になります。
各セルを選択(クリック)することで、「スクリプトの実行」が呼び出せるのですが、現在のところ「行の集計」ではクリックしても「スクリプトの実行」が呼び出せないためご注意ください。