This example demonstrates how to save and load the filter settings of the analysis using the javascript API.
Overview
This mashup shows how to save modified filters to a <div> tag. These changes can be applied to the analysis at ta later stage. The example only restores the changed filters. To fully restore all filters to the original state, the Filtering.resetAllFilters() function must be called first.
A <div> tag is used to save the filter settings as text and two buttons are added to load and restore the filter settings. Another <div> tag is added for the Web Player frame.
Prerequisites
- A Web Player 3.1 with the mashup API enabled. Refer to TIBCO Spotfire – Web Player Manual for details.
SaveFilterSettingsApiScenario.zip: The downlad contains two files implementing this example:
- The
SaveFilterSettingsApiScenario.htm file references the Web Player API and the javascript file.
- The
SaveFilterSettingsApiScenario.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:
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, filterSettingsPanel for the filter settings webPlayerDiv for the Web Player analysis. It also creates the two buttons, loadFilterSettingsButton to saving the filter settings and restoreFilterSettingsButton to restore the settings.
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 filterSettingsPanel = document.createElement("div");
filterSettingsPanel.id = "filterSettingsPanel";
filterSettingsPanel.style.position = "absolute";
filterSettingsPanel.style.backgroundColor = "silver";
// Loads modified filter settings from the server and prints them
// as a string in a text area.
var loadFilterSettingsButton = document.createElement("input");
loadFilterSettingsButton.type = "button";
loadFilterSettingsButton.value = "Load filter settings";
loadFilterSettingsButton.onclick = function()
{
webPlayer.analysisDocument.filtering.getAllModifiedFilterColumns(
spotfire.webPlayer.includedFilterSettings.ALL_WITH_CHECKED_HIERARCHY_NODES,
function(getModifiedFilterColumnsResponse)
{
var filterSettingsTextArea = document.getElementById("filterSettingsTextArea");
filterSettingsTextArea.value = dump(getModifiedFilterColumnsResponse);
});
};
// Restores the filter settings from the text area. Evaluates the text
// as JS code and calls the server.
var restoreFilterSettingsButton = document.createElement("input");
restoreFilterSettingsButton.type = "button";
restoreFilterSettingsButton.value = "Restore filter settings";
restoreFilterSettingsButton.onclick = function()
{
var filterSettingsTextArea = document.getElementById("filterSettingsTextArea");
webPlayer.analysisDocument.filtering.setFilters(
eval(filterSettingsTextArea.value),
spotfire.webPlayer.filteringOperation.REPLACE);
};
var filterSettingsTextArea = document.createElement("textarea");
filterSettingsTextArea.id = "filterSettingsTextArea";
filterSettingsTextArea.style.height = "500px";
filterSettingsTextArea.style.wordWrap = "break-word";
var webPlayerDiv = document.createElement("div");
webPlayerDiv.id = "webPlayerDiv";
webPlayerDiv.style.position = "absolute";
filterSettingsPanel.appendChild(loadFilterSettingsButton);
filterSettingsPanel.appendChild(restoreFilterSettingsButton);
filterSettingsPanel.appendChild(filterSettingsTextArea);
document.body.appendChild(filterSettingsPanel);
document.body.appendChild(webPlayerDiv);
resize();
};
openWebPlayer
Creates the Web Player analysis in the <div> tag created by createLayout().
var openWebPlayer = function()
{
var webPlayerCustomization = new spotfire.webPlayer.Customization();
webPlayer = new spotfire.webPlayer.Application(webPlayerRelativePath, webPlayerCustomization);
// Show a simple alert dialog if something goes wrong.
var onError = function(errorCode, description)
{
alert(errorCode + ": " + description);
};
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 webPlayerDiv = document.getElementById("webPlayerDiv");
var filterSettingsPanel = document.getElementById("filterSettingsPanel");
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
if (filterSettingsPanel != null)
{
filterSettingsPanel.style.width = bookmarkPanelWidth + "px";
filterSettingsPanel.style.height = height + "px";
}
if (webPlayerDiv != null)
{
webPlayerDiv.style.left = bookmarkPanelWidth + "px";
webPlayerDiv.style.width = (width - bookmarkPanelWidth) + "px";
webPlayerDiv.style.height = height + "px";
}
};
dump
This function is used to JSON-serialize the filter settings to text. The serialized JSON objects can be deserialized to JSON objects again when restoring the settings back to the analysis using the eval function.
function dump(obj)
{
var text = "[";
for (var i = 0; i < obj.length; i++)
{
text += "{ ";
var property = obj[i];
var count = 0;
for (var key in property)
{
count++;
switch (key)
{
case "filteringSchemeName":
case "dataTableName":
case "dataColumnName":
case "filterType":
text += key + ": '" + property[key] + "', ";
break;
case "filterSettings":
var filterSettingsCount = 0;
text += key + ": { ";
var filterSettings = property[key];
for (var setting in filterSettings)
{
filterSettingsCount++;
switch (setting)
{
case "highValue":
case "lowValue":
case "includeEmpty":
case "searchPattern":
text += filterSettings[setting] == null
? setting + ": null, "
: setting + ": '" + filterSettings[setting] + "', ";
break;
case "values":
text += setting + ": [";
for (var j = 0; j < filterSettings[setting].length; j++)
{
text += "'" + filterSettings[setting][j] + "', ";
}
if (filterSettings[setting].length > 0)
{
text = text.substring(0, text.length-2);
}
text += "], ";
break;
case "hierarchyPaths":
text += setting + ": [";
var hierarchyPaths = filterSettings[setting];
for (var j = 0; j < hierarchyPaths.length; j++)
{
text += "[";
for (var k = 0; k < hierarchyPaths[j].length; k++)
{
text += "'" + hierarchyPaths[j][k] + "', ";
}
if (hierarchyPaths[j].length > 0)
{
text = text.substring(0, text.length-2);
}
text += "], ";
}
if (hierarchyPaths.length > 0)
{
text = text.substring(0, text.length-2);
}
text += "], ";
break;
}
}
if (filterSettingsCount > 0)
{
text = text.substring(0, text.length-2);
}
text += " }, "
}
}
if (count > 0)
{
text = text.substring(0, text.length-2);
}
text += " }, ";
}
if (obj.length > 0)
{
text = text.substring(0, text.length-2);
}
text += "]";
return text;
}