Unscrambling the Spotfire Text Area

  • Are you frustrated with the Spotfire Text Area?
  • Are you just getting started with HTML, CSS, JavaScript, or jQuery?
  • Do you find all the different languages that can be implemented in Text Areas confusing?

If you answered yes, then this post is for you.  Many of my blog post ideas come from questions I had as a new or developing Spotfire user.  I distinctly remember getting frustrated enough with the Text Area GUI to decide to learn HTML.  It’s been a long journey that is not at all over.  However, now that I have worked with Text Areas and code for a while, it is time to write a post explaining the different languages and ways that code can be implemented.

First, I want to share my evolution as a Text Area user.  You might be able to relate to it…(this is me after taking the Advanced Configurations course from TIBCO)…

The Text Area Struggle is Real

…oh hey look, these buttons are handy…and I can add pictures!

…man, these buttons don’t do what I want all the time.  Maybe I’ll learn a bit of HTML and see if I can’t make this better.

…HTML is great!!  This is so much better.  Wait, what’s CSS? Is this actually easier?

…I’m getting my CSS and HTML confused…DAMN!!!

…Look at me coding in HTML and CSS.  My manager is going to promote me for learning so many new things.  Coding is cool.  Maybe I should try into JavaScript.

….NOTHING WORKS…

…jQuery looks easier

…NOTHING WORKS! !#&@^#@)@_#$%

…and now that we upgraded and everything I wrote is broken.

…but it does get easier.

List of Languages

There are five languages that can be used in Spotfire Text Areas.

  1. HTML
  2. CSS
  3. JavaScript
  4. jQuery
  5. IronPython

Now, don’t close this post just because I have listed jQuery and JavaScript as distinct languages.  They aren’t, but I separated them because you can Google ‘jQuery’ and ‘JavaScript’ for different results.  Let’s start with HTML.

HTML

I started to get a better handle on Text Areas when I realized that Spotfire page or Text Area is like a mini web page.  And what language are web pages built in?  HTML! Actually, Spotfire is using a web browser called Chromium under the hood.  Thus, Spotfire displays are basically a custom version of Chrome. 

Most people edit Text Areas by right-clicking and selecting Edit Text Area.  This editor is a GUI (graphical user interface) that creates HTML. You can see that HTML by selecting Edit HTML instead of Edit Text Area.  This is what it looks like.

HTML Text Area

Sometimes the GUI gets it right, but a lot of times it doesn’t, as you well know.  The best example I can give of the GUI not getting it right copy and paste from Microsoft Word.  That is ALWAYS a disaster.  I’m sure you have tried it because the Spotfire Text Areas don’t have spell check.  Don’t do it.  Just work on your HTML.  You can do a lot with a little.  TRUST ME.

So, to even begin to address the shortcomings of the GUI, you need to learn a little bit of HTML. I’m tempted to throw some basics out there, but that would make this post unbearably long. I’ll save it for another time.  I will recommend checking out W3Schools and this HTML template on the Exchange.  I built it, and I’ll admit it needs a bit of updating but it’s a good starting place.

CSS

Next, let’s talk about CSS, which stands for Cascading Style Sheets.  CSS codes how HTML elements appear in web pages/Text Areas.  It is efficient.  For example, rather than adding attributes to HTML tags, use CSS in a <style> tag.  The CSS will apply to the entire web page/Text area.  If you code strictly in HTML, you will have to add attributes to all your tags.  There is no limit to how much style you can create.  Do a little or do a lot.  For example, you can style borders, padding, margins, alignment, fonts, formats, etc.  This is precisely what I am doing in the screenshot below.

CSS Text Area

That might have been a little bit overwhelming, but take a look at this blog for a simpler example.  The post describes how to use CSS to style Spotfire buttons, rather than formatting each and every button.  (You’re welcome!)

WARNING: For style tags to work, you must have HTML sanitation turned off. Here is a link to the blog post on HTML sanitation.

 

JavaScript

Now, let’s talk about JavaScript.  JavaScript is the best-known scripting language for Web pages.  It has other uses, but since I’ve already equated Text Areas to web pages, let’s stick with that.  Basically, JavaScript is what triggers or controls action and interaction.  It can perform a wide variety of tasks, such as passing a calculated value to a document property or showing and hiding property controls.  Exchange.ai has templates with these scripts you can download here and here (updated links coming soon).  The Text Area below contains a JavaScript that shows and hides property controls.

JavaScript Text Area

Now, that we’ve talked about HTML, CSS, and JavaScript, I want to tie it all together.  Think of HTML as being the content.  CSS is how your content is formatted or styled.  JavaScript is what brings interaction to the content.  It’s starting to make more sense now, right?

 

jQuery

jQuery is a JavaScript library (over 10,000 lines of JavaScript) written to make interacting with web pages easier.  In order to use jQuery, Spotfire loads the 10,000 lines behind the scenes and exposes all functionality in a single function.  When you write ‘$(‘.something’) you are calling the jQuery function (the $) and passing it an argument (‘.something’).  jQuery is JavaScript inserted into an HTML <script> tag.  This is different from adding a JavaScript to the Text Area, as shown above.  The purpose of jQuery is to make it much easier to use JavaScript.  The example below demonstrates jQuery passing a calculated value through to a property control.  You can find this template on Exchange.ai.

jQuery Text Area

 

IronPython

Lastly, we have IronPython. IronPython is the .NET version of Python.  Python is better known in data science circles than web programming circles, but it still important in Text Areas.  In Spotfire, IronPython scripts use buttons to trigger them, or they can be set up to execute when the value of a document property changes.   Here is an example. In this case, I have an input document property that will contain a stock ticker symbol.  Then, I use an IronPython script to call an API to return the value and a chart.  The button triggers the call to the API, using the document property. This template can be found here.

IronPython Text Area

 

Hopefully, you now have a better idea of what you can do with different programming languages in Spotfire Text Areas. I want to close with one more thought.   There aren’t clear lines between these languages and what you can and can’t do with each one.  IronPython doesn’t start where JavaScript picks up.  Quite often and fortunately, you will have options.  You could perform a task in JavaScript OR IronPython.  Good luck in learning!  It’s a ton of fun.

Leave a Comment

Your email address will not be published. Required fields are marked *