Mashup Example With Multiple Views Using Spotfire® JavaScript API

Introduction

The Spotfire® JavaScript API can be used to embed a Spotfire analysis into a web page and to integrate Spotfire with other web applications.

This example creates a mashup with two components: A Spotfire analysis and the Visual Earth map. The example illustrates how multiple views (document instances) can be used to display the different parts of the Spotfire analysis and how Spotfire can be integrated with a public map service.

Prerequisites

Spotfire 7.5 and later requires HTML5, and supported browsers are IE10/11, Chrome (33-) and FireFox (27-).

Download and install the attached Mashup Multiple Views Example zip file.

• MedPerf-7-5.dxp

  The analysis file used in the mashup example. Upload this to your Spotfire Cloud account. If you want to use another Spotfire Server than Spotfire Cloud, you must change the path to that server in MapDemo.html and in Resources/MapDemo.js.

• MapDemo.html

  The html file creating the placeholders for analysis content. Add this html to your web server, or add it to the SDK along with the other mashup examples: Examples\Extensions\ SpotfireDeveloper. WebAutomationExample\. The file is reconfigured to get the JavaScript API from Spotfire Cloud. If you use another Spotfire Server, the script tag

  <script type="text/javascript"
          src="https://spotfire-next.cloud.tibco.com/spotfire/wp/GetJavaScriptApi.ashx?Version=7.5 ">
  </script>

   

  should be changed accordingly.

• Resources

  Folder containing all static resource files such as CSS, JavaScript, and images. Add this to the same location as MapDemo.html. The JavaScript file Resources\MapDemo.js must be modified in such a way that the line

   var c_analysisPath = "users/[username]/Public/MedPerf-7-5";

   

  points to your user account. The MapDemo.js script file is configured to connect to the Spotfire Cloud Server. If you use another Spotfire Server, the line

   var c_serverUrl = "https://spotfire-next.cloud.tibco.com/spotfire/wp/";

   

  should be changed accordingly.

Implementation

The example uses five views of the analysis file, placed in separate DOM elements:

• mainDocWrapper

  The primary source of user interaction:

  

• mapMarkersWrapper

  The details visualization that corresponds to markers on the map, displayed in floating view:

  

• accountDetailsWrapper

  The details visualization when selecting marker from map (or from mapMarkersWrapper detail visualization), displayed as a popup view:

  

• locationFilterWrapper

  Filter for location, displayed in a popup view:

  

• specialityFilterWrapper

  Filter for MD specialty, displayed in a popup view:

  

Each of the DOM elements is loaded with an initial page, identified by its page name in the example.

Loading of the views can be done in any order, but the first view will be loaded before any other view can start to load. Loader progress will only be showed in the first view.

The following lines of code will initiate loading all five views into separate DOM elements:

app = new spotfire.webPlayer.Application(c_serverUrl,
                                         cust,
                                         c_analysisPath,
                                         c_parameters,
                                         c_reloadAnalysisInstance);

mainDoc             = app.openDocument("mainDocWrapper",
                                       c_startPage);

mapMarkersDoc       = app.openDocument("mapMarkersWrapper",
                                       "Accounts",
                                       cust);

accountDetailsDoc   = app.openDocument("accountDetailsWrapper",
                                       "Account Summary",
                                       cust);

specialityFilterDoc = app.openDocument("specialityFilterWrapper",
                                       "Speciality",
                                       cust);

locationFilterDoc   = app.openDocument("locationFilterWrapper",
                                       "Location",
                                       cust);

For more information, see spotfire.webPlayer.Application and openDocument.

The visibility of the popouts is controlled by marking Document.marking.onChanged events. The event handlers will be set up as soon as the mainDoc is finished loading, that is, the Application.onOpened callback is called.

mainDoc.marking.onChanged(c_markingName,
                          c_tableName,
                          c_markingColumns,
                          10,
                          clearDetailMarking);

mainDoc.marking.onChanged(c_mapMarkingName,
                          c_tableName,
                          c_markingColumns,
                          10,
                          toggleShownOnMapVisibility);

The routes displayed in the map are updated in another appropriate marking Document.marking.onChanged event handler.

mainDoc.marking.onChanged(c_brandAMarkingName,
                          c_tableName,
                          c_markingColumns,
                          10,
                          updateMapRoutes);

The API example below contains a bing API credential key that you will need to replace with your own developer key for access to the Bing Maps v8 web control. 

var bing_cred = 
    '****U4jUu2pgnACTuV0vad8****8rtC3g8bY****UpYCkqxA2ornDl8Yq****';

You can get a key  by registering here: https://msdn.microsoft.com/en-us/library/ff428642.aspx

mashup_multiple_views_2.zip

mashup_multiple_views_with_loader_api.zip