This topic shows an example of a JavaScript that can be used in the text area to provide some simple interactivity.
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.
Note: The JavaScripts you add to the text area will execute in the same environment as the JavaScripts 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 may 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.
How to 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 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.
How to signal when the text area is ready to be rendered to PDF or image:
If your script contains asynchronous calls, you need to 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);
-------------------------------------------------------------------------