Subscribe to feed

 

How to Enumerate and Execute Bookmarks

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

Overview

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

Prerequisites

• A Web Player 3.3 with the mashup API enabled. Refer to TIBCO Spotfire – Web Player Manual for details.
• Bookmark33ApiScenario.zip: The download contains two files implementing this example:
  • The Bookmark33ApiScenario.htm file references the Web Player API and the javascript file.
  • The Bookmark33ApiScenario.js file contains all of the code and logic. 
  There are paths that may 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, configure the files:
  • In the HTML file, change the ../SpotfireWeb/GetJavaScriptApi.ashx?Version=3.3 path.
  • In the javascript file, change the ../SpotfireWeb/ path at the top.
  In order to run the example, you will have to change the library analysis path at the top of the javascript  file. 
  •    The library analysis path should point to an analysis with bookmarks. The Medical Performance analysis only has legacy bookmarks; in order to use it, the bookmarks will have to be converted.  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 two links for each bookmark. OnClick handlers that apply the bookmarks to the document are added to the bookmark names. After each bookmark name a link that will open the bookmark in a new web player window is created.  

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

            for (var i = 0; i < bookmarks.length; i++) {
                var bookmark = document.createElement("a");

                bookmark.href = "#";

                bookmark.bookmarkId = bookmarks[i].id;
                bookmark.innerHTML = bookmarks[i].name + " ";

                var bookmarkLink = document.createElement("a");

                // Link to the URL that allows a user to open the bookmark in a new web player.
                bookmarkLink.href = bookmarks[i].webplayerurl;
                bookmarkLink.innerHTML = "(link)";

                // When the bookmark name is clicked, we want to apply that bookmark through its id.
                bookmark.onclick = function () 
                {
                    webPlayer.analysisDocument.applyBookmarkById(this.bookmarkId);
                };

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