Skip to main content
RSS feed Subscribe to feed


How to Control Spotfire Web Player – Part 1

The CRM mashup in this tutorial has three components: the Web Player, an external control panel from which it is possible to control the Web Player, and an external table in which markings are displayed. Until the mashup is loaded, all controls are disabled.


Examples folder

The user is presented with an overview page with key metrics. Region and sales rep filters can be changed using external controls or switching page. When a new region is selected, the sales rep list updates to the corresponding values.

The user may then move on to the planning pages for product A and B, either by using the external page navigation controls or by clicking the links in the key metrics page.

When the user makes markings in the planning pages, the external table will update with extended information about the markings. The markings may be exported to XML from the table.

Background Information
  • Installing and Configuring the JavaScript API
    Before the Web Player JavaScript API can be used to create mashups, the Web Player must be installed and configured to enable the JavaScript API.
  • Mashup Development with Multiple Servers
    JavaScript in mashup calls from the same server as the Web Player does not compromise domain security. If the mashup and the Web Player reside on different servers, attention to domain attributes is essential.
  • Spotfire SDK\Examples\JavaScript\SpotfireDeveloper.WebAutomationExample\Demo2.htm


The Demo2.htm code is grouped into functional sections:

  • Constants define variables for server URL, analysis path, and so forth.
  • Fields define variables used throughout the code.
  • Functions provide methods controlling the Web Player from the external panel.
  • Helper Functions simplify updates of the HTML components.
  • Web Player Callbacks are run during interaction with the Web Player.
  • DOM Event Handlers handle the web page when loading and re-position the HTML components when resizing.

The window.onload() event handler is called when the page is loaded. It populates external controls, creates the Web Player, and registers event handlers for it.

The window.onresize() event handler dynamically changes the size of the HTML components if the window is resized.

The Application.onOpened() event handler is called when the Web Player has finished loading. All external control are enabled when the analysis is completely set up and loaded. Marking and page change event handlers are also registered for the analysis document.
The errorCallback(errorCode, description) event handler is called and displays an error message if error occurs.

The setMajorRegion(), setSalesRep() and similar functions are called when external controls are used with the Key Metrics page. These functions apply new filter settings, change the active page, or apply bookmarks using the Web Player JavaScript API.

The markingCallback(args) event handler for Web Player markings is called when markings are made in the Brand A Planning and Brand B Planning planning pages. An external table with the marking data is be generated along with an XML string, which can be exported.