On my previous IronPython Masthead for Spotfire article I explained how to replicate a masthead, or any other visualization, across multiple pages on your Spotfire analysis. In this article, I explain how to quickly create or change mastheads with pre-built JavaScript or your analysis without having to code anything in JavaScript

Using the IronPython Masthead along with the the JavaScript Masthead can get you deliver professional looking dashboards in no time.

The JavaScript Masthead for Spotfire consists of a specific html structure containing certain masthead-components, Spotfire Controls and a JavaScript template.

The following image illustrates a masthead template that supports most components. 

Masthead components

Masthead components are defined in the Text Area while editing the HTML of a Text Area. These components are html tag elements with a specific id and in some cases, attributes to control the look and feel of the component. These components and components ids are: masthead, masthead-logo, masthead-title, masthead-navigation, masthead-navigation icons, masthead-options and masthead-filters

masthead

The masthead is the main placeholder for the JavaScript template. The JavaScript template is responsible to place the other masthead components inside the main masthead placeholder. The style attribute controls the font size, color and background of the masthead. You can put any other style attributes such as a border with a shadow and rounded corners or a background image as well. Anything inside the tag will be replaced by the template. You can place inside this tag anything that is not used by the JavaScript template but you use when not using the JavaScript template. For example, comments, instruction, links, filters, or anything else.
 

 <DIV id="masthead" style="FONT-SIZE: 20px; BACKGROUND: #3498db; COLOR: white"></DIV>

masthead-logo

The masthead logo supports svg, png, gif or any other format supported by the text area. Plain text is also supported or anything else. Even Spotfire Controls are supported as well. The JavaScript parser place any item inside the masthead-logo, but it is meant for an image, specially an SVG to match the text color. If not, a transparent gif is also a good option. The style attribute is ignored on this an any other masthead component except the main masthead placeholder for the template.

<DIV id="masthead-logo">
   <IMG style="BORDER-TOP: 0px; HEIGHT: 50px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px;   BORDER-LEFT: 0px" src="bb4c13071191454ca65c3a404ab908a8.png">
</DIV>

<div id="masthead-logo">
<?xml version="1.0" encoding="utf-8"?>
  <div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 2498.3 658.8" style="enable-background:new 0 0 2498.3 658.8;" xml:space="preserve">
<g>
	<path class="svg_logo" d="M280.5,140.3v504.8h-77.8V140.3H0V66.2h483.4v74.1H280.5z M575.9,645.1V66.2h77.8v578.9L575.9,645.1z
		 M1202.7,481.1c0,98.2-65.7,163.9-214.8,163.9H790.6V66.2h191.7c139.8,0,201.9,62.9,201.9,153.7c0,59.2-34.3,102.9-99.2,127.5
		C1162.5,366.2,1202.7,416.2,1202.7,481.1z M988.8,138.4H869.3v181.5h107.4c83.3,0,128.8-37,128.8-93.5S1064.7,138.4,988.8,138.4
		L988.8,138.4z M983.2,391.3H869.9v181.5h125.4c86.1,0,128.8-30.6,128.8-90.8C1124.1,415.4,1064.7,391.3,983.2,391.3L983.2,391.3z
		 M1715.9,172.3c-46.3-32.6-101.6-50-158.3-49.6c-126,0-211,87.1-211,230.7s85,235.2,212.5,235.2c59.3-1,116.7-20.9,163.9-56.7
		l12.9,78.8c-54.1,31.8-115.9,48.4-178.7,48.2c-170,0-289.9-117.6-289.9-301.9s121.7-304.6,290.2-304.6
		c64.3-0.4,127.5,16.2,183.3,48.2L1715.9,172.3z M2217.8,93.2c-8.7-5.2-17.6-10-26.8-14.2c-75.7,145.1-212.5,317.6-395,415.8
		c10.1,23,23.4,44.4,39.4,63.8C1991.8,450.7,2136.6,271.5,2217.8,93.2L2217.8,93.2z"/>
	<path class="svg_logo" d="M2184.1,75.7c-39.7-16.9-82.5-25.5-125.7-25.1c-170,0-290.3,131.3-290.3,304.2c-0.1,27.7,2.9,55.3,8.9,82.3
		C1951,366.2,2105.8,209.8,2184.1,75.7L2184.1,75.7z M2225,97.2c-89.3,219.6-198.3,374.9-337.1,508.5c50.5,34,110.3,51.7,171.1,50.6
		c170,0,290.3-132.2,290.3-305.2C2348.7,236.6,2301.3,147.6,2225,97.2L2225,97.2z M2348.7,78.1c-1.8-41.3,30.2-76.2,71.5-78
		c41.3-1.8,76.2,30.2,78,71.5c0.1,2.2,0.1,4.3,0,6.5c1.8,41.3-30.2,76.2-71.5,78c-41.3,1.8-76.2-30.2-78-71.5
		C2348.6,82.4,2348.6,80.2,2348.7,78.1z M2489.7,78.1c0-36.5-29.6-66.2-66.1-66.2c-36.5,0-66.2,29.6-66.2,66.1c0,0,0,0.1,0,0.1
		c0.1,36.5,29.8,66.1,66.4,66c36.5-0.1,66.1-29.8,66-66.4V78.1z M2394.4,38.5h34.4c16.7,0,29.2,8.2,29.2,24.1
		c0.4,10.9-6.9,20.7-17.6,23.2l20.3,28.3h-17.6l-18.3-26.9h-15.6v26.9h-14.2V38.1L2394.4,38.5z M2427.5,76.4
		c7.2,1.3,14-3.5,15.3-10.7c0.1-0.6,0.2-1.2,0.2-1.8c0-7-5.7-12.8-12.7-12.8c-0.9,0-1.8,0.1-2.7,0.3h-18.3v24.5h18.4L2427.5,76.4z"
		/>
