How to include your own instances of jQuery and jQueryUI in Text Areas

Introduction

To avoid having your scripts be dependent on the jQuery and jQueryUI instances included with a particular version of 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.

For more information on using JavaScript in Text Areas, see Best Practices for Writing Custom JavaScript Code in Text Areas.

See Introducing the Spotfire Script Management APIs for how to programmatically add, remove and update scripts in a Spotfire document.

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.

 jQuery v3.3.1 and jQueryUI v1.12.1.js

// 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));

 var $ = window.CustomJQuery;

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:

Make accordion.js

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

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

Make draggable.js

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);

<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>

jqueryui-in-a-custom-javascript-10-0.zip