Subscribe to feed

 

How to Enumerate and Execute Legacy Bookmarks

This mashup demonstrates how to enumerate and execute legacy bookmarks in the Java Script API.

Overview

This article concerns the legacy bookmarks in the 3.1 Javascript API. For the bookmarks in Spotfire 3.3 and later, see How to Enumerate and Execute Bookmarks.

This mashup loads an analysis, extracts the bookmarks and lists them as links to the left of the analysis:

Prerequisites

• A Web Player 3.1 with the mashup API enabled. Refer to TIBCO Spotfire – Web Player Manual for details.
• BookmarkApiScenario.zip: The downlad contains two files implementing this example:
  • The BookmarkApiScenario.htm file references the Web Player API and the javascript file.
  • The BookmarkApiScenario.js file contains all of the code and logic. There are three paths that might need to be changed in the files.
  The mashup is assumed to be placed in a separate web application on the same server as the Web Player. If the example files are placed elsewhere, or if another file than Medical Performance is used, configure the files:
  • In the HTML file, change the ../SpotfireWeb/GetJavaScriptApi.ashx?Version=3.1 path.
  • In the javascript file, change the ../SpotfireWeb/ path and the library analysis path /Demo/Analysis Files/Medical Performance/Medical Performance. Both are placed at the top:

    var webPlayer;
    var webPlayerRelativePath = "../SpotfireWeb/";
    var analysisPath = "/Demo/Analysis Files/Medical Performance/Medical Performance";

Window.onload

This function is called by the browser when the page is loaded. It creates the layout, the panels and the <div> tags, and finally opens the web player in the <div> tag.

window.onload = function()
{
    document.documentElement.style.overflow = "hidden";

    createLayout();
    openWebPlayer();
};

createLayout

This function creates two <div> controls, one for the list of bookmark links and one for the Web Player analysis.

var createLayout = function()
{
    // Doc the body to the edges of the window
    document.body.style.width = "100%";
    document.body.style.height = "100%";
    document.body.style.margin = "0px";

    var width = document.documentElement.clientWidth;
    var height = document.documentElement.clientHeight;

    var bookmarkPanelDiv = document.createElement("div");
    bookmarkPanelDiv.id = "bookmarkPanelDiv";
    bookmarkPanelDiv.style.position = "absolute";
    bookmarkPanelDiv.style.backgroundColor = "silver";
    bookmarkPanelDiv.innerHTML = "Loading bookmarks...";

    var webPlayerDiv = document.createElement("div");
    webPlayerDiv.id = "webPlayerDiv";
    webPlayerDiv.style.position = "absolute";

    document.body.appendChild(bookmarkPanelDiv);
    document.body.appendChild(webPlayerDiv);

    resize();
};

openWebPlayer

Creates the Web Player analysis in the <div> tag created by createLayout().

var openWebPlayer = function()
{
    // The path to the analysis to open.
    var webPlayerCustomization = new spotfire.webPlayer.Customization();

    // If the mashup is not located in a sub folder to the webroot folder of the Web Player, 
    // the path below needs to be changed.
    webPlayer = new spotfire.webPlayer.Application(webPlayerRelativePath, webPlayerCustomization);

    // When the document is opened, we want to retrieve all bookmarks from
    // the Web Player and create a link for each name.
    var onOpened = function(analysisDocument)
    {
        loadBookmarks();
    };

    // Show a simple alert dialog if something goes wrong.
    var onError = function(errorCode, description)
    {
        alert(errorCode + ": " + description);
    };

    webPlayer.onOpened(onOpened);
    webPlayer.onError(onError);
    webPlayer.open(analysisPath, "webPlayerDiv", "");
};

resize

Function handles the resize of the two absolutely positioned <div> tags. This function is connected to the browser event window.onresize.

window.onresize = function()
{
    resize();
};

var resize = function()
{
    var bookmarkPanelWidth = 200;
    var width = document.documentElement.clientWidth;
    var height = document.documentElement.clientHeight;

    var bookmarkPanelDiv = document.getElementById("bookmarkPanelDiv");
    if (bookmarkPanelDiv != null)
    {
        bookmarkPanelDiv.style.width = bookmarkPanelWidth + "px";
        bookmarkPanelDiv.style.height = height + "px";
    }

    var webPlayerDiv = document.getElementById("webPlayerDiv");
    if (webPlayerDiv != null)
    {
        webPlayerDiv.style.left = bookmarkPanelWidth + "px";
        webPlayerDiv.style.width = (width - bookmarkPanelWidth) + "px";
        webPlayerDiv.style.height = height + "px";
    }
};

loadBookmarks

This function is called after the document is loaded. The function reads the bookmarks in the loaded analysis and creates a link for each bookmark. It also adds an onclick handler to each link that applies the bookmark to the document.

var loadBookmarks = function()
{
    // Retrieve all bookmarks.
    webPlayer.analysisDocument.getBookmarkNames(
      function(bookmarks)
      {
          // When we get the result from the server, iterate through
          // all bookmark names and create a link for each.
          var bookmarkPanelDiv = document.getElementById("bookmarkPanelDiv");
          bookmarkPanelDiv.innerHTML = "";

          for (var i = 0; i < bookmarks.length; i++)
          {
              var bookmark = document.createElement("a");
              bookmark.href = "#";
              bookmark.innerHTML = bookmarks[i] + "<br />";
              bookmark.bookmarkName = bookmarks[i];

              // When a link is clicked, we want to apply that bookmark name.
              bookmark.onclick = function()
              {
                  webPlayer.analysisDocument.applyBookmark(this.bookmarkName);
              };

              bookmarkPanelDiv.appendChild(bookmark);
          }
      });
};