How to add Javascripts necessary to use Bootstrap Templates

[Jason Millett]

I have done some web development. I am not an expert, I am about average but I don't web develop often. It's a side interest. With that said, I want to use what I know of Bootstrap in Spotfire but when I start with the basic Bootstrap starter template. I immediately get Errors because of the Javascript links and Spotfire stops functioning correctly.

Below is the basic Bootstrap template I am pasting into my Text Area HTML. At the Bottom you can see the 3 javascript links for Jquery, Popper, and Bootstrap JS. But The Page doesn't look like I would expect in a normal HTML page and the top mene stops functioning correctly and I have to use the restart browser under the development dropdown to fix it but as soon as I move my mouse up to the top nav bar it gets stuck again.

I can't find a good guide on how to add these javascripts so that it works without causing errors, or causing problems with spotfire's functionality.

Can someone give a simple step by step guide on how to do this correctly

 

 

 

 

 

 

 

 

 

 

 

Hello, world!

 

 

Hello, world!

[Shashank Gurnalkar]

The issue is certainly with the Bootstrap.css being included in the textarea visualization. The bootstrap.css has some styling defined which seems to be conflicting with the internal CSS defined by Spotfire. It is always recommended to define your own CSS on the HTML elements you have created using classes and id's instead of using any external libraries.

TIBCO Spotfire uses many libraries including bootstrap,Jquery, JqueryUI so when including any external libraries you will have to make sure that these external libraries would not override the internally defined CSS or any other settings.

Here is a snippet from our Help Manual regarding this:

====

JavaScript Example Scripts

-----

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. 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. 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 TIBCO Spotfire. See the TIBCO Community article How to use jQuery and jQueryUI in Text Areas for more information.

--

Following is a wiki article on best practices https://community.spotfire.com/wiki/best-practices-writing-custom-javascrip...

[Tyger Guzman 2]

You can add external references to Text Areas by adding JS :

I use the below to use FontAwesome icons in my text areas. The same will work

var css1 = "https://use.fontawesome.com/releases/v5.6.0/css/all.css"

$("", { "rel": "stylesheet", "type": "text/css", "href": css1 }).appendTo("head")I also tested this :

var js1 = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"

$("", { "rel": "stylesheet", "type": "text/javascript", "href": js1 }).appendTo("head")