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

以前の記事[【パブリッシャー】Sharperlightクエリーを利用したKENDO DataSource - UI:DropDownList](https://qiita.com/Miki_Yokohata/items/daec3abd756f078567ba)の**ListBox**コントロール版です。

## 公開クエリの作成 ##
Sharperlightアプリケーションメニューからパブリッシャーを起動します。
`新規`ボタンで新しい公開クエリの作成を開始します。
### 一般タブとクエリの編集 ###
公開クエリ上の`一般`タブでは、コード、グループおよびタイトルを記入します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/be1f0c2d-0291-c475-320e-31f5c5a4bcf0.png)
公開クエリにはクエリ定義が必須条件なので、`クエリを編集`ボタンでクエリの定義を開始します。
`製品`には**システム**、`テーブル`には**ユーザーアカウント**、`モード`に**CU**(現在のユーザーのみ)を設定、つまり現在ログインしているユーザーの詳細一行のみを返すクエリです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/044282fe-ddc5-394a-e47b-88614cc3bc6e.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>Sharperlight</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;
			}
            .demo-section label {  
                margin-bottom: 5px;  
                font-weight: bold;  
                display: inline-block;          
            }
            .demo-section {  
                max-width: none;  
                width: 515px;  
            }  
            .k-listbox {  
                width: 236px;  
                height: 310px;  
            }  
            .k-listbox:first-of-type {  
                width: 270px;  
                margin-right: 1px;  
            }
            #targetListBox{
                width: 240px;  
                height: 310px;  
            } 
		</style>

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

		<!-- ここに KENDO ListBox コントロールが作成される -->
        <!-- KENDO ListBox control is created here -->
        <div class="demo-section k-content">  
            <div>
                <label for="BPList" id="BPLabel">Business Partners</label>  
                <label for="targetListBox" id="SelectedBPList" style="margin-left:184px">Selected Business Partner</label>  
                <br />  
                <select id="BPList" title="Business Partner"></select>             
                <select id="targetListBox" title="Selected Business Partner"></select>  
            </div>
        </div>

		<!-- スクリプトの記述 -->
        <!-- The script description -->
        <script>
			/* スクリプトの開始位置 */
			/* Script start point */
			$(document).ready(function() {
				var ds = _Datasource_Create();

                // KENDO ListBox コントロールの作成 / Creating KENDO ListBox Control
				$("#BPList").kendoListBox({
                    dataSource: ds,
                    connectWith: "targetListBox", 
                    dataTextField: "BPName",
					dataValueField: "BPCode",
                    autoBind:false,
                    toolbar: {  
                        tools: ["moveUp", "moveDown", "transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]  
                    }
            	});

                // データセットを取得して、ListBox コントロールに設定する / Get a dataset and set it in a ListBox control
                ds.read();

                // 選択済み用の KENDO ListBox コントロールの作成 / Creating KENDO ListBox Control for selected items
				$("#targetListBox").kendoListBox({
                    dataTextField: "BPName",
					dataValueField: "BPCode"
                });  

            });

			/* データソース作成用の関数 */
            /* 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 ListBoxコントロールを表示するためのHTMLコードを記述。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/c825adeb-3e17-ffcb-629a-d74ca524bb0f.png)
更にスクリプトとして、KENDO ListBoxコントロールを生成したり、データソースを取得するコードを記述しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/26db56e5-7fec-7690-3504-b3b5d610429f.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/8ac091a9-c977-12f9-4f6e-38d58388ba6b.png)

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