Skip to main content

Web Player: Register Event Handlers

This example shows how to register event handlers when the active page changes, or when the user marks in a visualization.

The following example shows how to register event handlers when the active page changes, or when the user marks in a visualization.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>API Scenario</title> <script type="text/javascript" src="../GetJavaScriptApi.ashx?Version=1.0"></script> <script type="text/javascript"> window.onload = function() { var customization = new spotfire.webPlayer.Customization(); var app = new spotfire.webPlayer.Application("../SpotfireWeb/", customization); // Register an error handler to catch errors. app.onError(errorCallback); // Register event handler for document opened event. app.onOpened(onOpenedCallback); // Open an analysis app.open( "TIBCO Spotfire Example Files/SalesAndMarketing/SalesAndMarketing", "webPlayer", ""); } function errorCallback(errorCode, description) { // Displays an error message if something goes wrong in the Web Player. alert(errorCode + ": " + description); } function onOpenedCallback(analysisDocument) { // Register event handler for page change events. analysisDocument.onActivePageChanged(onActivePageChangedCallback); // Register event handler for marking change events. analysisDocument.marking.onChanged( "MarkedRows", "SalesAndMarketing", ["City", "Brand A Yr 1"], 5, onMarkingChangedCallback); } function onMarkingChangedCallback(marking) { // Iterate through all columns. for (var columnName in marking) { var rows = marking[columnName].length; // Iterate through all rows for each column. for (var i = 0; i < rows; i++) { // Get the marked data: marking[columnName][i] } } } function onActivePageChangedCallback(pageState) { alert("The new page has the title: " + pageState.pageTitle); } </script> </head> <body> <div id="webPlayer" style="width: 800px; height: 600px;"></div> </body> </html>