Difference between revisions of "Web Development"
(→Javascript) |
(→Javascript) |
||
Line 138: | Line 138: | ||
var toolbar = new XLCubed.WorkbookToolbar(toolDiv, book); | var toolbar = new XLCubed.WorkbookToolbar(toolDiv, book); | ||
</pre> | </pre> | ||
+ | |||
+ | ===Events=== | ||
+ | An XLCubed workbook will fire events which you can attach to to customise your page and link reports together. | ||
+ | |||
+ | Binding to events uses the following syntax | ||
+ | <pre> | ||
+ | //book already created | ||
+ | book.Bind(eventName, eventHandlerFunction) | ||
+ | </pre> | ||
+ | |||
+ | The eventHandlerFunction takes two arguments, an event object and a data object containing information about the event that fired. | ||
+ | |||
+ | <pre> | ||
+ | function loadXLCubed(){ | ||
+ | //book already created | ||
+ | book.Bind("load", loadHandler); | ||
+ | } | ||
+ | |||
+ | |||
+ | function loadHandler(e, data){ | ||
+ | //we can get a reference to the book from here | ||
+ | var b = data.workbook; | ||
+ | alert("loaded"); | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | The events fired are | ||
+ | |||
+ | {| border=1 | ||
+ | !Event Name !! Data Properties | ||
+ | |- | ||
+ | load | workbook | ||
+ | |} | ||
+ | |||
[[Category:Development]] | [[Category:Development]] |
Revision as of 12:01, 14 March 2011
XLCubed Web Edition allows application developers to embed XLCubed reports in their own web pages.
This page describes the web API, and the html and javascript required to embed reports.
Contents
Embedding
Required Includes
Embedded XLCubed reports reference various javascript libraries which must be included in your page.
You should change the references to "MyServerName" to the name of the XLCubed web site, eg: "WebServer01/XLCubedWeb"
Required Css:
<link rel="stylesheet" type="text/css" href="http://MyServerName/Css/XLCubedWeb.css" /> <link rel="stylesheet" type="text/css" href="http://MyServerName/Css/XLCubed.Workbook.css" /> <link rel="stylesheet" type="text/css" href="http://MyServerName/Css/redmond/jquery-ui-1.8.custom.css" /> <link rel="stylesheet" type="text/css" href="http://MyServerName/Css/redmond/jquery.treeview.css" />
Required Javascript:
<script type="text/javascript" src="http://MyServerName/js/JQuery/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="http://MyServerName/js/JQuery/jquery-ui-1.8.custom.min.js"></script> <script type="text/javascript" src="http://MyServerName/js/JQuery/jquery.treeview.min.js"></script> <script type="text/javascript" src="http://MyServerName/js/JQuery/jquery.treeview.async.js"></script> <script type="text/javascript" src="http://MyServerName/js/JQuery/jquery.cookie.js"></script> <script type="text/javascript" src="http://MyServerName/js/JQuery/jquery.n-contextmenu.js"></script> <script type="text/javascript" src="http://MyServerName/js/JQuery/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="http://MyServerName/js/JQuery/jquery.xlcubedextensions.js"></script> <script type="text/javascript" src="http://MyServerName/js/microsoft/microsoftajax.js"></script> <script type="text/javascript" src="http://MyServerName/js/XLCubed.Web.js"></script> <script type="text/javascript" src="http://MyServerName/js/XLCubed.Workbook.js"></script> <script type="text/javascript" src="http://MyServerName/js/XLCubed.Toolbars.js"></script> <script type="text/javascript" src="http://MyServerName/js/XLCubed.Repository.js"></script> <script type="text/javascript" src="http://MyServerName/js/XLCubed.DialogManager.js"></script> <script type="text/javascript" src="http://MyServerName/js/XLCubed.Controls.js"></script> <script type="text/javascript" src="http://MyServerName/js/XLCubed.Dialogs.js"></script> <script type="text/javascript" src="http://MyServerName/WebServices/WorkbookService.svc/js"></script>
Page Markup
XLCubed reports are loaded into a div element, which requires markup in the following style
<div id="workbookdiv" style="position:relative;height:300px;width:600px;border:1px solid silver;"></div>
The id attribute is mandatory, and must be unique in the page.
The div must have the position of it's style set, either inline as above or via CSS. It must be relative or absolute.
Javascript
Loading
Initialisation of the workbook is done via javascript, the simplest example is as follows:
<script> function loadXLCubed(){ //Initialise XLCubed var xlcubedOptions = { BaseUrl:"http://MyServerName" }; XLCubed.Settings.Init(xlcubedOptions); //create the XLCubed workbook var div = document.getElementById("workbookdiv"); var book = new XLCubed.Workbook(div); //load a report into the workbook book.Load("MyFolder/MyReport.xml"); } </script>
Here MyServerName must again be replaced with the actual XLCubed web site.
The string passed to the Load() function is the path in the repository to an existing report published from Excel.
Impersonation
XLCubed can impersonate a named user if required. To do this the following API can be called.
//Set up the user we want to run queries as var logonOptions = { Username:"MyUsername", Domain:"MyDomain", Password:"MyPassword"}; XLCubed.Settings.Logon(logonOptions);
The Logon() function must be called after XLCubed.Settings.Init() and before book.Load()
Parameters
If a report is published with web parameters, these can be setup through the API.
You can load a report with parameters set as follows:
//create book as above... var params = { Date:"January 2010", Geography:"Europe" }; book.Load("MyFolder/MyReport.xml", params);
After a book has been loaded you can update the parameters as follows:
//book variable from elsewhere, the report is already loaded var params = { Date:"March 2010", Geography:"America" }; book.ApplyParameters(params);
Toolbar
You can create a toolbar for your report using the following
Markup:
<div id="toolbar"></div>
Script:
//book already created var toolDiv = document.getElementById("toolbar"); var toolbar = new XLCubed.WorkbookToolbar(toolDiv, book);
Events
An XLCubed workbook will fire events which you can attach to to customise your page and link reports together.
Binding to events uses the following syntax
//book already created book.Bind(eventName, eventHandlerFunction)
The eventHandlerFunction takes two arguments, an event object and a data object containing information about the event that fired.
function loadXLCubed(){ //book already created book.Bind("load", loadHandler); } function loadHandler(e, data){ //we can get a reference to the book from here var b = data.workbook; alert("loaded"); }
The events fired are
load | workbookEvent Name | Data Properties |
---|