JavaScript Sidebar for Spotfire

#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
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

Disclaimer

This method makes assumptions about the inner workings of Spotfire version 12.0.0 LTS Any analyses created using this hack may cause instability and performance issues and are likely to break when Spotfire is upgraded or hotfixed in the future.  Any issues resulting from applying this hack are not covered by Spotfire maintenance agreements and Support will not assist in troubleshooting problems with analysis files where this approach is used.