</g>
</svg>
</div>

masthead-title

This an any other masthead component can support any element. Here you can place filters, text, images, but it is meant for the masthead title. Typically it is a plain text or perhaps a label or calculated value. Depending on the template, you might want to use a home button, for example instead of a logo or a combination of both so when clicking on the logo, it goes to the beginning of the analysis or a landing page.

<DIV id="masthead-title" >
	JavaScript Masthead for TIBCO Spotfire
</DIV>

masthead-navigation

This masthead component requires each masthead navigation item to be an action control of type label. Anything else needs to be wrapped by an anchor tag (<a>). Yo do not need to wrap the label action controls with <a>, but If you need to place any other control such as a label property control or a Calculated Value Dynamic Item or even a image or button action control, make sure you wrap this element with <a>

Active page

Some templates support active page. If the label of the navigation ends with ***, the template will remove this from the label and instead apply what the active page is

<DIV id="masthead-nav" >
   <SpotfireControl id="f478394ee6a64b208451052a86c6d68c" />        ◄- This is an Action Control of type label masthead navigation item
   <a href="//community.tibco.com">Help</a>                         ◄- This a hard coded masthead navigation item
   <a><SpotfireControl id="ecb970827fc14cdba75c8781d16cc1d7" /></a> ◄- This could be a non Action Control or a non label type Action Control navigation item
</DIV>

masthead-navigation-icons

This is a coma separated list of icons and works with the masthead-navigation component to support iconography. It requires the feather-icons javascript library. To add feather icons to the templates that supports them, copy the code from https://unpkg.com/feather-icons into a new javaScript in your TextArea and then search https://feathericons.com/  to find the icon and valid icon keywords.

To select the navigation icons, choose a valid icon keyword from feathericons and place them. If you do not 
 

 <div id="masthead-nav-icons">circle,layers,globe,help-circle,cpu</div>

masthead-options

Similar to the masthead-navigation, this component is meant to display any kind of Spotfire controls. Depending on the template, it can display them as a popup, side bar, accordion or dropdown. Not all templates support masthead-options
 

<DIV id="masthead-options">
    <SpotfireControl id="f53d75c45c3f4a4798386b479f687e08" />                                           ◄- This is an Action Control of any type (button, image, link)
     <a>Price:<br><SpotfireControl id="a894eaf0ad384d2c99bf2dc8dde9ec46" /></a>                         ◄- This is a filter wrapped in an anchor tag <a> to support a label for the filter
     <a style="color:#3498db !important"><SpotfireControl id="5949ba0b928044efa3365fa271387a79" /></a>  ◄- This is a filter wrapped in an anchor tag <a> overriding the text color of the filter
</DIV>

masthead-filters

The filers component requires a label and the contents of a popup when the label is clicked.  It requires a set of elements. Odd elements represents the title or button for the filter and even elements are the contents of the button popup. Normally you use calculated values as the label of the filter an a filter for its contents, but you can place images, links or whatever you can think of as long as you have an even number of elements inside the masthead-filters component.

