Jump to content
  • JavaScript Drawer / Flyout / Custom Panel for Spotfire


    Create a flyout or custom panel to the right or left on your dashboard or analysis

    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. 

    drawer.thumb.gif.02d60271cc0f928e714bd4772dc5783b.gif
     

    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 the JavaScript Component Hub for TIBCO Spotfire


    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...