Jump to content
  • JavaScript Masthead for Spotfire


    Change the masthead / header of a page quickly with JavaScript templates

    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.

    image.thumb.gif.074c809f33a6634eb6db1f16014f3909.gif

    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. 

    image.thumb.png.b5b8f11916150d1c3569c6da4f324200.png

    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.

     image example 1 
    <DIV id="masthead-logo">
       <IMG style="BORDER-TOP: 0px; HEIGHT: 50px; BORDER-RIGHT: 0px; BORDER-BOTTOM: 0px;   BORDER-LEFT: 0px" src="bb4c13071191454ca65c3a404ab908a8.png">
    </DIV>
     
     svg example
    <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

    image.thumb.gif.8b91a4ddbb00c755b4b2553476a67516.gif

    image.png.94b48c6acbc9a67c6f67bdac1966e979.png

    <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

     List Box filter label example 
     
    //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]))
     
    range filter label example to show min and max
     
     Min([Price]) & " - " & Max([Price])

    Another List Box Filter label example to show a maximum number of character for the UniqueConcatenate
     
     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

    image.png.16580fb407a898f52c0c1b2d5a9aeb0d.png      

    JavaScript Masthead-simple Template for Spotfire

    simple resizable masthead header

    image.png.44c8af1ebd49b1ceca1e8d9678ee1f93.png        

    JavaScript Masthead-slim Template for Spotfire

    a slim page with navigating icons

    image.png.9426e1e8540336fd558fc3d5914c8a84.png      

    JavaScript Masthead-waves Template for Spotfire

    resizable waves animation

    image.png.5d4a3c8269416d7df1a068330d276d3c.png            

    JavaScript Masthead-popups Template for Spotfire

    uses all available masthead components

    image.thumb.png.9b5af19a540bd6d00e06c334fa6212fb.png  

    JavaScript Masthead-breadcrumb for Spotfire

    simple breadcrumb navigation

    image.png.3919caaa8933f56b446bdf05acaaef6f.png          

     

    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


    image.png.ea2406f57aa2ba0f00c2789992ba1b6a.png

    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>
     
    javascript code
     
    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

    image.thumb.gif.bce5049ce7a843d71a3b85f42a6fa12b.gif
    To make this script fixed at the top of the screen, try the JavaScript Fixed Masthead for Spotfire

    Back to the JavaScript Component Hub for Spotfire

     

     

     

     

     


    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...