JavaScript example scripts

This topic shows some examples of scripts based on JavaScript that can be used in the text area to provide some simple interactivity.

You can add JavaScript to an analysis by editing the HTML of a text area, or as described on Managing scripts in Spotfire.

Note: For security reasons, there are some restrictions for using scripts. For more information, see Usage of scripts and data functions.

Note: The JavaScript you add to the text area will execute in the same environment as the JavaScript defined by Spotfire to implement all functionality in the text area and other Spotfire visualizations. This means that there are a lot of JavaScript libraries defined by Spotfire and third parties in scope, including jQuery ($) and jQueryUI. Spotfire provides no guarantee whatsoever of the correctness, usability or compatibility of the libraries in scope. Future versions of Spotfire are likely to include other, upgraded and or incompatible libraries. Libraries can also be removed in future versions. Therefore, if you want to use libraries like jQuery or jQueryUI you must import those libraries yourself instead of relying on the versions used by Spotfire. See the Community article How to include your own instances of jQuery and jQueryUI in Text Areas for more information.

Note: JavaScript parameters can only be of the type String.

Change the 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 in the Insert JavaScript dialog.

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

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

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

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.

Signal when the text area is ready to be rendered to PDF or image

If your script contains asynchronous calls, you must use the SF.setBusy() API to make sure the text area will render nicely when exported to PDF or image.

By executing

-------------------------------------------------------------------------
SF.setBusy(true);
-------------------------------------------------------------------------

the export browser will not render a PDF/image until the script executes:

-------------------------------------------------------------------------
SF.setBusy(false);
-------------------------------------------------------------------------

Tip: On the Community, the article Best Practices for Writing Custom JavaScript Code in Text Areas gives an introductory overview of how you can use JavaScript in text areas in Spotfire.