Skip to main content
RSS feed Subscribe to feed


How to Create a Parameterized Dashboard

A simple ASP.NET page can be used to render a mashup page. The page in this tutorial displays a list of files to choose from.

Examples folder


Two Information Link parameters can be connected to the file and are selectable in combo boxes. The user can also select a bookmark to run when opening the file. When selection is done, the file is loaded using the Load button. It will display the multiple analysis in a list under the selection.

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\Demo1.aspx and Demo1.aspx.cs


The Demo1.aspx page has two parts:

  1. The C#/ASP.NET code handling selection options, using an Ajax update panel.
  2. The JavaScript classes, located in the <script> block in the ASPX page, integrating with the Web Player.

The C# code defines a structure called files. It describes the selectable files, their parameters and their bookmarks. These are implemented by the DxpFile, Parameter and ParameterValue sub classes in the Demo1.aspx.cs file. The structure is used to fill create the combo boxes and handle the callbacks for them, including the Load button.

The UI elements are placed in an UpdaterPanel the handles the Ajax traffic for the open parameters. The selected values are transferred to the JavaScript code by changing the script code for the onClick callback event of the Load. This callback is updated using SetLoadButtonCallback whenever a parameter value is changed in the combo boxes: fileList_SelectedIndexChanged and paramList_SelectedIndexChanged handlers.

The JavaScript code is called from the Load button through the addPlayer(fileInfo) function. The client code is handled by the following JavaScript classes:

  • FileInformation: transfers information from the C# code to the java script.
  • CurrentFilesRow: Helper class to handle a row in the information table (the list of open files in the top right corner).
  • AnalysisInformation: Holds information about one analysis in the web page. It contains both the UI elements of the page and the Web Player API object.