This example demonstrates how apply useful functions in the API. It tests all the new functions in the javascript API.
Overview
This example is not a real world example. It shows how to call a set of API function and how to use the results. The mashup creates three <div> tags, for the analysis, for the buttons that executes the functions and for the log window. When a button is clicked, the API function is executed and the result is displayed in the log window:
Prerequisites
- A Web Player 3.1-3.3 with the mashup API enabled. Refer to TIBCO Spotfire – Web Player Manual for details.
JavaScriptApiTest.zip: The downlad contains two files implementing this example:
- The
JavaScriptApiTest.htm file references the Web Player API and the javascript file.
- The
JavaScriptApiTest.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. The function creates the layout, the three <div> tags, are created.
window.onload = function()
{
document.documentElement.style.overflow = "hidden";
createLayout();
openWebPlayer();
};
createLayout
This function creates three <div> controls: controlDiv for the action controls, consoleDiv for the log window and webPlayerDiv for the Web Player analysis. It also creates a clear button for the log window and calls createControls to create all test buttons.
var createLayout = function()
{
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 controlDiv = document.createElement("div");
controlDiv.id = "controlDiv";
controlDiv.style.position = "absolute";
controlDiv.style.backgroundColor = "silver";
controlDiv.style.overflow = "auto";
var webPlayerDiv = document.createElement("div");
webPlayerDiv.id = "webPlayerDiv";
webPlayerDiv.style.position = "absolute";
var consoleDiv = document.createElement("div");
consoleDiv.id = "consoleDiv";
consoleDiv.style.position = "absolute";
consoleDiv.style.backgroundColor = "#EEEEEE";
consoleDiv.innerHTML = "";
consoleDiv.style.overflow = "auto";
consoleDiv.style.fontFamily = "Courier New";
consoleDiv.style.fontSize = "11px";
consoleDiv.style.padding = "2px";
var consoleClearButton = document.createElement("button");
consoleClearButton.id = "consoleClearButton";
consoleClearButton.style.position = "absolute";
consoleClearButton.innerHTML = "Clear";
consoleClearButton.value = "Clear";
consoleClearButton.style.width = "50px";
consoleClearButton.onclick = function()
{
var consoleDiv = document.getElementById("consoleDiv");
consoleDiv.innerHTML = "";
};
document.body.appendChild(controlDiv);
document.body.appendChild(webPlayerDiv);
document.body.appendChild(consoleDiv);
document.body.appendChild(consoleClearButton);
createControls();
resize();
};
createControls
This function creates two text input fields for the functions to test, and a button each for the functions to test in the Web Player API. When a button is clicked, the function in the API is called and the result is displayed in the log <div> tag.
var createControls = function()
{
var controlDiv = document.getElementById("controlDiv");
var propertyLabel = document.createElement("span");
propertyLabel.innerHTML = "Set/get property:";
var propertyNameInput = document.createElement("input");
propertyNameInput.type = "text";
var propertyValueInput = document.createElement("input");
propertyValueInput.type = "text";
var setPropertyValueButton = document.createElement("button");
setPropertyValueButton.innerHTML = "Set property";
setPropertyValueButton.value = "Set property";
setPropertyValueButton.onclick = function()
{
webPlayer.analysisDocument.setDocumentProperty(
propertyNameInput.value,
propertyValueInput.value);
log("[spotfire.webPlayer.Document.setDocumentProperty]");
};
var setPropertyArrayButton = document.createElement("button");
setPropertyArrayButton.innerHTML = "Set property array";
setPropertyArrayButton.value = "Set property array";
setPropertyArrayButton.onclick = function()
{
webPlayer.analysisDocument.setDocumentProperty(
"Keywords",
["a", "b", "c"]);
log("[spotfire.webPlayer.Document.setDocumentProperty]");
};
var getPropertyValueButton = document.createElement("button");
getPropertyValueButton.innerHTML = "Get property value";
getPropertyValueButton.value = "Get property value";
getPropertyValueButton.onclick = function()
{
webPlayer.analysisDocument.getDocumentProperty(
propertyNameInput.value,
function(args)
{
log(dump(args, "spotfire.webPlayer.Document.getDocumentProperty", 2));
});
};
var getAllPropertysButton = document.createElement("button");
getAllPropertysButton.innerHTML = "Get all properties";
getAllPropertysButton.value = "Get all properties";
getAllPropertysButton.onclick = function()
{
webPlayer.analysisDocument.getDocumentProperties(
function(args)
{
log(dump(args, "spotfire.webPlayer.Document.getDocumentProperties", 2));
});
};
var onDocumentPropertyChangedButton = document.createElement("button");
onDocumentPropertyChangedButton.innerHTML = "Register onDocumentPropertyChanged event";
onDocumentPropertyChangedButton.value = "Register onDocumentPropertyChanged event";
onDocumentPropertyChangedButton.onclick = function()
{
webPlayer.analysisDocument.onDocumentPropertyChanged(
"Description",
function(args)
{
log(dump(args, "spotfire.webPlayer.Document.onDocumentPropertyChanged", 2));
});
};
var onAnalysisContentStatusChangedButton = document.createElement("button");
onAnalysisContentStatusChangedButton.innerHTML = "Analysis Content Changed";
onAnalysisContentStatusChangedButton.value = "Analysis Content Changed";
onAnalysisContentStatusChangedButton.onclick = function()
{
webPlayer.analysisDocument._onAnalysisContentStatusChanged(
function(args)
{
log(dump(args, "spotfire.webPlayer.Document._onAnalysisContentStatusChanged", 2));
});
};
var getActivePageButton = document.createElement("button");
getActivePageButton.innerHTML = "Get active page";
getActivePageButton.value = "Get active page";
getActivePageButton.onclick = function()
{
webPlayer.analysisDocument.getActivePage(
function(args)
{
log(dump(args, "spotfire.webPlayer.Document.getActivePage", 2));
});
};
var getAllPagesButton = document.createElement("button");
getAllPagesButton.innerHTML = "Get all pages";
getAllPagesButton.value = "Get all pages";
getAllPagesButton.onclick = function()
{
webPlayer.analysisDocument.getPages(
function(args)
{
log(dump(args, "spotfire.webPlayer.Document.getPages", 2));
});
};
var getActiveDataTableButton = document.createElement("button");
getActiveDataTableButton.innerHTML = "Get active data table";
getActiveDataTableButton.value = "Get active data table";
getActiveDataTableButton.onclick = function()
{
webPlayer.analysisDocument.data.getActiveDataTable(
function(args)
{
log(dump(args, "spotfire.webPlayer.Data.getActiveDataTable", 2));
args.getDataColumns(function(args2)
{
log(dump(args2, "spotfire.webPlayer.Data.DataTable.getDataColumns", 2));
});
args.getDataColumn("Physician ID", function(args2)
{
log(dump(args2, "spotfire.webPlayer.Data.DataTable.getDataColumns", 2));
args2.onDataColumnPropertyChanged(
"Description",
function(args3)
{
log(dump(args3, "spotfire.webPlayer.Data.DataColumn.onDataColumnPropertyChanged", 2));
});
args2.getDataColumnProperties(
function(args3)
{
log(dump(args3, "spotfire.webPlayer.Data.DataColumn.getDataColumnProperties", 2));
});
args2.setDataColumnProperty(
"Description",
"new description",
function(args3)
{
log(dump(args3, "spotfire.webPlayer.Data.DataColumn.setDataColumnProperty", 2));
});
});
args.onDataTablePropertyChanged(
"Description",
function(args3)
{
log(dump(args3, "spotfire.webPlayer.Data.DataTable.onDataTablePropertyChanged", 2));
});
args.setDataTableProperty(
"Keywords",
["kw1", "kw2"]);
args.getDataTableProperty(
"Keywords",
function(args3)
{
log(dump(args3, "spotfire.webPlayer.Data.DataTable.getDataTableProperty", 2));
});
args.getDataTableProperties(function(args2)
{
log(dump(args2, "spotfire.webPlayer.Data.DataTable.getDataTableProperties", 2));
});
});
};
var onDataTablePropertyChangedButton = document.createElement("button");
onDataTablePropertyChangedButton.innerHTML = "On data table property changed";
onDataTablePropertyChangedButton.value = "On data table property changed";
onDataTablePropertyChangedButton.onclick = function()
{
webPlayer.analysisDocument.data.getActiveDataTable(
function(args)
{
log(dump(args, "spotfire.webPlayer.Data.getActiveDataTable", 2));
args.onDataTablePropertyChanged(
"Description",
function(args3)
{
log(dump(args3, "spotfire.webPlayer.Data.DataTable.onDataTablePropertyChanged", 2));
});
args.setDataTableProperty(
"Description",
"new description");
args.getDataTableProperty(
"Description",
function(args3)
{
log(dump(args3, "spotfire.webPlayer.Data.DataTable.getDataTableProperty", 2));
});
});
};
var onDataColumnPropertyChangedButton = document.createElement("button");
onDataColumnPropertyChangedButton.innerHTML = "On data column property changed";
onDataColumnPropertyChangedButton.value = "On data column property changed";
onDataColumnPropertyChangedButton.onclick = function()
{
webPlayer.analysisDocument.data.getActiveDataTable(
function(args)
{
log(dump(args, "spotfire.webPlayer.Data.getActiveDataTable", 2));
args.getDataColumn(
"Rank",
function(args2)
{
args2.onDataColumnPropertyChanged(
"Description",
function(args3)
{
log(dump(args3, "spotfire.webPlayer.Data.DataColumn.onDataColumnPropertyChanged", 2));
});
args2.setDataColumnProperty(
"Description",
"new description");
args2.getDataColumnProperty(
"Description",
function(args3)
{
log(dump(args3, "spotfire.webPlayer.Data.DataColumn.getDataColumnProperty", 2));
});
});
});
};
var getAllDataTablesButton = document.createElement("button");
getAllDataTablesButton.innerHTML = "Get all data tables";
getAllDataTablesButton.value = "Get all data tables";
getAllDataTablesButton.onclick = function()
{
webPlayer.analysisDocument.data.getDataTables(
function(args)
{
log(dump(args, "spotfire.webPlayer.Data.getDataTables", 2));
});
};
var getMarkingButton = document.createElement("button");
getMarkingButton.innerHTML = "Get marking";
getMarkingButton.value = "Get marking";
getMarkingButton.onclick = function()
{
webPlayer.analysisDocument.marking.getMarking(
"Marking",
"Field Performance and Planning",
["City", "Rank"],
5,
function(args)
{
log(dump(args, "spotfire.webPlayer.Marking.getMarking", 2));
});
};
var getBookmarksButton = document.createElement("button");
getBookmarksButton.innerHTML = "Get bookmarks";
getBookmarksButton.value = "Get bookmarks";
getBookmarksButton.onclick = function()
{
webPlayer.analysisDocument.getBookmarkNames(
function(args)
{
log(dump(args, "spotfire.webPlayer.Document.getBookmarkNames", 2));
});
};
var getActiveFilteringSchemeButton = document.createElement("button");
getActiveFilteringSchemeButton.innerHTML = "Get active filtering scheme";
getActiveFilteringSchemeButton.value = "Get active filtering scheme";
getActiveFilteringSchemeButton.onclick = function()
{
webPlayer.analysisDocument.filtering.getActiveFilteringScheme(
function(args)
{
log(dump(args, "spotfire.webPlayer.Filtering.getActiveFilteringScheme", 2));
args.getDefaultFilterColumns(
spotfire.webPlayer.includedFilterSettings.ALL_WITH_UNCHECKED_HIERARCHY_NODES,
function(args2)
{
log(dump(args2, "spotfire.webPlayer.Document.FilteringScheme.getDefaultFilterColumns", 2));
});
});
};
var getFilteringSchemeButton = document.createElement("button");
getFilteringSchemeButton.innerHTML = "Get filtering scheme";
getFilteringSchemeButton.value = "Get filtering scheme";
getFilteringSchemeButton.onclick = function()
{
webPlayer.analysisDocument.filtering.getFilteringScheme(
"Filtering scheme",
function(args)
{
log(dump(args, "spotfire.webPlayer.Filtering.getFilteringScheme", 2));
args.getFilterColumn(
"Field Performance and Planning",
"City",
spotfire.webPlayer.includedFilterSettings.NONE,
function(args2)
{
log(dump(args2, "spotfire.webPlayer.Document.FilteringScheme.getFilterColumn", 2));
});
});
};
var getFilteringSchemesButton = document.createElement("button");
getFilteringSchemesButton.innerHTML = "Get filtering schemes";
getFilteringSchemesButton.value = "Get filtering schemes";
getFilteringSchemesButton.onclick = function()
{
webPlayer.analysisDocument.filtering.getFilteringSchemes(
function(args)
{
log(dump(args, "spotfire.webPlayer.Filtering.getFilteringSchemes", 2));
args[0].getFilterColumns(
"Field Performance and Planning",
spotfire.webPlayer.includedFilterSettings.ALL_WITH_CHECKED_HIERARCHY_NODES,
function(args2)
{
log(dump(args2, "spotfire.webPlayer.Filtering.FilteringScheme.getFilterColumns", 2));
});
});
};
var getMarkingNamesButton = document.createElement("button");
getMarkingNamesButton.innerHTML = "Get marking names";
getMarkingNamesButton.value = "Get marking names";
getMarkingNamesButton.onclick = function()
{
webPlayer.analysisDocument.marking.getMarkingNames(
function(args)
{
log(dump(args, "spotfire.webPlayer.Marking.getMarkingNames", 2));
});
};
var getCurrentLibraryItemButton = document.createElement("button");
getCurrentLibraryItemButton.innerHTML = "Get document metadata";
getCurrentLibraryItemButton.value = "Get document metadata";
getCurrentLibraryItemButton.onclick = function()
{
webPlayer.analysisDocument.getDocumentMetadata(
function(args)
{
log(dump(args, "spotfire.webPlayer.Document.getDocumentMetadata", 2));
});
};
var getFilterButton = document.createElement("button");
getFilterButton.innerHTML = "Get filter column";
getFilterButton.value = "Get filter column";
getFilterButton.onclick = function()
{
webPlayer.analysisDocument.filtering.getFilterColumn(
"Filtering scheme",
"Field Performance and Planning",
"City",
spotfire.webPlayer.includedFilterSettings.ALL_WITH_UNCHECKED_HIERARCHY_NODES,
function(args)
{
log(dump(args, "spotfire.webPlayer.Filtering.getFilterColumn", 2));
});
};
var setFilterButton = document.createElement("button");
setFilterButton.innerHTML = "Set filter";
setFilterButton.value = "Set filter";
setFilterButton.onclick = function()
{
var filterColumn = {
filteringSchemeName: "Filtering scheme",
dataTableName: "Field Performance and Planning",
dataColumnName: "City",
filteringOperation: spotfire.webPlayer.filteringOperation.REPLACE,
filterSettings: {
includeEmpty: true,
values: ["Dothan"]
}
};
var filteringOperation = spotfire.webPlayer.filteringOperation.REPLACE;
webPlayer.analysisDocument.filtering.setFilter(
filterColumn,
filteringOperation);
log("[spotfire.webPlayer.Document.Filtering.setFilter]");
};
var setFiltersButton = document.createElement("button");
setFiltersButton.innerHTML = "Set filters";
setFiltersButton.value = "Set filters";
setFiltersButton.onclick = function()
{
var filterColumns = [];
filterColumns[0] = {
filteringSchemeName: "Filtering scheme",
dataTableName: "Field Performance and Planning",
dataColumnName: "Rank",
filterSettings: {
lowValue: "811.49",
highValue: "3648.19",
includeEmpty: true
}
};
filterColumns[1] = {
filteringSchemeName: "Filtering scheme",
dataTableName: "Field Performance and Planning",
dataColumnName: "City",
filterSettings: {
values: ["Fort Dix"],
includeEmpty: false
}
};
var filteringOperation = spotfire.webPlayer.filteringOperation.REPLACE;
webPlayer.analysisDocument.filtering.setFilters(
filterColumns,
filteringOperation);
log("[spotfire.webPlayer.Document.Filtering.setFilters]");
};
var getModifiedFilterColumnsButton = document.createElement("button");
getModifiedFilterColumnsButton.innerHTML = "Get modified filter columns";
getModifiedFilterColumnsButton.value = "Get modified filter columns";
getModifiedFilterColumnsButton.onclick = function()
{
webPlayer.analysisDocument.filtering.getModifiedFilterColumns(
"Filtering scheme",
spotfire.webPlayer.includedFilterSettings.ALL_WITH_CHECKED_HIERARCHY_NODES,
function(args)
{
log(dump(args, "spotfire.webPlayer.Filtering.getModifiedFilterColumns", 2));
});
};
var getAllModifiedFilterColumnsButton = document.createElement("button");
getAllModifiedFilterColumnsButton.innerHTML = "Get all modified filter columns";
getAllModifiedFilterColumnsButton.value = "Get all modified filter columns";
getAllModifiedFilterColumnsButton.onclick = function()
{
webPlayer.analysisDocument.filtering.getAllModifiedFilterColumns(
spotfire.webPlayer.includedFilterSettings.ALL_WITH_CHECKED_HIERARCHY_NODES,
function(args)
{
log(dump(args, "spotfire.webPlayer.Filtering.getAllModifiedFilterColumns", 2));
});
};
controlDiv.appendChild(propertyLabel);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(propertyNameInput);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(propertyValueInput);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(setPropertyValueButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(setPropertyArrayButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(getPropertyValueButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(getAllPropertysButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(onAnalysisContentStatusChangedButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(getActivePageButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(getAllPagesButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(getActiveDataTableButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(getAllDataTablesButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(onDocumentPropertyChangedButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(getMarkingButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(getBookmarksButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(getActiveFilteringSchemeButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(getFilteringSchemeButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(getFilteringSchemesButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(getMarkingNamesButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(getCurrentLibraryItemButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(getFilterButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(setFilterButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(setFiltersButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(getModifiedFilterColumnsButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(getAllModifiedFilterColumnsButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(onDataTablePropertyChangedButton);
controlDiv.appendChild(document.createElement('br'));
controlDiv.appendChild(onDataColumnPropertyChangedButton);
};
openWebPlayer
Creates the Web Player analysis in the <div> tag created by createLayout().
var openWebPlayer = function()
{
var webPlayerCustomization = new spotfire.webPlayer.Customization();
webPlayerCustomization.showCustomizableHeader = false;
webPlayerCustomization.showTopHeader = false;
webPlayerCustomization.showClose = false;
webPlayerCustomization.showAnalysisInfo = false;
webPlayerCustomization.showToolBar = false;
webPlayerCustomization.showExportFile = false;
webPlayerCustomization.showExportVisualization = false;
webPlayerCustomization.showUndoRedo = false;
webPlayerCustomization.showDodPanel = false;
webPlayerCustomization.showFilterPanel = true;
webPlayerCustomization.showPageNavigation = true;
webPlayerCustomization.showStatusBar = false;
webPlayer = new spotfire.webPlayer.Application(webPlayerRelativePath, webPlayerCustomization);
var onError = function(errorCode, description)
{
log('<span style="color: red;">[' + errorCode + "]: " + description + "</span>");
};
var onOpened = function(analysisDocument)
{
resize();
};
webPlayer.onError(onError);
webPlayer.onOpened(onOpened);
webPlayer.open(analysisPath, "webPlayerDiv", "");
};
resize
This function resizes the absolutely positioned <div> tags. It is wired to the browser event window.onresize.
window.onresize = function()
{
resize();
};
var CONTROL_WIDTH = 250;
var CONSOLE_HEIGHT = 300;
var resize = function()
{
var webPlayerDiv = document.getElementById("webPlayerDiv");
var controlDiv = document.getElementById("controlDiv");
var consoleDiv = document.getElementById("consoleDiv");
var consoleClearButton = document.getElementById("consoleClearButton");
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
if (controlDiv != null)
{
controlDiv.style.width = CONTROL_WIDTH + "px";
controlDiv.style.height = (height - CONSOLE_HEIGHT) + "px";
}
if (webPlayerDiv != null)
{
webPlayerDiv.style.left = CONTROL_WIDTH + "px";
webPlayerDiv.style.width = (width - CONTROL_WIDTH) + "px";
webPlayerDiv.style.height = (height - CONSOLE_HEIGHT) + "px";
}
if (consoleDiv != null)
{
consoleDiv.style.width = width + "px";
consoleDiv.style.height = CONSOLE_HEIGHT + "px";
consoleDiv.style.top = (height - CONSOLE_HEIGHT) + "px";
}
if (consoleClearButton != null)
{
consoleClearButton.style.top = (height - CONSOLE_HEIGHT + 5) + "px"
consoleClearButton.style.right = "20px"
}
};
dump
This function is displays the result of an API function. It loops through the values returned by a function and displays the values in the log <div> tag.
var MAX_DUMP_DEPTH = 10;
var dump = function(obj, name, indent, depth)
{
if (depth > MAX_DUMP_DEPTH)
{
return indent + name + ": <Maximum Depth Reached>\n";
}
if (typeof(obj) == "object")
{
var child = null;
var output = '<span style="color: gray;">' + "[" + name + "]</span>\n";
indent += "\t";
for (var item in obj)
{
try
{
if (item.charAt(0) == '_')
{
continue;
}
child = obj[item];
}
catch (e)
{
child = "<Unable to Evaluate>";
}
if (typeof child == "object")
{
output += dump(child, item, indent, depth + 1);
}
else if (typeof(child) == "function")
{
var functionName = String(child);
functionName = functionName.substring(0, functionName.indexOf("{", 0) - 1);
output += "\t" + item + ": " + functionName + "\n";
}
else
{
var value = "";
if (child == null)
{
value = "[null]";
}
else
{
value = child;
}
output += "\t" + item + ": " + value + "\n";
}
}
return output + "\n";
}
else
{
return obj;
}
}