【パブリッシャー】HTMLとJavaScriptで対話型WEBレポートを作成してみる

[Sharperlight](https://sharperlight.jp/)パブリッシャーを利用して、WEBレポートを作成し会社内LAN上等に公開する場合は、通常は部門間および社員間で情報をリアルタイムで共有するだけで、閲覧している社員はそのレポートに対してなんらアクションを起こすことができません。
しかしながらWEBレポートを通じで、閲覧者に入力を促したい場合が業務上多々存在すると思われます。
そのような場合、HTMLとJavaScriptを利用して、[Sharperlight](https://sharperlight.jp/) Webレポートを対話型レポートに拡張することが簡単に行えます。そうすることで、[Sharperlight](https://sharperlight.jp/)にはセキュリティ機能組み込み可能な**書き戻し機能**が標準で備わっているので、[Sharperlight](https://sharperlight.jp/)RESTfulサービス経由で入力された値をデータベースに書き込むことも可能になります。

この記事では、レポート上へのテキストBOXとボタンの配置と、ボタンを押すことで入力された値を表示する簡単な対話型WEBレポートの作成方法をみていきます。
## テキストBOXとボタンの配置
[Sharperlight](https://sharperlight.jp/)パブリッシャーを起動し、新しいレポート(公開クエリ)を追加します。公開クエリの定義ダイアログが表示されたら、**グループ**と**コード**を入力します。
![2022-04-01 Figure 01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/efa1438f-c4ff-2935-d16e-3ea87759bfbc.png)
次に[クエリーを編集]ボタンでクエリビルダを開きます。[製品]には**システム**、[テーブル]には**カスタム定義のデータセット**を指定します。[データセットの定義]として、下図に示すようなデータセットを準備します。
![2022-04-01 Figure 02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/e881bee5-9d28-1702-190c-302db853d182.png)
Id、コード、摘要、金額を出力領域に設定します。それぞれの出力フィールドの名前は、**Id**、**Code**、**Desc**、**Amount**とします。
![2022-04-01 Figure 03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/6db955a3-cdb8-a339-5255-88300cc3d71f.png)
最後に拡張表現を追加して、下図のようなHTMLコードを定義します。
```
"<div id='div_" + {%Id} + "' "
+ "data-id='" + {%Id} + "' "
+ "data-code='" + {%Code} + "' "
+ "data-description='" + {%Desc} + "' "
+ "data-amount='" + {%Amount} + "' "
+ ">"
+ "<input type='text' id='input_" + {%Id} + "'>"
+ "<button id='bt_" + {%Id} + "' class='testButton' onClick='btn_Click(this.id)'></button>"  
+ "</div>"
```
![2022-04-01 Figure 04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/d3782ce9-9014-b37a-45bd-1c60f409c0ba.png)
動作時にはこのようなHTMLコードになります。
![2022-04-01 Figure 06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/0f3a53da-b50b-1b8c-257b-a815d3035590.png)
さあこれでテキストBOXとボタンの配置が終了です。[OK]ボタンで保存しましょう。
![2022-04-01 Figure 05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/67bbdf83-ab42-b97a-83a9-8817ce52397e.png)
## ボタンハンドラーの定義
今度は、配置したボタンが押された時のイベントハンドラーを準備します。
公開クエリの定義ダイアログのオプションタブへ移動し、**フッター**と**CSS**プロパティを使用してイベントハンドラーを記述します。
![2022-04-01 Figure 07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/5efef738-21b7-c4cd-7435-5d28923a8cfd.png)
先ずは、[フッター]プロパティから。[ヘッダー]プロパティでもOKですが、今回は[フッター]プロパティで説明します。[編集]ボタンを押すと、テキストエディタが起動するので、このようなJavaScriptコードを記述します。
ボタンの配置を定義した時に指定したイベントハンドラー名が```btn_Click(this.id)```だったので、関数```btn_Click(clickId)```を記述します。引数として渡された**Id**を使用して、入力値や対象行のその他の値を取得し、alertで表示します。
```<!--ReportContentSectionBegin-->```は、[Sharperlight](https://sharperlight.jp/)のコントロールタグで、このJavaScriptコードをレポートの主となる部分に記述しなさいというエンジンへの命令です。
```
<!--ReportContentSectionBegin-->
<script>
    function btn_Click(clickId){
	var id = clickId.replace('bt_','');	// idの取得
	var val = $("#input_" + id).val();	// inputテキストの取得
	var dataid = $("#div_" + id).data( "id");	// data idの取得
	var datacode = $("#div_" + id).data( "code");	// data codeの取得
	var datadesc = $("#div_" + id).data( "description");	// data descriptionの取得
	var dataamount = $("#div_" + id).data( "amount");	// data amountの取得

	// 結果を表示
	alert("あなたが入力した値および行のデータは、"
		+ "\nID: " + dataid
		+ "\nコード: " + datacode
		+ "\n摘要: " + datadesc
		+ "\n金額: " + dataamount
		+ "\n入力値: " + val);
    }
</script>
<!--ReportContentSectionEnd-->
```
![2022-04-01 Figure 08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/8e28935b-e2f6-8cef-48ee-d4c899036d95.png)
[OK]を押して保存しましょう。
最後に、配置したボタンのCSSを定義します。**CSS**プロパティの[編集]ボタンを押してテキストエディタを開きます。
```
<style type="text/css">
.testButton{
    height: 15px;
    margin-left: 2px;
}
</style>
```
![2022-04-01 Figure 09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/802e818e-d0ad-afb3-ecb0-6c4ff6f14c25.png)
[OK]を押して保存しましょう。
以上で公開クエリの設定は終わりです。[OK]を押して保存します。
## 動作確認
[Sharperlight](https://sharperlight.jp/)サービスを起動し、作成したWEBレポートをブラウザで見てみます。
このようなレポートが表示されるはずです。
![2022-04-01 Figure 10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/1447f7b7-df91-456b-5402-e9497c20dd63.png)
何かテキストBOXに入力して、ボタンを押してみましょう。このようなalertが表示されれば作成は成功です。
![2022-04-01 Figure 11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/ac6942b9-001c-b709-7867-cb93cea2ef7e.png)
ここでは、このような簡単な処理を記述してみましたが、更に[Sharperlight](https://sharperlight.jp/)の書き込みURLを利用して、RESTfulサービス経由でデータベースへの書き込みを行うことも可能です。
このように、データアクセス層の開発を[Sharperlight](https://sharperlight.jp/)に任せることで、フロントエンドの作成に時間を集中することができます。
:postbox:[Sharperlight](https://sharperlight.jp/)