Skip to main content

Logi Widgets

  • Updated

Logi Widgets

Logi Widgets are fully-functional reports that can be embedded within HTML pages that are unrelated to Logi applications. Developers can therefore make the functionality of Logi reports available within independent web pages, including blogs.

The following topic guides developers through the process of creating and using widgets:

About Logi Widgets

The Logi Widget is a Logi report with special properties that uses a special type of definition. In Logi Studio, widget definitions reside in a special Widgets folder in the Application panel. Widgets represent a new approach to integrating Logi reports with other web pages and is an excellent alternative to using i-Frames or .NET program integration.

Our JavaScript-based Embedded Reports API is now the recommended technology for embedding Logi reports into other web pages and applications. Logi Widgets continue to be supported for backward compatibility.

When a widget is constructed and then previewed in Studio, the report is displayed in the Workspace panel as usual but it's followed by the HTML and JavaScript code needed to embed it in another web page.

<FORM> <!-- The FORM element is required if there are INPUT elements in the Widget -->

<!-- Include this once for each page. -->
<SCRIPT src="http://localhost/testapp/rdTemplate/rdWidget/rdWidget.js"> </SCRIPT>

<!-- Include this for each widget on the page. -->
<DIV ID="myWidgetDiv" >Loading...</DIV>
<SCRIPT>
var myWidget= new rdLogiWidget;
myWidget.definition="MyWidget";
myWidget.containerID="myWidgetDiv";
myWidget.setParameter("lgxPreview","70555");
myWidget.load();
</SCRIPT>

</FORM>

This script, shown in the example above, can be copied and pasted from Logi Studio into any HTML web page in order to display the widget there. The script consists of these four parts:

  1. The form container. If the widget(s) include any Input elements, then the script must be within <FORM></FORM> tags.

  2. The script declaration statement, within <SCRIPT></SCRIPT> tags. Only one of these statements is needed per HTML page, even if there are multiple widgets on a page.
    3. The URL specified in the script declaration statement must be valid and available, from a connectivity and security perspective, to any consumers of the widget. In this respect, a Logi application that contains widgets is deployed to a production web server in exactly the same way as any Logi application and this URL must point to the production server. The file specified, "rdWidget.js", contains JavaScript code for facilitating the widgets and is static, i.e. it is not generated or customized for any specific widget.
  3. A division container for the actual script, one per widget occurrence, within <DIV></DIV> tags. If there are multiple widgets on a page, each division container must be given a unique ID.
  4. The actual script statement, one per widget occurrence, within <SCRIPT></SCRIPT> tags. If there are multiple widgets on a page, the myWidget.containerID value must be set to the appropriate division ID value.

Passing Parameters to the Widget

The myWidget.setParameter function is used to specify parameter name-value pairs, if any, to be passed to the widget, and you can add multiple function calls as desired. In the example above, the widget will be called with a Request variable named "lgxPreview" that has a value of "70555", appearing in the query string as "&lgxPreview=70555". This was included in the example because the widget was previewed in Studio but is not necessary in your production code. Parameters passed in this manner are available in the widget definition as @Request tokens and can be used to pass in security parameters, variables, etc.

The values passed in a parameter can be hard-coded:

    myWidget.setParameter("UserName","JHarlan");

or set using a Token:

    myWidget.setParameter("ReportDate","@Function.Date~");

or returned from a separate Javascript, PHP, or other script function in the HTML page:

    myWidget.setParameter("UserName",<?php GetUser();?>");

As we have seen, the HTML and Javascript required to integrate a widget into an HTML page is simple and straightforward. In Creating a Widget Definition, we'll explore how a widget definition is created.