【Publisher】Creating KENDO DataSource with Sharperlight Query - UI:ListBox

This is the **ListBox** control version of the previous article [【Publisher】Creating KENDO DataSource with Sharperlight Query - UI:DropDownList](https://qiita.com/Miki_Yokohata/items/dd2e804ad4302ce2487d).

## Create a Published Query ##
Start **Publisher** from the Sharperlight application menu.
Start creating a new published query with the `New` button.
### General Tab and Editing Query ###
In the `General` tab on the published query, enter the **Code**, **Group** and **Title**.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/436e7f39-a686-6cb4-c007-bd8a71916a0b.png)
A query definition is a prerequisite for a published query, so start defining the query with the `Edit Query` button.
Set `Product` to **System**, `Table` to **User Accounts**, `Mode` to **CU** (current user only), i.e. the details of the currently logged in user A query that returns only one row.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/67fc0ecd-f376-194e-a250-a176bc22b5e7.png)
Save the query with the `OK` button.

### Options tab and custom HTML ###
Go to the `Options` tab on the published query. And use the **Custom HTML** option.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/3c1ac168-e964-d69e-2063-48715a564d2c.png)
Tick the `Enable` checkbox and open the editor with the `Edit` button.
Paste the following code into the editor.
Reference:[【Publisher】Import custom HTML code as a resource](https://qiita.com/Miki_Yokohata/items/61efa8d5ca844162ec2e)
```
<!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>
```
#### Explanation of HTML code ####
##### Header Part #####
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/9264ba0e-323f-ef4c-fb32-d35e544ea355.png)
##### Body Part #####
Here we write the HTML code to display the decorative title and the KENDO ListBox control.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/4728f118-b69e-a470-a1e9-2c107a5ea74f.png)
Furthermore, as a script, code is written to generate the KENDO ListBox control and to acquire the data source.
![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/3cfd8a4d-eb07-44e0-f21c-b4a0e9a78dd9.png)
Creation is now complete.

## Viewing in browser ##
Start the Sharperlight service and try to view the published report.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/8ac091a9-c977-12f9-4f6e-38d58388ba6b.png)

I hope this article helps you in your work.
Thank you.