Skip to main content

Using Accordions in Spotfire Text Areas


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 

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



Labels

Labels:

Comments

  1. PraffMarch 5, 2014 at 9:50 AM

    How to add css to this

    ReplyDelete
  2. DanApril 8, 2014 at 9:06 AM

    Great post! If I can add one thing, I would encourage using the collapsible : true option for the accordion menu. http://jqueryui.com/accordion/#collapsible

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

    ReplyDelete
  3. UnknownOctober 30, 2014 at 2:11 AM

    Awesome post

    ReplyDelete
  4. AnonymousOctober 13, 2015 at 10:51 AM

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

    ReplyDelete
  5. JPritchMarch 26, 2021 at 5:03 PM

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

Post a Comment

Popular posts from this blog

Calendar Chart in Spotfire

I recently had a colleague asking me to show him the data in a calendar format.. Something like this I basically used a scatterplot for this.  You can check out the original DXP here  http://bit.ly/spotcalendar Some key settings to make it a calendar. Please note Order date is the date of interest here These expressions are out of the box expressions, no need to handcode them, but select them in the axis value  X Axis    <BinByDateTime([Order Date],"DayOfWeek",0)> Y Axis    Week([Order Date]) Trellis into panels   <BinByDateTime([Order Date],"Year.Quarter.Month",2)> Manual layout 4 X 3 Labels  UniqueConcatenate(DayOfMonth([Order Date])) Shape Tiled Markers Marker by   <UniqueConcatenate([Order Date])> Happy plotting your calendar!!!
7 comments
Read more

Spotfire Writing back to a database

Lot of time users need to write back to a database. Spotfire provides different ways to do this, Without going thru the code I am going to talk thru the different options available. But if you need detailed instructions, please leave some comments and will try to provide one 1) Stored Procedures. Advantages : Complex logic is easy to encapuslate in procedures. Also you are not storing username/passwords anywhere  Spotfire can execute stored procedures and these procedures could be fetching data, or can be procedures that can be run Pre or Post running a query. You can then use procedures that basically update your database table or even inserts new rows in tables. When using Spotfire information model it allows you to use these procedures which you can repurpose for updating your database. Spotfire also understands inputs to a procedure and they can be mapped to your marked rows/filtered rows/ properties/constants etc from your analytics. Steps to do that would be ...
14 comments
Read more