Braeden Gilchrist Posted November 8, 2016 Posted November 8, 2016 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 Posted November 8, 2016 Author Posted November 8, 2016 Here is a .DXP replicating the issue
Sean Riley Posted November 9, 2016 Posted November 9, 2016 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 Posted March 8, 2017 Posted March 8, 2017 I'm having this same issue. Did this ever get resolved
Qaasim Quinn Posted May 31, 2017 Posted May 31, 2017 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 Posted July 26, 2017 Posted July 26, 2017 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 Posted July 26, 2017 Posted July 26, 2017 Thank you for this solution! This worked perfectly to resolve the problem.
Oil Chaichan Posted December 12, 2017 Posted December 12, 2017 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 Posted December 12, 2017 Posted December 12, 2017 @oil3oyd I have updatet my answer, with full script and example DXP. as a bonus the DXP includes gauges.
S H Posted December 12, 2017 Posted December 12, 2017 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 Posted December 12, 2017 Posted December 12, 2017 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 Posted December 13, 2017 Posted December 13, 2017 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 Posted April 16, 2019 Posted April 16, 2019 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 Posted August 6, 2019 Posted August 6, 2019 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 Posted September 9, 2019 Posted September 9, 2019 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 Posted October 3, 2023 Posted October 3, 2023 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.
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now