FOR BI PROS LEARN Spotfire
Spotfire’s hidden Developer Tools menu
March 13, 2017
0
, , ,

 Starting from version 7.5 Spotfire is using Chromium Embedded Framework as a display engine which comes with the well-known Chrome-style Developer Tools. Why is this so great you might ask? There are a couple of good tricks you can do with this one.

Guest blog post by Norbert Ledenyi

Chromium Embedded Framework in Spotfire

Chromium Embedded Framework (CEF) is increasingly popular, GitHub’s Atom code editor, RStudio or even Microsoft’s Visual Studio Code editor is using it not to mention Spotfire’s main rival, QlikSense. For a not comprehensive list of applications built on top of CEF check out the following Wikipedia article. Before using CEF, Spotfire was using Internet Explorer as a display engine, but in a weird way that each visualization or Text Area was a standalone browser in Professional Client (now called Analyst). As a result of this some JavaScript solutions were behaving differently in the desktop client as in the Web Player prior to 7.5.

The reasons behind the switch are quite straightforward:

  • the V8 JavaScript engine is famous for its great performance
  • Chromium has a great compliance with the latest standards
  • earlier version of Spotfire required IE to be installed on the PC, now there is no such dependency
  • with CEF visuals and HTML Text Areas are rendered identically between the desktop client and the Web Player
  • and most importantly (at least for TIBCO): code interoperability which means the same code can be used in the desktop client and for the web author tool called Business Author

Let’s see how we can take advantage of this new engine!

Firstly you need to enable the hidden menu under Tools -> Options, scroll to the bottom of the Application pane and tick the box next to the ‘Show development menu’. spotfire_enable_dev_menu

Once you enable it you’ll find a new menu under Tools with the following three options:

  • Reload Browser
  • Developer Tools
  • Copy URL to Clipboard
spotfire_developer_tools_menu

Reload Browser

There is not much talk about this menu item, it’s quite obvious what it stands for – even though your Spotfire client is not exactly a browser. It reloads the whole display engine. Just like if you were to close the report in Web Player and reopen it, except that this one reloads it in your desktop client. With this, you won’t lose any unsaved changes in the client and also no need to wait to reload linked data like if you were to reopen the DXP. This was useful for me in two cases already:

  • once the report I was playing with was misbehaving and didn’t switch page or activate marking like it should’ve, but after reloading it with this option everything was back to normal again
  • if you mess with JavaScript and change something you want to unload (like something appended to the head of the HTML code) you can unload those changes easily with minimal effort

Copy URL to Clipboard

As the name suggests, it will copy a URL to your clipboard like this: http://localhost:8001/?view=1e499593-c4df-43cb-9bff-60259a60a6d2

Drop this into any browser and your report will display as it would when published to Web Player. This could come handy if you just want to double-check that everything looks as it should in different browsers before published. It opens instantly so there is no need to wait for linked data to load, it will basically just open up that same session what you have in your Spotfire client. Also worth mentioning, that this is not a permanent link, once you close the client it will no longer work.

Developer Tools

This is the coolest among the three, that’s why I left it to the end. Open it and you’ll face with the familiar Chrome developer tools.spotfire_developer_tools

You can inspect elements, see how a property control is structured and built up with HTML, what is the CSS class of a visualization or even debug a JavaScript you’ve inserted into a Text Area using the console. The possibilities are endless, you’ll have full visibility into the underlying HTML/JavaScript/CSS code without the lengthier process of doing the same by publishing it to Web Player opening the developer tools there (especially if your report loads linked data or if you don’t have Web Player access, ie working offline).

This, combined with the fact that even the desktop client renders everything as a single page as it would in the Web Player (as opposed to have a browser engine for each visualization and Text Area like in earlier versions) allows to do wilder things which will work in both platforms. An example: you are not happy with the way a List Box document property control highlights the selected item? Change it. You wish to add a new icon to the corner of the title bar of a chart to trigger a JavaScript to do things like a popup with some description. That I haven’t tried yet, but I’m pretty sure it can be done, all you need is a single Text Area in any page of the report, not just the one you want to play around with.

A practical example

Here is an example what I’ve tried out already:

spotfire_custom_formatting_listbox

This is a List Box property control and my goal was to center align the text of the item which is selected. To do this, I’ve added a JavaScript to my Text Area where this document property control is located with the following code:

spotfire_custom_formatting_listbox_code

This code will append a new style tag to the head of the HTML document with a specific ID. This ID is there to check if that tag has been added before, because this JavaScript code might get triggered more than once during the session of the report and you wouldn’t want to contaminate the head with duplicated tags. Once the tag is added you can start adding your own CSS formatting. In this example I’m picking up the .ListItems of my List Box which I tagged as #yearList (see screenshot above) and narrow the list further to the ones with the class .sfpc-selected which will return with only the selected item. Both .ListItems and .sfpc-selected are Spotfire’s own CSS class and I used the Developer Tools to find out their exact name.

Since this CSS is now in the head, and will load after Spotfire’s own CSS stylesheet, it will overwrite the original with whatever you define. If I were to leave out the #yearList then the formatting would apply to all List Box property controls, even the ones on other pages. All that matters is to have a Text Area with this JavaScript code on the landing page where the user arrives when the report is opened (so be extra careful if you have bookmarks, configuration block to open the report with a different page or ‘Remember personalized view’ enabled).

If you messed up the appended style tag, you can easily get rid of it by reloading the browser with the above method.

Check Spotfire’s browser engine version

There are many ways to check which version of Chrome’s open source engine is running. The simplest one is to open the Developer Tools, switch to the console tab and type in:

spotfire_version_info_console

An another way, which works even if you are on an older version of Spotfire and you don’t have this developer tool is to add the following JavaScript to a Text Area:

spotfire_version_info_code

This will show not just the browser’s version but the jQuery and jQuery UI version as well:

spotfire_version_info

This method worked for me even in 4.0 which didn’t have a built in way to edit the HTML code of a Text Area as there was a way to edit it with an IronPython script but luckily you can do it from the GUI now.

That’s it for this post. If you have any ideas what you can use this for let me know in the comments down below.

Norbert Ledenyi

Norbert Ledenyi

Have most of my BI experience with Tibco Spotfire, but interested to learn more about other BI tools and data visualization platforms too. When I'm not building new reports I also quite enjoy getting my hands dirty and muck around with the back-end to understand how things work.
Norbert Ledenyi

Latest posts by Norbert Ledenyi (see all)

There are 0 comments

Related items

/ You may check this items as well

Tableau Consistency Checker

Tableau Filestore Consistency Checker – How Repository Maps to Filestore

 Starting from version 7.5 Spotfire is using C...

Read more
TCOT

Pushing the Limits of Tableau Server – Practical Lessons from a Zen Master

 Starting from version 7.5 Spotfire is using C...

Read more
speed-1249610_640

Tableau Performance: Why Embedded Data Source is Faster than Published

 Starting from version 7.5 Spotfire is using C...

Read more