Sharperlight ships with the Kendo JavaScript library.
The Kendo JavaScript library provides various WEB UI controls that can be combined with Sharperlight's published queries to create various web interfaces.
In this article, we will use the kendoDropDownList control.
There are three things to prepare: the HTML code (including JavaScript code) where the kendoDropDownList control is defined, the published query that is the container for the HTML code, and the published query that supplies dataset to the kendoDropDownList control.
The completed report looks like this.
Writing HTML code (including JavaScript code)
Header
Write code that references components of the Kendo JavaScript library.
Body of HTML code
➊: This is where Kendo DropDownList control is created.
➋: This represents the URL for the Sharperlight logo and the actual URL is defined the published query which is the container of this HTML code.
➌: They are Sharperlight specific tags and {*DIctionary.Code.Version} gets the translation of the word 'Version', and {*Application.Version} gets the version of Sharperlight installed.
The Script
Here we define the Kendo DropDownList control and call the data supply functions.
The main body of the Script
We define some global variables and place the code for building KENDO DropDownList control.
We also call a functuon which fetch the data and feed it to the control at the end.
The function to create datasource for KENDO DropDownList control
We create KENDO datasource definition here.
The global variable which holds the datasource URL i.e. the URL of a Sharperlight published query is used.
The output name of the query must be specified for the Schema Model definition.
The function to fetch and feed the data to KENDO DropDownList control
This function does fetching data with the KENDO datasource definition created by the function mentioned above and feed it to the KENDO DropDownList control.
Actual Code
<!DOCTYPE html>
<html>
<head>
<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"/>
<title>Qiita KENDO</title>
<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.default.min.css" />
<link rel="stylesheet" type="text/css" href="{*Url.Root}Resources/kendo/styles/kendo.default.mobile.min.css" />
<link rel="stylesheet" type="text/css" href="{*Url.Root}Resources/kendo/styles/kendo.silver.min.css"/>
<link rel="stylesheet" type="text/css" href="{*Url.Root}Resources/kendo/styles/kendo.silver.mobile.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>
<script type="text/javascript" src="{*Url.Root}Resources/kendo/js/kendo.timezones.min.js"></script>
</head>
<body style="font-family: arial; font-size:13px">
<div>
<table class="QiitaSample_Table">
<tr>
<td class="QiitaSample_Table_ColA"><div>States in Australia:</div></td>
<td class="QiitaSample_Table_ColB"><input id="KDD_ListOfStates" /></td>
</tr>
</table>
</div>
<div id="poweredBySharperlight" style="position: absolute; top: 1px; left: 300px;">
<a href="https://www.sharperlight.com" target="_blank">
<img src="{*Row.imgURLSharperlight.text}" title="{*Dictionary.Code.Version} {*Application.Version}" style="width: 48px; height: 48px;"/>
</a>
<div style="font-size:9px; font-weight: bold; position: relative; top: -32px; left: 48px;">Powered By Sharperlight</div>
</div>
<script>
var gURL_ReadListOfStates = "{*Row.ReadListOfStates.text}";
var gKddl_ListOfStates;
$(function () {
$("#KDD_ListOfStates").kendoDropDownList({
dataTextField: "dsStateName",
dataValueField: "dsStateId",
optionLabel: {
dsStateName: "Please select State here ...",
dsStateId: 0
},
change: function(e) {
var value = this.value();
},
optionLabelTemplate:'<span style="color:lightgray">-- Please select --</span>'
});
gKddl_ListOfStates = $("#KDD_ListOfStates").data("kendoDropDownList");
_ListOfStates_Refresh();
});
function _Datasource_States_Create(){
try{
var dsStates = new kendo.data.DataSource({
serverFiltering: false,
transport: {
read: {
datatype: "jsonp",
url: gURL_ReadListOfStates
}
},
schema: {
model: {
fields: {
dsStateId: { type: "number" },
dsStateCode: { type: "string" },
dsStateName: { type: "string" },
}
}
}
});
return dsStates;
}catch (err){
alert("Error in Datasource_States_Create(): " + err.message);
return null;
}
};
function _ListOfStates_Refresh(){
try{
var ds = _Datasource_States_Create();
if (ds != null){
ds.read().then(function (){
var data = ds.data();
if (data.length > 0){
gKddl_ListOfStates.setDataSource(ds);
gKddl_ListOfStates.refresh();
gKddl_ListOfStates.value(0);
}else{
throw ("Error in _ListOfStates_Refresh(): " + "States Dataset has not been populated yet.");
}
});
}
}catch (err){
throw ("Error in _ListOfStates_Refresh(): " + err.message);
}
};
</script>
</body>
</html>
Once the HTML code is ready, it is set to the published query prepared as its container.
Setting the HTML code to a Published Query
Creating a Published Query
Launch Publisher from the Sharperlight application menu.
Create a new published query. After entering the Group Name and Code, start creating the query with Edit Query button.
Since this is a query as a container, we create a query that returns only one row.
Therefore, we use a Custom Defined Dataset and define one record.
As output items, define the published query URL for the data source and the URL for the logo using expressions.
The expression for the datasource
The expression for the logo
Importing HTML code to a Published Query
Once finish creating the query, go to the Options tab.
Here we use Resources and Custom HTML properties.
First, open the Resources property and import the HTML code file you created.
➊New、➋Specify file path、and➌copy the resource reference code
Go to Custom HTML property. Paste the copied resource reference code and you're done.
Press OK to save. You have now imported your HTML code into the container published query.
Creating a Published Query for the datasource
Finally, create a published query that feeds the KendoDropDownList control. This is one of ways for using a published query.
A published query can be an endpoint that uses URL parameters to return a dataset in JSON format.
Start creating new published query with Sharperlight Publisher.
Its query definishon is something like this for this time. The dataset is created with Custom Defined Dataset.
Then its output items are like this.
Give name for each output items and their name is used in the JavaScript code to refer to the output fields.
This completes the definition of the published query for data supply. Press OK to save.
Operation check
Start the Sharperlight service and select View Report menu item from the right-click menu in Publisher.
A page like this will appear.
When I click on the dropdown list, I would expect it to show selectable data.
Please have fun creating a variety of interactive reports by combining Sharperlight's Published Query with KENDO UI Controls.
Thank you for reading this article.