Spotfire 6.0 provides great tools for quickly building your dashboard, but here we will learn to spice up things with the help of new 6.0 text area. If you are not aware the new 6.0 Text area supports HTML, Javascript and CSS.
This opens up possibilities for doing a lot more with the text area.
Some of the basic stuff can be seen here http://spotfire.tibco.com/qrt/UBSAN/presentation.html?pcode=100044
Some of the basic stuff can be seen here http://spotfire.tibco.com/qrt/UBSAN/presentation.html?pcode=100044
One of the cool things you can do is build an accordion panel in the text area for better utilization of the valuable screen real estate and helping the overall experience.(Watch the 0:15 second video below to see how accordion works - Sorry for the jitter in the video. The screen recorder does not record fast enough)
Here is the html behind the text area : Please note that Spotfire controls are automatically created when you add text area controls, like filters, drop down lists etc.
<DIV id="myaccordion">
<H3>Analysis Details</H3>
<DIV>
Author : John Doe
<BR>
Date Written: 01/01/2014
<BR>
Version 1.1
</DIV>
<H3>Filters</H3>
<DIV>
<H5>State</H5>
<SpotfireControl id="a7af5e25133b40ef99ac09c0e841b695" />
<H5>Product Category</H5>
<SpotfireControl id="e16fb96f9e28423fa79733c13adaf6a2" />
</DIV>
<H3>Settings for Bar Chart</H3>
<DIV>
<H5>Select Category Axis </H5>
<BR><SpotfireControl id="49ad8559d7a24ebbbb1381812e3da923" /><BR>
<H5>Select Category Axis </H5>
<SpotfireControl id="2439e7ca00424f38b29dd1f58a783fd8" /><BR>
</DIV>
</DIV>
You can learn more about jquery accordion here http://jqueryui.com/accordion/
Now once you have the html ready, add a new JS while in html edit mode in textarea by clicking on the js script button highlighted below
Name the script something meaningful and then add one line as following to make it work like an accordion
$("#myaccordion").accordion();
How to add css to this
ReplyDeleteGreat post! If I can add one thing, I would encourage using the collapsible : true option for the accordion menu. http://jqueryui.com/accordion/#collapsible
ReplyDeleteSo the only change is your javascript becomes:
$("#myaccordion").accordion({
collapsible: true
});
I found the standard accordion menu would push the bottom elements out of view. It was much easier to collapse all the elements for a nice clean look.
Awesome post
ReplyDeleteI have made a accordian but I need a different color. The color functionality works on desktop version, but it isnt working on webplayer. Any idea?
ReplyDeleteI'm trying to control my enthusiasm, but I've been trying for two days to make an accordion work with Spotfire X and have been unsuccessful until I found this page. Hoping it still works once it's published and others use it!
ReplyDelete