Jump to content
  • JavaScript Sidebar for Spotfire


    A sidebar is a vertical panel located on the left of your visual to hold Spotfire Controls such as page navigation links, filters and property controls. Create sidebars in seconds using JavaScript.

    #Please note, some of the URLs below may be out of date due to the Spotfire Community migration [Dec 23]

    Introduction

    A Sidebar is a vertical column placed to one side of a page to display different types of supplementary information to users.

    The JavaScript Sidebar for Spotfire is a column placed to the left of a page to display information about the analysis, navigation to other pages, links,  calculated values, filters or other type of Spotfire controls on any other HTML element that a text area can handle. 

    Here are 3 different Sidebar scripts that can be easily customized with contents, font size and colors.
     

    JavaScript Flat Sidebar for Spotfire

    JavaScript Popup Sidebar for Spotfire

    JavaScript Slim Sidebar for Spotfire

    spacer.png spacer.png spacer.png
    For simple page navigation
    Optional icons for links navigation
    Groups Spotfire Controls
    Does not overlay with other visualizations
    Can highlight active page with *** for nav items

    Saves real state
    Shows or hides with buttons
    Can group page navigation items
    Can hold Spotfire controls
    Overlays other visualizations

    Intended for smooth page navigation
    Can be minimized
    Can group pages
    Overlays other visualizations
    Does not support Spotfire controls

    How it works

    A text area on the left side of the page holding links, controls or other elements wrapped in specific tags that are parsed by different Sidebar JavaScript engines to display a different style (flat, popup and slim). 

    The elements are:

    • sidebar: An empty "sidebar" id element located at the top of the page to control the font size and colors
    • logo: a text or image wrapped in an "sidebar-logo" id element
    • nav: a set of links inside a "sidebar-nav" id element usually for page navigation
    • nav-icons: a set of icon names for each navigation item
    • controls: Can hold filters, Spotfire controls and other elements

    Not all sidebar scripts can handle all these tags. For example, the slim sidebar script does not support the controls tag

    Sidebar components

    sidebar

    Controls the font size, text color and background color. This tag must be empty. Anything inside it gets removed.

     <DIV id="sidebar" style="FONT-SIZE: 20px; BACKGROUND: black; COLOR: white"></DIV>
     

    logo

    The logo item replaced the logo placeholder from the html template. The html template resides inside the sidebar script. An image, svg or even a Spotfire control can be placed inside this tag. Image Height and width are ignored

    Example 1 (image)

    <div id="sidebar-logo">
       <img src="bffeccd104778a9d.png" style="border: 0; width: 409px; height: 113px;"/>
    </div>
     

    Example 2 (text)

     <div id="sidebar-logo">C. Corp</div>
     

    Example 3 (svg)

    <div id="sidebar-logo>
       <svg height="20" viewBox="0 0 142.4 45.8" xmlns="http://www.w3.org/2000/svg"><g style="fill:green"><path...</svg>
    </div>
     

    nav

    This sidebar control is used to hold links, usually for page navigation purposes but it can hold some Spotfire controls. The navigation sidebar component is designed to hold link tags, so when adding a Spotfire control make sure it is of a link type. Otherwise, you can wrap them with an <a> tag. The structure is:

    <DIV id="sidebar-nav">
     <a>Page 1</a>
     <a>Active Page***</a>
     <a>Page 3</a> 
     <SpotfireControl (link)>
     <a><SpotfireControl (button)></a> 
    </div>
     


    The triple asterisk (***) is to mark the page as active. At this point, only the flat sidebar style supports it

    nav-icons

    Uses classic font-awesome icons (requires access to cdnjs.cloudflare.com content delivery network). The link to the specific version of font-awesome is embedded in the sidebar scripts. The nav-icon tag must be located after the nav item described previously. Just coma separate the name of the fonts matching the number of links in the nav sidebar component.

    <div id="sidebar-nav-icons" >house,user,circle,box,umbrella,music,heart,gear</div>
     

    To place a blank icon, just skip the name, but add a comma. 

    <div id="sidebar-nav-icons" >house,user,circle,,umbrella,,heart,gear</div>
     

    Example (icons only for groups )

    <DIV id="sidebar-nav" >
    	<a>Cars</a>
    	<li>
    	  <a>Performance</a>
    	  <a>Safety</a>
    	</li>
            <a>Finance</a>  
            <li>
    	  <a>Balance Sheet</a>
    	  <a>Income Statements</a>  
    	  <a>Cash Flow</a>  
    	</li>
            <a>Regions</a>
            <li>
    	  <a>West</a>  
    	  <a>Midwest</a>  
    	  <a>Northeasth</a>  
    	  <a>South</a>  
    	</li>
    </div>
    <div id="sidebar-nav-icons" >car,,,file-invoice-dollar,,,,globe,,,,</div>
     

    controls

    Controls are a set of Spotfire controls such as Action Controls, Filters, Property Controls or Dynamic items grouped together. Odd sidebar control child elements are the title for the group for even sidebar control child elements.

    To have a group of controls opened by default, append a triple asterisk to the group title.

    <div id="sidebar-controls">
       <div>Group 1</div> 
       <div>
           <SpotfireControl 1/>
           <SpotfireControl 2/>
           <SpotfireControl 3/>
       </div> 
       <div>Group 2***</div> 
       <div>
           <SpotfireControl 1/>
           <SpotfireControl 2/>
           <SpotfireControl 3/>
       </div> 
    </div>
     


    Group titles can hold controls as well such as labels or calculated values or even a group of them, but it must follow the same odd-even child structure

    <div id="sidebar-controls">
       <div>
           Group 1 with Spotfire controls
           <SpotfireControl 1/>
           <SpotfireControl 2/>
      </div> 
       <div>
          Group 1 child elements
           <SpotfireControl 1/>
           <SpotfireControl 2/>
           <SpotfireControl 3/>
       </div> 
       <div>Group 2</div> 
       <div>
           <SpotfireControl 1/>
           <SpotfireControl 2/>
           <SpotfireControl 3/>
       </div> 
    </div>
     

    See also

    JavaScript Sidebar for Spotfire
    JavaScript Masthead for Spotfire
    IronPython Masthead for Spotfire

    Back to the JavaScript Component Hub for Spotfire

     

    • Like 1

    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...