以前の記事【パブリッシャー】Sharperlightクエリーを利用したKENDO DataSourceの作成で得たデータセットを今回はKENDO DropDownListコントロールに渡してみようと思います。
折角なのでKENDO DropDownListコントロールをもつHTMLページをSharperlightのカスタム形式のレポートとして作成してみます。
公開クエリの作成
Sharperlightアプリケーションメニューからパブリッシャーを起動します。
新規ボタンで新しい公開クエリの作成を開始します。
一般タブとクエリの編集
公開クエリ上の一般タブでは、コード、グループおよびタイトルを記入します。
公開クエリにはクエリ定義が必須条件なので、クエリを編集ボタンでクエリの定義を開始します。
今回はクエリ結果を表示するレポートではなく、KENDO DropDownListコントロールを表示するだけのカスタムレポート形式なので、作成するクエリはダミーとします。
よって以下のようなクエリを定義してみました。
製品にはシステム、テーブルにはユーザーアカウント、モードにCU(現在のユーザーのみ)を設定、つまり現在ログインしているユーザーの詳細一行のみを返すクエリです。
OKボタンでクエリを保存します。
オプションタブとカスタムHTML
公開クエリ上でオプションタブに移動します。そしてカスタムHTMLオプションを使用します。
有効チェックボックスにチェックを入れて、編集ボタンでエディタを開きます。
エディタに以下のコードを貼り付けます。
参考:【パブリッシャー】カスタムHTMLコードをリソースとしてインポートする
<!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コードの解説
ヘッダー部
ボディ部
ここでは、装飾タイトルとKENDO DropDownListコントロールを表示するためのHTMLコードを記述。
更にスクリプトとして、KENDO DropDownListコントロールを生成したり、データソースを取得するコードを記述しています。
これで作成は完了です。
検証
Sharperlightサービスを起動して公開レポートを表示してみます。
この記事が皆さんの仕事のお役にたてれば光栄です。
では失礼します。