Drop-Down Property stuck in JS Drawer Flyout

[Vincent Thuilot]

Hello,

When implementing the JS Drawer Flyout, it turns to make Drop-Downs List (unique values in column) getting stuck to the first value.
Few colleagues reached me out with this issue already and I experience it myself as well. Other than that it works pretty well with other types of properties :)

I guess the JS isn't handling it Drop-Downs List (with unique values in column).
Or something else?

Thanks for your support!

Best regards,
Vincent

 

[David Boot-Olazabal]

Hi Vincent,

I have tried the JS Drawer Flyout myself, and it seems to work fine with drop down lists. I have tested this in Spotfire 14.2.
Not sure which version you have.

Can you share some screenshots and the html code of your text area?

Kind regards,

David

[Vincent Thuilot]

Hi David,

I am on version 11.4

sure here the html

###

<span id="toggleDrawer" >open/close Drawer</span>

<div id="myDrawer" class="closed right drawer" style="background:#2a2a2a;font-size:14px">
  <div class="close_drawer_button">✖</div>

  <!--contents starts here-->
    <h1>my drawer contents</h1>

 <SpotfireControl id="31c6440dd7644238ad2b7563a478ea24" />

</div>

###

the menu is simply stuck, cannot select something else than what is selected.

 

[Vincent Thuilot]

And here the js, from the original post by Jose:
 

//script parameters
id ="myDrawer";
//position="left"; //right|left
opened = false;

//init
drawer = document.getElementById(id);
if (opened) drawer.classList.add("open");
//drawer.classList.add(position);

//settings
document.getElementById("toggleDrawer").addEventListener("click", () => {drawer.classList.toggle("open")});
document.querySelector(".close_drawer_button").addEventListener("click", () => {drawer.classList.toggle("open")});

//style 
css = `<style>
.drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 300px;
    background-color: #fff;
    z-index: 1;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease-in-out;
    overflow:auto;
    padding: 20px;
}

.right{
    transform: translateX(100%);
    right: 0;
}

.left{
    transform: translateX(-100%);
    left: 0;
}

.drawer.open {
  transform: translateX(0);
}

.close_drawer_button{
  float:right;
  cursor:default;
}
</style>`

document.getElementById(id).insertAdjacentHTML("afterend",css)

 

Edited May 9 by Jose Leviaguirre

[David Boot-Olazabal]

Hi Vincent,

I have used your html (as well as the one from the original article) with the JS code in Spotfire 11.4.
Adding one or two drop-down filters, works perfectly fine for me.

I wonder if your drawer got corrupted somehow? Or do you have the same problem if you re-create the drawer in a new text area?

Kind regards,

David

[Vincent Thuilot]

Hi David,

Sorry for the late response, yes I have reproduced it in several other dxps.
Also other colleagues have been stuck recently when using this.

Could it be a glitch or something in deployment leading to this?

[David Boot-Olazabal]

Hi Vincent,

It sometimes happen that scripts start showing erratic behavior. The dxp becomes a bit wobbly and if you copy paste the code, it gets multiplied in other dxp's as well.
But if you start from scratch, that kind of behavior should not happen. In that case, it might be due to something else (for instance the Spotfire is influenced by another application on .dll level, etc.).

As it is quite unclear why this happens to your dashboard as well as in your colleagues ones, I would advise you to create a support ticket via https://support.tibco.com/.  Our support team may be able to dig deeper in logs etc. to find out what the root cause might be.

Kind regards,

David