Last month, we saw in a post how a Spotfire analysis can be customized simply by changing the link parameters. Today’s post digs a little deeper and shows how the JavaScript API can be used to embed Spotfire in a page to allow for dynamic configuration, but also event listening and automated navigation.
The example we showed last week had a Spotfire analysis embedded in a page using an iFrame. Using the JavaScript API, dynamic Spotfire content can instead be embedded directly in a DIV or SPAN tag of your HTML.
Here’s the JavaScript & HTML needed to make this happen:
1: <script type="text/javascript" src="https://myserver/SpotfireWeb/GetJavaScriptApi.ashx?Version=6.0"></script>
2: <script>
3: window.onload = function()
4: {
5: var customization = new spotfire.webPlayer.Customization();
6: var app = new spotfire.webPlayer.Application("https://myserver/SpotfireWeb/", customization);
7: var configuration = '';
8: app.open("/path/to/spotfire/analysis/myanalysis", "contentpanel", configuration);
9: }
10: </script>
11: <div id="contentpanel"></div>
Line 1: Include the Spotfire JavaScript API from the server.
Line 5: Instantiate a new instance of the Spotfire web object. Multiple web objects can be embedded on the same page.
Line 6: Specify the URL of the Spotfire Web Player Server, along with optional configuration settings. These optional settings allow you to turn onoff various UI elements, such as the toolbar and header.
Line 8: Open the analysis! The Spotfire content will be rendered in the specified HTML content tag. The open method also can receive an optional configuration setting that allows for setting the initial state of the analysis using a Spotfire configuration block.
Here’s an example of Spotfire content being integrated with a HTML5 responsive design portal using the JavaScript API. In this example, the portal’s navigation controls are used to send navigation events to the Spotfire content. This allows the portal to control the navigation and to tailor the view for the user.
The JavaScript library includes robust capabilities for not only controlling display and navigation, but also for event listening. This allows for bi-directional communication and data passing between Spotfire and the portal or HTML.
Here is a summarized class view of the available objects. For a complete and updated view, visit the JavaScript API reference found here.
Note that before using Spotfire’s JavaScript API, it must first be enabled on the Spotfire Web Player Server. This can easily be done by setting the “javaScriptApi” value to “true” in the server’s web.config file:
<javaScriptApi enabled="true" domain="" />
Reference:
