Difference between revisions of "Web Development"

(Javascript)
Line 9: Line 9:
 
Embedded XLCubed reports reference various javascript libraries which must be included in your page.
 
Embedded XLCubed reports reference various javascript libraries which must be included in your page.
  
Yuo should change the references to "MyServerName" to the name of the XLCubed web site,
+
You should change the references to "MyServerName" to the name of the XLCubed web site,
 
eg: "WebServer01/XLCubedWeb"
 
eg: "WebServer01/XLCubedWeb"
  
 
Required Css:
 
Required Css:
    <link rel="stylesheet" type="text/css" href="http://MyServerName/Css/XLCubedWeb.css" />
+
<pre>
    <link rel="stylesheet" type="text/css" href="http://MyServerName/Css/XLCubed.Workbook.css" />
+
<link rel="stylesheet" type="text/css" href="http://MyServerName/Css/XLCubedWeb.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/XLCubed.Workbook.css" />
    <link rel="stylesheet" type="text/css" href="http://MyServerName/Css/redmond/jquery.treeview.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" />
 +
<pre>
 
 
 
Required Javascript:
 
Required Javascript:
    <script type="text/javascript" src="http://MyServerName/js/JQuery/jquery-1.4.2.min.js"></script>
+
<pre>
    <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-1.4.2.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-ui-1.8.custom.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.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.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.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.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/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/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.Web.js"></script>
    <script type="text/javascript" src="http://MyServerName/js/XLCubed.Workbook.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.Toolbars.js"></script>
    <script type="text/javascript" src="http://MyServerName/js/XLCubed.Repository.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.DialogManager.js"></script>
    <script type="text/javascript" src="http://MyServerName/js/XLCubed.Dialogs.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>
+
<script type="text/javascript" src="http://MyServerName/WebServices/WorkbookService.svc/js"></script>
 +
</pre>
  
  
Line 45: Line 50:
 
XLCubed reports are loaded into a div element, which requires markup in the following style
 
XLCubed reports are loaded into a div element, which requires markup in the following style
  
    &lt;div id="workbookdiv" style="position:relative;height:300px;width:600px;border:1px solid silver;"&gt;&lt;/div&gt;
+
<pre>
 +
&lt;div id="workbookdiv" style="position:relative;height:300px;width:600px;border:1px solid silver;"&gt;&lt;/div&gt;
 +
</pre>
  
 
The id attribute is mandatory, and must be unique in the page.
 
The id attribute is mandatory, and must be unique in the page.
Line 55: Line 62:
 
Initialisation of the workbook is done via javascript, the simplest example is as follows:
 
Initialisation of the workbook is done via javascript, the simplest example is as follows:
 
<pre>
 
<pre>
    <script>
+
<script>
    function loadXLCubed(){
+
function loadXLCubed(){
        //Initialise XLCubed
+
    //Initialise XLCubed
        var xlcubedOptions = { BaseUrl:"http://MyServerName" };
+
    var xlcubedOptions = { BaseUrl:"http://MyServerName" };
        XLCubed.Settings.Init(xlcubedOptions);
+
    XLCubed.Settings.Init(xlcubedOptions);
  
        //create the XLCubed workbook
+
    //create the XLCubed workbook
        var div = document.getElementById("workbookdiv");
+
    var div = document.getElementById("workbookdiv");
        var book = new XLCubed.Workbook(div);
+
    var book = new XLCubed.Workbook(div);
  
        //load a report into the workbook
+
    //load a report into the workbook
        book.Load("MyFolder/MyReport.xml");
+
    book.Load("MyFolder/MyReport.xml");
    }
+
}
    </script>
+
</script>
 
</pre>
 
</pre>
 +
 
Here MyServerName must again be replaced with the actual XLCubed web site.
 
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.
 
The string passed to the Load() function is the path in the repository to an existing report published from Excel.
 
[[Category:Development]]
 
[[Category:Development]]

Revision as of 11:36, 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.

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" />
<pre>
	
Required Javascript:
<pre>
<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

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.