JavaScript Drawer / Flyout / Custom Panel for Spotfire

Introduction

Depending on the architectural design of your page banner and menus, you can encapsulate all the html, css, js on a single javascript file. You will need a placeholder on the textarea to inject all that good html sauce in it. Your script can be as flexible as you'd like by adding parameters. Attached is a sample script that generates a drawer sliding from the right based on this approach. 

Getting started

You can only import scripts from the library this way, so I recommend keep the script on a separate dxp file on the library to avoid importing unnecessary scripts every time. It would be nice to store javascript files in the library as well. Maybe in a future version of Spotfire, so I encourage everybody to vote up this idea and this other one

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>
    You can put here whatever you want, including spotfire controls
  
    <SpotfireControl id="d6eb4007c2ee4220961c1e5b48b24c34" />
    <p><SpotfireControl id="94f75a6cd358473ba35723d334821185" /></p>
  <!-- contents ends here-->

</div>

js

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

Back to JavaScript for Text Areas