Jump to content

Recommended Posts

Have you guys had any issues with property controls in your accordion areas See my attached images.

Looking around the web I see similar issues with rendering checkboxes and calculated columns. Often the issue is ignored. It is suggested that this issue was fixed in 7.0. I still see an issue in 7.5 (Spotfire version info also attached.)




Visualization Overview



APIs Selected:

Top Operator:

Top County:



Visualization Options



Map Recompletion Status:

Map Layers:






Recomended Filters




Current Operator:

Geology Zone:

Wellbore Type:

Recompletion Type (API level):

Completion Date:





$( "#accordion" ).accordion({active: false,collapsible: true,heightStyle: 'content'});

Link to comment
Share on other sites

The problem is that the jQuery Accordion styles are interfering with the native JavaScript and CSS that set the 'width' style attribute of Spotfire property controls (which you can see are rendered as a series of nested divs). There have not been any changes with respect to this for a long while.


There are no current plans to address this in a near future release. We strongly encourage customers not to access or modify elements that are not exposed through the public API. Spotfire property control objects are not exposed through the public API because there are native scripts, which execute when property controls are converted to their HTML representation in order to provide the functionality of such controls. For example, if you view your analysis in a Web Player client and use the browser developer tools, you may see that such property controls are rendered as many nested div elements, which have specific class attributes that are used by scripts to provide their functionality.


This warning is documented in the user guide, which you may find online as well:






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. You are strongly advised against using any of these libraries. Also, even though it may be technically possible to access elements outside what is exposed through the public API, such usage is strongly advised against.


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. Thus if you use JQuery in a JavaScript it might result in an erroneous Text Area when the dxp file is opened in a future version of TIBCO Spotfire.



On version 7.0, there is no good workaround that I have found other than resetting the filters when the accordion section is activated.


I suggest you file an enhancement for this in the Ideas portal linked above on this page since I know the JQuery accordian is used by a lot of Spotfire users for this same configuration.

Link to comment
Share on other sites

  • 3 months later...
  • 2 months later...

To resolve this issue a spotfire document property must be interacted with to correct the rendering of document properties within DIV container of the Accordion:Hidden HTML (the 'spotfireInputWrapper' should be an input box where Data Type = Time):<PRE style="DISPLAY: none"><P id=calcVal>


<INPUT id=htmlInput>

<SPAN id=spotfireInputWrapper><SpotfireControl id="51d7f91b67324b33ad9b3baa44bcbbdf" />


<SPAN id=ok>ok</SPAN>

