【パブリッシャー】Sharperlightクエリーを利用したKENDO DataSource - UI:DropDownList

以前の記事[【パブリッシャー】Sharperlightクエリーを利用したKENDO DataSourceの作成](https://qiita.com/Miki_Yokohata/items/f4b89823865e13c9a511)で得たデータセットを今回はKENDO DropDownListコントロールに渡してみようと思います。

折角なのでKENDO DropDownListコントロールをもつHTMLページをSharperlightの**カスタム形式のレポート**として作成してみます。

## 公開クエリの作成 ##
Sharperlightアプリケーションメニューからパブリッシャーを起動します。
`新規`ボタンで新しい公開クエリの作成を開始します。
### 一般タブとクエリの編集 ###
公開クエリ上の`一般`タブでは、コード、グループおよびタイトルを記入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4d12be9d-ca13-ae05-dc71-05efbea77dd9.png)
公開クエリにはクエリ定義が必須条件なので、`クエリを編集`ボタンでクエリの定義を開始します。
今回はクエリ結果を表示するレポートではなく、KENDO DropDownListコントロールを表示するだけの**カスタムレポート形式**なので、作成するクエリはダミーとします。
よって以下のようなクエリを定義してみました。
`製品`には**システム**、`テーブル`には**ユーザーアカウント**、`モード`に**CU**(現在のユーザーのみ)を設定、つまり現在ログインしているユーザーの詳細一行のみを返すクエリです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/c56afb23-3fa1-2753-318f-696a9bf3dad2.png)
`OK`ボタンでクエリを保存します。

### オプションタブとカスタムHTML ###
公開クエリ上で`オプション`タブに移動します。そして**カスタムHTML**オプションを使用します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/3591b68a-1957-351a-79f5-976851dab339.png)
`有効`チェックボックスにチェックを入れて、`編集`ボタンでエディタを開きます。
エディタに以下のコードを貼り付けます。
**参考**:[【パブリッシャー】カスタムHTMLコードをリソースとしてインポートする](https://qiita.com/Miki_Yokohata/items/f80849be87a002cc8289)
```
<!DOCTYPE html>
<html>
	<head>
		<title>Order</title>
		<meta charset="utf-8"/>
		<base href="{*Url.Root}"/>
		<link rel="shortcut icon" type="image/x-ico" href="favicon.ico"/>
		<link rel="icon" type="image/x-ico" href="favicon.ico"/>
	
		<link rel="stylesheet" type="text/css" href="{*Url.Root}Resources/kendo/styles/kendo.default.min.css" />
		<link rel="stylesheet" type="text/css" href="{*Url.Root}Resources/kendo/styles/kendo.common.min.css" />
		<link rel="stylesheet" type="text/css" href="{*Url.Root}Resources/kendo/styles/kendo.silver.min.css"/>

		<script type="text/javascript" src="{*Url.Root}Resources/jquery/jquery.min.js"></script>
		<script type="text/javascript" src="{*Url.Root}Resources/kendo/js/kendo.all.min.js"></script>
	</head>
	<body>
		<style type="text/css">
			.header {
				width: 800px;
				padding: 60px;
				text-align: center;
				background: #1abc9c;
				color: white;
				font-size: 30px;
			}
		</style>

        <!-- ここにページ見出しを表示する -->
        <!-- Display page headings here -->
        <div class="header">
			<h1>Qiita</h1>
			<p>[Sharperlight] KENDO: Datasource & UI - DropDownList</p>
            <p>[Sharperlight] KENDO: データソースとUI - DropDownList</p>
		</div>

		<!-- ここに KENDO DropDownList コントロールが作成される -->
        <!-- KENDO DropDownList control is created here -->
        <input id='BPList' style='width:300px'/>



		<!-- スクリプトの記述 -->
        <!-- The script description -->
        <script>
			var gKDDL_bp;	//KENDO DropDownList コントロール用の変数 / A variable for KENDO DropDownList control
			

            /* スクリプトの開始位置 */
			/* Script start point */
			$(document).ready(function() {
				
                // KENDO DropDownList コントロールの作成 / Creating KENDO DropDownList Control
				gKDDL_bp= $("#BPList").kendoDropDownList({
					optionLabel: "Select business partner...",
					dataTextField: "BPName",
					dataValueField: "BPCode"
				}).data("kendoDropDownList");

				// データセットを取得して、DropDownList コントロールに設定する / Get a dataset and set it in a DropDownList control
                var ds = _Datasource_Create();
                if (ds != null){				
                    ds.read().then(function (){
                        gKDDL_bp.setDataSource(ds);
                        gKDDL_bp.refresh();      
                    });
                }
			});

			/* データソース作成用の関数 */
            /* Function for creating data sources */
			function _Datasource_Create(){
					try {
						var ds = new kendo.data.DataSource({
							transport: {
								read: {
									datatype: "jsonp",
									url: "{*Url.Root}DataSource/?query=QiitaSample._ds_SAPBusinessPartners&dfmt=jsonarray&dcat=UseNames&usid={_System.Rest.Usid}"
								}
							},
							schema: {
								model: {
									fields: {
										BPCode: { type: "string" },
										BPName: { type: "string" }
									}
								}
							}
						});
						return ds;
					}catch(err){
						console.log("Error in _Datasource_Create(): " + err.message);
						return null;
					}
			};
		</script>
	</body>
</html>
```
#### HTMLコードの解説 ####
##### ヘッダー部 #####
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/f555c79c-38f9-f0bd-a804-69c02358f4d1.png)
##### ボディ部 #####
ここでは、装飾タイトルとKENDO DropDownListコントロールを表示するためのHTMLコードを記述。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/421bf73b-23f5-7190-a0db-984bf3c742fa.png)
更にスクリプトとして、KENDO DropDownListコントロールを生成したり、データソースを取得するコードを記述しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/9ee9f9dd-998e-1e40-56be-7787fd04e351.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/73ec7b89-73f2-178e-36d3-97d7ad686401.png)

これで作成は完了です。

## 検証 ##
Sharperlightサービスを起動して公開レポートを表示してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/7d5f5bbb-a220-7933-a223-daf99bf516f3.png)

この記事が皆さんの仕事のお役にたてれば光栄です。
では失礼します。