<div id="masthead-filters">

   <a>hello</a>
   <b>world</b>

   <LABEL>Ticker: <SpotfireControl id="77637c5ae0e24d29ace7c9da3cbfd5c4" /></LABEL>  
   <SPAN ><SpotfireControl id="42018bd8825947089e9101a8730c4204" /></SPAN>

   <LABEL>Price: <SpotfireControl id="73986cf745ca46a3bd5c2450b1b970cb" /></LABEL> 
   <SPAN ><SpotfireControl id="435c6b65b1f74b589b6011082c3af23a" /></SPAN>

   <LABEL>State: <SpotfireControl id="c35374eb255d40e3aa38028f19bc1503" /></LABEL>    ◄- Use a calculated value to show what is filtered
   <SPAN c><SpotfireControl id="3ca52da015f94d69803bd963e9c63203" /></SPAN>           ◄- normally you use filters

   <LABEL>Help</LABEL> 
   <SPAN ><SpotfireControl id="5ec81a49781c46d4861d9f32b07a1ad4" /></SPAN>            ◄- this could be an image or an action control

</div>

Calculated value for the masthead filter label when using a filter item

//if the number of character from the UniqueConcatenate is too big, display the state count of selections. Else, display a comma separated values of selected states
if(len(UniqueConcatenate([State]))>28,UniqueCount([State]) & " selected",UniqueConcatenate([State]))

 Min([Price]) & " - " & Max([Price])

 left(UniqueConcatenate([Ticker]),28) & (if(len(UniqueConcatenate([Ticker]))>28,"...",""))

Available JavaScript templates

These templates are JavaScript files containing they design of the page that replaces the components contents to the layout. The template parses the html structure from the text area containing masthead components and places them on a predefined html layout on the main masthead placeholder. There are different JavaScript masthead templates available.

Click on any of these to get the source code and try them out

These are:

template name	preview	logo	title	navigation	active page	navigation icons	options	filters	responsive
JavaScript Masthead-nav-dropdown Template for Spotfire responsive masthead with active page and options dropdown			✔	✔	✔		✔		✔
JavaScript Masthead-simple Template for Spotfire simple resizable masthead header		✔	✔	✔					✔
JavaScript Masthead-slim Template for Spotfire a slim page with navigating icons		✔	✔	✔		✔			✔
JavaScript Masthead-waves Template for Spotfire resizable waves animation		✔	✔
JavaScript Masthead-popups Template for Spotfire uses all available masthead components		✔	✔	✔	✔	✔	✔	✔
JavaScript Masthead-breadcrumb for Spotfire simple breadcrumb navigation				✔	✔				✔

Creating your own JavaScript Templates and components

Use the JavaScript templates as the blue-print or starting point. Use a simple one so you can understand how they work. All the templates work under the same principle

The template has an html and css code with target placeholders. The target placeholders are html tags with a class name exactly the same as the component id. Here is the minimal code that takes the title, navigation and a new component. You can use this code as the starting point of your component.

The following code should render this

html code

<DIV id="masthead" style="FONT-SIZE: 1.2em; BACKGROUND: #3498db; COLOR: navy"></DIV>

<DIV id="masthead-nav">
   <a>page 1</a>
   <a>page 2***</a>
   <a>page 3</a>
</DIV>

var masthead = document.getElementById("masthead");
var nav = document.getElementById("masthead-nav");

html = `
<div class="masthead-nav" id="breadcrumb" >
    <a>navigation: </a>
</div>
 
<style>
#breadcrumb {
    border-bottom:10px solid ${masthead.style.background}; 
    font-size:${masthead.style.fontSize};
}
#breadcrumb a:before{  
   content:"»";  
   padding: 0 5px 0 5px;
}
#breadcrumb a:first-child:before {content:"";}
#breadcrumb a.active{font-weight:bold;border-bottom:10px solid ${masthead.style.color};} 
#breadcrumb a.active:before{font-weight:bold;border-bottom:10px solid ${masthead.style.background};} 
</style>
`

masthead.innerHTML = html 

//move elements function
function moveElement(from,to){
    if(to!=undefined){
                
      if (from.id == "masthead-nav") [...document.querySelectorAll("#masthead-nav a")].forEach(a=>{    
        a.style.color=masthead.style.color;
        if(a.innerText.endsWith("***")) {
            a.className="active"
            a.innerText = a.innerText.replace("***","")
        }
        document.querySelector(".masthead-nav").append(a)
      })
        }
     
    from.remove() 
}

 
var components= "nav,title,logo,options,filters,nav-icons";  
components = components.split(",").map(x=>{return "#masthead-"+x}).join(", "); 
[...document.querySelectorAll(components)].forEach(e=>{t="."+e.id;moveElement(e,document.querySelector(t)) });

masthead.style.background="none";

Making the Masthead always visible when scrolling down the page

To make this script fixed at the top of the screen, try the JavaScript Fixed Masthead for Spotfire

Back to JavaScript for Text Areas