JavaScript Example Scripts

This topic shows an example of a JavaScript can be used in the text area to provide some simple interactivity.

Note: The JavaScripts you add to the text area will execute in the same environment as the JavaScripts defined by TIBCO Spotfire to implement all functionality in the text area and other TIBCO Spotfire visualizations. This means that there are a lot of JavaScript libraries defined by TIBCO Spotfire and third parties in scope, including JQuery ($) and JQueryUI. You are strongly advised against using any of these libraries. Also, even though it may be technically possible to access elements outside what is exposed through the public API, such usage is strongly advised against.

TIBCO Spotfire provides no guarantee whatsoever of the correctness, usability or compatibility of the libraries in scope. Future versions of TIBCO Spotfire are likely to include other, upgraded and or incompatible libraries. Thus if you use JQuery in a JavaScript it might result in an erroneous Text Area when the dxp file is opened in a future version of TIBCO Spotfire.

Change background color of an element when the mouse is over it:

The following script uses two parameters, "id" and "color", where "id" is the id of the element to change background color on, in the example set to "my-p" and "color" is the background color to set (for example, #e7e3e7). Both parameters are specified as String parameters, as shown in the image of the Insert JavaScript dialog.

------------------------------------------------------------------------

var elem = document.getElementById(id);
if (!elem)
{
   return;
}

var elemStyle = elem.style;
var oldBgColor = elemStyle.backgroundColor;
var onEnter = function()
{
    elemStyle.backgroundColor = color;
    elem.style = elemStyle;
};

var onLeave = function()
{
elemStyle.backgroundColor = oldBgColor;
elem.style = elemStyle;
};

elem.onmouseover = onEnter;
elem.onmouseout = onLeave;

-------------------------------------------------------------------------

The script is then used by calling the id in the text area HTML.

For example, by adding the required id to a paragraph:

<p id="my-p">A JavaScript changes the background color when the mouse is over this paragraph.</p>

This will result in a text area paragraph where the background color changes to the specified color when you move the mouse over the text in the paragraph.