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

I will pass the dataset obtained in the previous article [[Publisher] Creating KENDO DataSource with Sharperlight Query](https://qiita.com/Miki_Yokohata/items/b77bdbaba4ce39f0d979) to the KENDO DropDownList control.

Let's create an HTML page with a KENDO DropDownList control as a Sharperlight **Custom Report**.

## Creating published query ##
Launch **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/0a00ebf9-1f67-dc45-7d23-a6e398b15532.png)
A query definition is a prerequisite for a published query, so start defining the query with the `Edit Query` button.
This time, the query to be created is a dummy because it is a **Custom Report** that only displays the KENDO DropDownList control, not the report that displays the query results.
So I defined a query like this:
Set `Product` to **System**, `Table` to **User account**, `Mode` to **CU** (current user only), i.e. the details of the currently logged in user is returned only.
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2530698/80eed686-42e4-ffe9-f14b-493670330220.png)
Save it with `OK` button.

### Option Tab and Custome 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/1da90dc5-adc9-fa1c-47bb-591d2b3b3cef.png)
Check 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>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>
```
#### 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 I write the HTML code to display the decorative title and the KENDO DropDownList 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, I wrote the code to generate the KENDO DropDownList control and get the data source.
![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/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/7d5f5bbb-a220-7933-a223-daf99bf516f3.png)

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