</PRE>JQuery for accordion script:

                                //uses the change event to set the active panel


                                                collapsible: false,

                                                autoHeight: false,

                                                change: function(event,ui){







                var jsValue = $('#htmlInput').val()

                $('#spotfireInputWrapper input').val(jsValue).blur()

                });Separate JQuery object for timer that will be inputted into the 'spotfireInputWrapper' :var myVar = setInterval(myTimer, 1000);function myTimer() {

    var d = new Date();

    document.getElementById("calcVal").innerHTML = d.toLocaleTimeString();


var oldValue=0

transferValue = function(){    //get value from calcVal spotfire Calculated Value Dyn Item

   value=$("#calcVal").text().trim()    //update input when oldValue changes





}setInterval(transferValue,1)Upon clicking each accordion panel, the JQuery timer will be input into the hidden spotfire input box 'spotfireInputWrapper', thus rendering the document properties correctly.  

Link to comment
Share on other sites

  • 1 month later...

I have the same approach asqaasim.quinn, interacting with another Spotfire control, however with fewer lines of code. Tested in Spotfire 7.9

create an empty string Document property and call it something like "refreshSpotfireElements".

In your text area on top place the following line:

## Specify a Input type property control pointing to your document property refreshSpotfireElements##

display : none is to hide the control,since no one needs/wants/likes to see this.


In JavaScript I'm testing for an event activating a panel.

found the code on: https://api.jqueryui.com/accordion/#event-activate

Pointing to the id of my accordion using #accordion it looks like below.



$( "#accordion" ).on( "accordionactivate", function(event, ui) {

//appending the function body with triggers on the added Spotfire property

//pointing to the id of the span my property control is in

$("#refreshWrapper input").val(Math.random()); // look for id(#) refreshWrapper and element tag input and fill in a random value using Math.random()

$("#refreshWrapper input").focus(); // focus on the control to make it active.

$("#refreshWrapper input").blur(); // blur acts as pressing Return as user and triggers the update in the property control.



Your input Document property (string) here




















Dimension 1:





Dimension 2:





 DimensioN 3:



function onOpenedCallback(analysisDocument)


// Modify property to trigger Spotfire script xyz

analysisDocument.setDocumentProperty("abc", "");



$( "#accordion" ).accordion({active: false,collapsible: true,heightStyle: 'content', color:'red'});



$("#accordion h3").attr( 'style', 'color: olive; background: khaki; border:1px solid papayawhip');

$("#accordion").accordion( {heightStyle: 'content'} );


// $( "#accordion" ).accordion( "option", "event", "click" );

var event = $( "#accordion" ).accordion( "option", "event" );

console.log("event = " + event.toString());


//the refresh snippet

$( "#accordion" ).on( "accordionactivate", function(event, ui) {


//$( "#accordion" ).accordion( "refresh" );

//Document.Properties["abc"] = "";

$("#refreshWrapper input").val(Math.random());

$("#refreshWrapper input").focus();

$("#refreshWrapper input").blur();

//SpotfireDocument.setDocumentProperty("abc", "");

} );

Link to comment
Share on other sites

  • 4 months later...

Hi there,I'm extremely interested in seeing these gauges and how they're implemented, but when I open the sample DXP file I get two JS errors:Exception details:

Type: TypeError

Message: Cannot read property 'getContext' of null

Stacktrace: TypeError: Cannot read property 'getContext' of null

    at i [as constructor] (eval at <anonymous> (http://localhost:8003/package=js:16845:165), <anonymous>:3:14549)

    at new i (eval at <anonymous> (http://localhost:8003/package=js:16845:165), <anonymous>:3:16405)

    at eval (eval at <anonymous> (http://localhost:8003/package=js:16845:165), <anonymous>:19:13)

    at Object.<anonymous> (http://localhost:8003/package=js:16846:4)

    at Function.each (http://localhost:8003/package=js:43:116)

    at Object.evalCustomScripts (http://localhost:8003/package=js:16845:122)

    at eval (eval at evaluate (http://localhost:8003/package=js:11804:89), <anonymous>:2:776)

    at Object.evaluate (http://localhost:8003/package=js:11804:89)

    at Object.<anonymous> (http://localhost:8003/package=js:11452:122)

    at Function.each (http://localhost:8003/package=js:43:116)

 Exception details:

Type: TypeError

Message: Cannot read property 'getContext' of null

Stacktrace: TypeError: Cannot read property 'getContext' of null

    at new i (eval at <anonymous> (http://localhost:8003/package=js:16845:165), <anonymous>:3:6757)

    at eval (eval at <anonymous> (http://localhost:8003/package=js:16845:165), <anonymous>:32:13)

    at Object.<anonymous> (http://localhost:8003/package=js:16846:4)

    at Function.each (http://localhost:8003/package=js:43:116)

    at Object.evalCustomScripts (http://localhost:8003/package=js:16845:122)

    at eval (eval at evaluate (http://localhost:8003/package=js:11804:89), <anonymous>:2:776)

    at Object.evaluate (http://localhost:8003/package=js:11804:89)

    at Object.<anonymous> (http://localhost:8003/package=js:11452:122)

    at Function.each (http://localhost:8003/package=js:43:116)

    at updateDocument (http://localhost:8003/package=js:11452:39)

 Any idea why this would be  I am running Spotfire 7.7 if that makes a difference.Thank you for your help! 

Link to comment
Share on other sites

  • 1 year later...

I fixed it in the following way in 7.8:

$().find('.sf-element-dropdown').parent().each(function() {


});Based on the question, something like this should work:

$("#accordion").find('.sf-element-dropdown').parent().each(function() {



Link to comment
Share on other sites

  • 3 months later...

Hi Animesh, this works awesome for dropdowns!  Do you have a similar solution for Multi Select List boxes  I have inspected the html with the developer tools but for the life of me I can't figure out how to reference the multi-select list box.  This is what I have tried:


  $("#Division").find('sf-element-list-box sfc-scrollable').parent().each(function() {


I think that the part I am not referencing properly is indicated with the bold italicized text Spotfire.PropertyControls.ListBox.update(this.id)


Any help would be greatly appreciated.





Link to comment
Share on other sites

  • 1 month later...

Another way in which I got things working whenever stuff like dropdowns and multi-select listboxes did not render properly was by forcing them to re-render. 


I created a document property lets call it RandomNumber with the sole purpose of forcing Spotfire to re-render the elements. Now whenever any accordion was opened which had a  dropdown or a list box, the JS would just update the RandomNumber document property with any new random number. 


You can try it out.

Link to comment
Share on other sites

  • 4 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...