How to use jQuery and jQueryUI in Text Areas
Last updated:
5:30am Jan 31, 2019

Introduction

Adding custom JavaScripts to Text Areas is often useful when creating Spotfire dashboards with customized look and feel. However, there are a number of things to consider when doing so. One important thing is to avoid using JavaScript libraries that are used internally by TIBCO Spotfire, since those can be changed or removed between TIBCO Spotfire releases. See Best Practices for Writing Custom JavaScript Code in Text Areas for more information on this and other recommendations related to custom JavaScripts.

The jQuery and jQueryUI libraries are popular amongst the JavaScript community. They are also used internally by TIBCO Spotfire, but jQueryUI was deprecated in TIBCO Spotfire 10.0 and will be removed in a future release. To avoid having your scripts be dependent on the jQuery and jQueryUI instances included with a particular version of TIBCO Spotfire, you need to include your own instances with your scripts. This article describes step by step how to do that. A DXP file with the full example is attached with this article.

Import the jQuery and jQueryUI libraries

In order to use jQueryUI in your script, you must first include the library in the Text Area where it is going to be used. The best way to do this is to create a separate script entry and place that before your own script. Even if you only plan to use jQueryUI, you also need to include jQuery since that is a dependent library. You need to make sure that you use a jQuery version that is compatible with the jQueryUI version you want to use. The attached DXP file for an example of how the import is done for jQuery v3.3.1 and jQueryUI v1.12.1.

// Install jQuery.
jQuery code goes here ...

// Install jQueryUI of a version that is compatible with the 
// jQuery version installed above.
jQueryUI code goes here ...

// Assign a global variable so that jQuery can be accessed 
// by other scripts later.
// Use the noConflict mechanism to restore any exising 
// jQuery object in scope. This avoids conflicts with any 
// version of jQuery that might be used by Spotfire.
window.CustomJQuery = window.$.noConflict(true);

// Add the jquery-ui.css with embedded images.
var $ = window.CustomJQuery;
var css = CSS code goes here ...
$("<style/>").text(css).appendTo($("#" + styleContainerId));

 

Use the imported libraries in custom scripts

Now, you can start using the jQueryUI in your script. Since the library is placed before your script, it will automatically be in the context of your script.  You can access your jQuery instance from the global variable window.CustomJQuery that was assigned in the previous step.

 

The first example script defines an accordion control:

var $ = window.CustomJQuery;
var $div = $("#" + id);
$div.accordion();

var css = ".accordion-title {color:green;font-size:20px;}";
$("<style/>").text(css).appendTo($div);

 

The second example script defines a draggable div:

var $ = window.CustomJQuery;

var $div = $("#" + id);
$div.css("background-color", "lime").draggable();

var version = $.fn.jquery;
$("<p/>").css("margin", "10px").text("jQuery version in scope: " + version).appendTo($div);

 

The scripts used in the Text Area HTML:

<div id="demo-draggable" style="width:200px;background-color:lightgray;padding:20px;">
This is a div made draggable with jQuery UI included in a custom javascript.
</div>

<div style="width:300px;margin:20px;" class="custom-style">
<div class="accordion-title">
Example of accordion:
</div>
<div id="demo-accordion">
  <h3>Header One</h3>
  <div>One.</div>
  <h3>Header Two</h3>
  <div>Two, two, two.</div>
  <h3>Header Three</h3>
  <div>Three: 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3.</div>
</div>

 

You can view the full example in the attached dxp file.

Attachments

Feedback (3)

Thanks Magnus - I found tools for generating the base64, pretty painful!

Something else I noticed though. In your example you've modified the JQueryUI code so that it assigns to the window.JQuery variable rather than the JQuery variable. I was completely thrown by this - I created my own version where I downloaded just the pieces of JQuery UI I needed, followed your instructions and found it didn't work. I eventually worked out that I needed to either hack the JQueryUI code, or move the noConflict code up above JQueryUI and then assign local variables for $ and JQuery to the CustomJQuery variable. I went with the second approach so that I wouldn't forget about the method later.

pete.thompson 7:49am Jan. 17, 2019

Hi Pate and thanks for for your feedback! It is correct that you need to manually edit the CSS file and include the images required by jQueryUI as inline base64 strings (there are free tools available that converts PNG -> base64).

In those places in the CSS that refer to a URL:
url(myimage.png)
is replaced by the image inline:
url(data:image/png;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulr....)

Magnus Rylander 7:18am Jan. 15, 2019

Hi Magnus, good stuff. One question though - how did you generate the CSS for JQuery UI with the embedded images? Every download I've generated references images via URIs rather than embedding them - do I need to manually edit the CSS or is there some nice easy way?

pete.thompson 3:45am Jan. 14, 2019