【パブリッシャー】ページデザイナーでドリルリンクを実装してみる

[Sharperlight](https://sharperlight.jp/)パブリッシャーで作成するWebレポートは、ページデザイナーを使用することでカスタマイズすることができるということは、以前の記事 [**【パブリッシャー】ページデザイナーを使ってみる**](https://qiita.com/Miki_Yokohata/items/65cc421dea793d49c150)で記してます。
この記事では、そのページデザイナーでドリルリンクを実装してみたいと思います。
## 親レポート ##
### クエリ ###
[Sharperlight](https://sharperlight.jp/)アプリケーションメニューから`パブリッシャー`を起動します。
`新規`ボタンで新しいWebレポート(公開クエリとも言える）の作成を開始します。
必ずクエリの定義が必要なので、`クエリーを編集`ボタンでクエリの作成を開始します。お馴染みの**クエリビルダ**が起動します。
今回はデータベースを使用しないで、カスタムデータを使用した簡単なクエリを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/a4e76b96-2316-4fee-8bf2-c72916e53a89.png)
フィルターの**製品**には`System`、そして**テーブル**には`カスタム定義のデータセット`を選択します。
準備するデータは、このようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/61b2753b-5be6-1531-c78a-ae3e256907f1.png)
```
"グループ" , "コード" , "名称" , "金額::Number"
"A" , "A01" , "AAA 1" , 1000
"A" , "A02" , "AAA 2" , 1002
"A" , "A03" , "AAA 3" , 1004
"A" , "A04" , "AAA 4" , 1006
"A" , "A05" , "AAA 5" , 1008
"B" , "B01" , "BBB 1" , 2000
"B" , "B02" , "BBB 2" , 2002
"B" , "B03" , "BBB 3" , 2004
"B" , "B04" , "BBB 4" , 2006
"B" , "B05" , "BBB 5" , 2008
"C" , "C01" , "CCC 1" , 3000
"C" , "C02" , "CCC 2" , 3002
"C" , "C03" , "CCC 3" , 3003
"C" , "C04" , "CCC 4" , 3004
"C" , "C05" , "CCC 5" , 3005
```
出力アイテムには、`グループ`、`金額`を選択します。そしてドリルリンク用のURLを拡張表現で追加します。
拡張表現の内容は、このようになります。リンク先の詳細レポートもカスタムデータで準備します。（後で解説）ここでは名前だけ紹介します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/716bd4ba-9bf4-5183-06cb-933673e15e15.png)
```
"{_System.Rest.URL}Report/?query=" + UrlEncode("QiitaSample.PageDesWinDrillSub")
 + "&fltGroup="   + UrlEncode({%Group})
 + "&fltGroup_2=" + UrlEncode({%Group})
```
クエリをOKボタンで保存し、クエリビルダを閉じます。
### ページデザイナー ###
ページデザイナーでのページの作成に移ります。`ページ`タブを開き、`編集`ボタンでページデザイナーを起動します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/fd3c39b4-0d06-1c0f-e085-00f77a71d5b8.png)
デフォルトでテーブルが表示されているので、今回は単純にそれを利用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/a3e76a94-b2f2-81db-9b7d-5441790de174.png)
テーブルの最上位の行がヘッダー行となるので、各列の表題を記入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/3d018642-c282-d911-90af-acc6ab5c6fb4.png)
値の行には、定義したクエリの出力アイテムを配置していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/6c77e69e-893c-aa53-d915-530da0cd607d.png)
次に、金額の値にドリルリンクを設定します。`Value`プロパティでクエリの出力アイテム(Amount)を配置。`Action`プロパティに**Jump to URL**を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/a077fe41-b446-ee38-5b3d-2e29039f8188.png)
`Action`プロパティでは専用のダイアログを開き、このように設定を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/1ae3fb82-b9cb-0eba-11a4-cc09c4d4ff7a.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4a86bbed-2015-6158-ac2c-f42aecaba162.png)
テーブルの最下行には、合計値を表示する式を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/a33e96b3-962c-670c-e099-578a2aff86f9.png)
以上でページデザイナーでの作業は終わりなので、`閉じる`で保存します。
レポートダイアログも`OK`ボタンで保存終了します。
## 子レポート ##
### クエリ ###
このレポートは、上記で作成した親レポートのある行の金額の内訳詳細を表示するレポートとなります。
親レポートからは各行のグループがフィルターとして渡されて、その内訳詳細を表示するといった仕組みになります。
クエリは、このようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/2c4564dd-1925-3f6d-42c0-01c2667417db.png)
## レポートの検証 ##
では早速Sharperlightサービスを起動して、親レポートを閲覧してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/38688df6-1ec0-f179-dec2-4623270f0c82.png)
各行の金額にはリンクが作成されていることが分かります。クリックするとその行のグループ値が子レポートに渡され、そのグループ値に関する詳細が**別タブ**で表示されます。
## おまけ ##
以下のコードを親レポートの`フッター`プロパティに貼り付けると、子レポートがオーバーレイで表示されます。
```
<script>
$( document ).ready(function() {
    $( "#promptSubmit" ).bind( "click", function() {
        DelayedProcess();
    });
    DelayedProcess();
});

var _timer = null;
function DelayedProcess() {
    //wait a bit for iframe to show content
    var _timer = setInterval(function() {
        clearInterval(_timer);
        AdjustLinks();
    }, 2000);
}

function AdjustLinks() {
    try {
        var ifr= $("#reportArea").contents().find('body');
        
        var list = $(ifr).find('a');    //get a list of links in iframe
        for( c=0;c< list.length;c++ ) {
            var a = list[c];
            var href = $(a).attr("href");
            if( href.indexOf("PagePdf")>0 ) continue;   //avoid download PDF links
            //$(a).css("background-color","yellow");  //debug show links in yellow
            $(a).bind( "click", function(o) {
                //Display url in overlay window using parent function
                var url = o.currentTarget.href;
                if( url == null || url.length==0) return false;
                //alert("link clicked " + o.currentTarget.href)
                var title = "Details";
                var height = 700;
                var width = 800;
                parent.WinOverlayExtShow(url,title,height,width);
                return false;
            });        
        }
    }
    catch(err) {}
}
</script>   
```
ここに！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/8fb8dc95-d7cb-ede8-44bd-b32684a0656b.png)
こんな風に。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/6b184251-6a66-1073-d9a5-48a05f14a4fc.png)
で、保存して実行すると。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/216fbf09-c704-7f6f-aff7-177dead828e5.png)

では、失礼します。