JavaScript Accordion Error 7.5

[Braeden Gilchrist]

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

 

HTML:

 

Visualization Overview

 

 

APIs Selected:

Top Operator:

Top County:

 

 

Visualization Options

 

 

Map Recompletion Status:

Map Layers:

Color:

 

 

DDD

 

Recomended Filters

 

 

County:

Current Operator:

Geology Zone:

Wellbore Type:

Recompletion Type (API level):

Completion Date:

 

 

 

JS:

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

[Braeden Gilchrist]

Here is a .DXP replicating the issue

[Sean Riley]

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:

 

https://docs.tibco.com/pub/spotfire/7.0.0/doc/html/text/text_javascript_...

 

 

Excerpt:

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.

[Ben Saunders]

I'm having this same issue. Did this ever get resolved

[Qaasim Quinn]

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>

</P>

<INPUT id=htmlInput>

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

</SPAN>

<SPAN id=ok>ok</SPAN>

</PRE>JQuery for accordion script:

                                //uses the change event to set the active panel

                                $('#accordion').accordion({

                                                collapsible: false,

                                                autoHeight: false,

                                                change: function(event,ui){

                                                                selectedPanel=$('#accordion').accordion('option','active')

                                                                                                                                                                                                                                                                                                                           $('#ok').button().click();

                                                }

                                })

 

                $('#ok').button().on('click',function(){

                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

   if(value!=oldValue){

      $("#htmlInput").val(value).blur();

   }

   oldValue=value

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

[Gerco ten Kate]

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

 

 

 

Filters

 

Processtep:

 

 

 

Plant:

 

 

 

Metrics

 

 

 

Dimensions

 

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) {

console.log(event.toString());

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

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

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

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

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

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

} );

[S H]

Thank you for this solution!  This worked perfectly to resolve the problem.

[Oil Chaichan]

Hi quintus-gerco

 

i have the same issue with you but i cannot solve it.

 

could you please to share fixed dxp file

[Gerco ten Kate]

@oil3oyd I have updatet my answer, with full script and example DXP.

 

as a bonus the DXP includes gauges.

 

 

[S H]

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! 

[Gerco ten Kate]

Don't want to go too much off-topic here.saved the file in Spotfire 7.8

HTML sanitation must be set false in preferences

Trust all scripts in the DXP (when you have the author scripts license) 

[Oil Chaichan]

Awesome !!!

 

Big thank for your solution.  my dashboard is perfect now because of you.

 

btw. thank again for your sharing about Gauges script also

[Animesh Choudhary 3]

I fixed it in the following way in 7.8:

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

Spotfire.PropertyControls.DropDown.update(this.id);

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

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

Spotfire.PropertyControls.DropDown.update(this.id);

});

[Mike Akister]

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() {
           Spotfire.PropertyControls.ListBox.update(this.id);
       });

 

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.

 

Thanks!

 

Mike

[Animesh Choudhary 3]

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.

[Divyashree K N]

Hi All,

I am still facing this issue i.e.; dropdowns are not rendering properly in webplayer. Could you share the working dxp. I am unable to find any attachments in this page.