【クエリビルダ：拡張表現】スライサーを作ってみる

今回は、[Sharperlight](https://sharperlight.jp/)の拡張表現を使って、下記のようなスライサーを作成してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/015a036b-23a0-a0cc-6236-b3218632a895.png)
### 年度スライサーの作成 ###
[Sharperlight](https://sharperlight.jp/)アプリケーションメニューから`パブリッシャー`を起動し、新規のレポートを作成します。`クエリを編集`でクエリビルダを起動し、下図のようなクエリを作成します。
過去十年 `DATE -10y` から来年 `DATE 1y` までの年度を返すクエリです。
年度は降順ソートを指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/b906b626-a7f4-d09b-6273-ef0e3bf46237.png)
出力領域の右クリックから**拡張表現を追加**を選択します。
拡張表現タブの関数一覧から、`スライサー -> Checkbox Filter Slicer -Multiple Filter values as URL parameters` を選びます。
テンプレートが構文エディタに表示されるので、編集を行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/796067c8-de37-94e6-f4d0-d513e0e879e9.png)
今回は、年度フィルターのみにするので、下図のように編集します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/77363e7d-a231-3451-a3f8-6c6c7bb082fe.png)
編集結果はこうなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/85528027-5e0f-9603-632e-bed976e5a976.png)
この拡張表現の説明は、**年度**とします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/354796e9-e522-4ac1-f08d-ac14ffdedabe.png)
次に、全ての年度を指定できるように、`全て`チェックボックスを上記クエリ結果に追加します。
再度出力領域の右クリックから**拡張表現を追加**を選択します。
編集エディタ領域に下図のような構文を記述します。これは、レポートの最初の行を処理する時点で、一列目に`全て`というチェックボックスを作成する構文です。またこの拡張表現は内部的に処理されるので非表示にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/f174229a-15fc-1d21-200f-fdb801cfaae4.png)
```
RowHeader( StartOfReport, "Col:1",
"<input type='checkbox' select='allY' id='CVAll" + DataRowCount() + "'"
+ " value='" 
+ "&fltYear=" + UrlEncode("<ALL>")
+ "'>"
+ "<label for='CVAll" + DataRowCount() + "'>"
+ HtmlEncode("全て")
+ "</label>"
,"")
```
これで出力領域の設定はこのようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/e333f716-58ed-fc98-90e6-277ab46668e9.png)
早速プレビューでクエリに異常がないかチェックしてみます。エラーはなさそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/6b2060a5-8a6b-050e-1b8b-7ce678bf2d29.png)
`OK`ボタンでクエリを保存し、さらに`適用`ボタンでレポートを保存します。
`ビュー`ボタンでレポートを表示してみます。Sharperlightサービスが開始されていることが前提ですね。このような結果になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/14a08cd9-0706-d720-41a5-4e024c48bf77.png)
### 連動させるレポートの作成 ###
SAP Business Oneデータモデルを使用してレポートを作成し、先ほど作成したスライサーと連動させてみます。
パブリッシャーで`新規`ボタンを選びレポートの作成を開始します。
`クエリを編集`ボタンでクエリビルダを起動します。
**モード**には`概要レポート`、**製品**には`SAP Bisiness One`、**Company**には`OEC Computers Australia`、そして**テーブル**には`G/L Transactions`を指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/08ba9ff4-1777-8082-d5b3-f4bc6bc99b12.png)
その他のフィルターで注目すべきものは、**Posting Date - Year**です。これにスライサーを連動させます。オプションをこのように設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/594926b5-6f06-f926-8a4b-f537056eebe9.png)
この**Year**という名前がスライサーの**ここ**と連動しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/3dbdbb09-2190-9670-b28d-3dd1272769f3.png)
`OK`ボタンでクエリを保存、レポートのグループやコード等必要な項目を記入して保存します。
### スライサーとレポートの配置 ###
スライサーとそれに連動させるレポートが出来たので、その二つを組み合わせます。
パブリッシャーで新しいレポートを作成します。
`オプション`タブの`配置`オプションを有効にします。`編集`ボタンで配置ダイアログを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/d43477ae-5ada-7f40-0214-ad458b744a0c.png)
配置ダイアログでは２列表示を指定し、作成したスライサーと連動したレポートを指定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/13160b22-5dcb-ffa9-cae3-74d7fb33dd5e.png)
配置ダイアログを閉じて、レポートを保存します。
### 検証 ###
スライサーと連動レポートを配置したレポートをブラウザで開きます。
このようにスライサーが左側、連動したレポートが右側に表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/a8b9e967-2afc-189b-186b-a96af3eed27c.png)
2013のチェックボックスにチェックを入れてみます。連動したレポートが更新され、2013年のデータのみが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/40e01ecd-e7b3-49a7-5d28-c5bd9fbe4566.png)

以上が簡単なスライサーの作成例でした。

失礼します。