Embedding Dynamic Reports using JavaScript

You can also use JavaScript and the Embedded Reporting object from the API to embed reports. This object has three primary methods: create, get, and remove. Remember that JavaScript is case-sensitive! All three methods operate with the following properties:

Property	Type	Description
applicationUrl	string	Required The URL of your Logi Info application.
report	string	Required The Logi report definition name.
autoSizing	string	Required Specifies automatic resizing of the container div to show the entire report or include scroll bars. Valid values include:"none", "height", "width", "all".
heightOffset	number	Embedded content frame padding has been increased to 20px. This property allows you to override that value, if desired.
linkParams	array	A name-value collection of report parameters. Example: {"Year":"2010", "CustomerId" : 1}. You may not use a parameter named "UserName".
secureKey	string	A SecureKey value; required when using SecureKey Authentication.
iframeId	string	Read Only Returns the id attribute value of the iFrame element that contains the embedded report.
iframe	object	Read Only Returns the iFrame DOM object that contains the embedded report page

Using the create() and remove() Methods

1. Create a container for the report in the HTML markup:

<div id="reportContainer" />

2. In your JavaScript code, create array of report options:

var options = {};
options.applicationUrl = "https://sampleapps.logianalytics.com/LogiApp";
options.report = "EmbeddedReports.DataTable";
options.autoSizing = "all";
options.secureKey = "";
options.linkParams = {"CustomerID" : "VINET", "StartDate" : "01/01/2009" };

3. Create a report instance:

var report = EmbeddedReporting.create('reportContainer', options);

4. Remove the report instance:

EmbeddedReporting.remove('reportContainer');

Here's the JavaScript used in this page, with the onClick events for the two buttons, to create and remove the report:

function CreateReport() {
var options = {
applicationUrl : "https://sampleapps.logianalytics.com/LogiApp",
report : "EmbeddedReports.DataTable",
autoSizing : "all",
linkParams : { "CustomerID": "VINET", "StartDate": "01/01/1976" }
};
var report = EmbeddedReporting.create('reportContainer', options);
}
function RemoveReport() {
EmbeddedReporting.remove('reportContainer');
}

Using the get() Method

To manipulate existing reports created with the API, start by getting the report object, using its container div ID:

var report = EmbeddedReporting.get('containerId')

Report object properties can be directly manipulated:

EmbeddedReporting.get('containerId').report = "SalesByMonth"

The report object also has these methods available: