Tutorial 3: Custom Report Navigation in Public Reports

In this tutorial you will learn how to add your own navigation to public reports. The standard top bar will be replaced with stylish tab-like menu. To make it more appealing, transition and transparency effects will be used.

At least basic knowledge of HTML, CSS and JavaScript is required.

Prerequisites

First you need to prepare some reports and generate their public links - see our documentation for more info.

Steps

Add new custom content to the report. This custom content will contain the code. But you can also add some description of the report to this view so it does not look empty.
When editing the custom content, always switch to source mode (not rich text mode)! Otherwise the code will break.
The code will have three parts:
1. Description of the report
2. JavaScript code for adding the menu to top bar.
3. CSS stylesheet for finetuning the appearance of the menu.

Add the decription (don't forget to be in the source mode). It can be something like this:

<span style="color: rgb(102, 102, 102);font-size:140%;font-weight:bold;">
This report serves as quick overview of production, failures and costs of failures (opportunity costs) for all factories or by selected factory.
Important production KPIs and trends are adressed such as:
<ul>
<li>number of critical failures compare to expected failures,</li>    
<li>opportunity costs of failures,</li>   
<li>analysis of components that causes failures,</li>   
<li>actual and predicted lifespan of components.</li></ul></span>

Add the JavaScript code (don't forget to be in the source mode):

<script>
    $(".publicPage .topbar h2").replaceWith('<a href="http://www.belladati.com" title="BellaDati"><img style="float: left; height: 25px;padding-left:10px;padding-top:5px;padding-bottom:5px;" src="https://service.belladati.com/pics/red-13-12/logo-belladati.png"></a><div class="menu"><ul><li class="current"><a title="name of report 1" href="/bi/report/public/aliasofreport1">name of report 1</a></li><li><a title="name of report 2" href="/bi/report/public/aliasofreport2">name of report 2</a></li><li><a title="name of report 3" href="/bi/report/public/aliasofreport3">name of report 3</a></li><li><a title="name of report 4" href="/bi/report/public/aliasofreport4">name of report 4</a></li><li><a title="name of report 5" href="/bi/report/public/aliasofreport5">name of report 5</a></li><li><a title="name of report 6" href="/bi/report/public/aliasofreport6">name of report 6</a></li></ul></div><div id="backlink"><a title="someotherlink" href="someotherlink">someotherlink</a></div>');


    $(function() {
        $(window).scroll(function() {
            var scrollTop = $(window).scrollTop();
            if (scrollTop != 0)
                $('.publicPage .topbar').stop().animate({
                    'opacity': '0.8'
                }, 400);
            else
                $('.publicPage .topbar').stop().animate({
                    'opacity': '1'
                }, 400);
        });

        $('.publicPage .topbar').hover(
            function(e) {
                var scrollTop = $(window).scrollTop();
                if (scrollTop != 0) {
                    $('.publicPage .topbar').stop().animate({
                        'opacity': '1'
                    }, 400);
                }
            },
            function(e) {
                var scrollTop = $(window).scrollTop();
                if (scrollTop != 0) {
                    $('.publicPage .topbar').stop().animate({
                        'opacity': '0.8'
                    }, 400);
                }
            }
        );
    });
</script>

The first part of this code is used for adding the HTML code to the top bar. The second part (starting with $(function() {) is used for animation - you don't have to use this part if you are not interested in animations.

Add the CSS code (don't forget to be in the source mode):

<style>
    .publicPage .topbar {
        background: #f15d58;
        border-bottom: 5px solid white;
    }

    .publicPage .topbar h2 {
        display: none;
    }
.publicPage .topbar #backlink {
       float:right;
       display: block;
       height: 30px;
       line-height: 30px; 
       text-align: center;
       font-size: 14px;
       padding-right: 10px;
       padding-left: 10px;
       border-left: 1px solid rgba(239, 239, 239, 0.5);
       border-top: 5px solid #f15d58;   
    }
   .publicPage .topbar #backlink a{
        color: white; 
            border-bottom: 1px solid #f15d58;
      -o-transition:.5s;
       -ms-transition:.5s;
       -moz-transition:.5s;
       -webkit-transition:.5s;
        transition:.5s;
    }

   .publicPage .topbar #backlink a:hover {
        text-decoration:none;
            border-bottom: 1px solid  white;
    }
    .publicPage .topbar .menu {
        margin: auto 0;
        width: 100%;
        background: #f15d58;

    }

    .publicPage .topbar .menu > ul {
        margin: 0;
        padding-top: 0;
        padding-left: 10px;
        padding-right: 10px;
        list-style: none;
        font-size: 0;
        width: 75%;
        height: 30px;
    }

    .publicPage .topbar .menu li {
        display: inline-block;
        position: relative;
        width: 16%;
        max-width: 400px;
         border-top: 5px solid #f15d58;
    }

   .publicPage .topbar .menu li + li{
        border-left:1px solid rgba(239, 239, 239, 0.5);
      -o-transition:.7s;
       -ms-transition:.7s;
       -moz-transition:.7s;
       -webkit-transition:.7s;
        transition:.7s;
    }
   .publicPage .topbar .menu li + .current{
        border-left:1px solid #f15d58;
    }
   .publicPage .topbar .menu .current + li{
        border-left:1px solid #f15d58;
    }
   .publicPage .topbar .menu li + li:hover{
        border-left:1px solid #f15d58;
    }
   .publicPage .topbar .menu li:hover+ li{
        border-left:1px solid #f15d58;
    }
    .publicPage .topbar .menu a {
        color: #fff;
        display: block;
        height: 18px;
        line-height: 18px;
        text-align: center;
        font-size: 14px;
        text-decoration: none;
        background: #f15d58;
        margin: 0px;
        border-radius: 12px 12px 0px 0px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
      -o-transition:.7s;
       -ms-transition:.7s;
       -moz-transition:.7s;
       -webkit-transition:.7s;
        transition:.7s;
    }

    .publicPage .topbar .menu .current a {
        color: #f15d58;
        background-color: white;
    }

    .publicPage .topbar .menu a:hover {
        color: white;
        background-color: #E88282;
    }

    .publicPage .topbar .menu .current a:hover {
        color: #f15d58;
        background-color: white;
    }

    .publicPage .topbar .menu ul li a {
        padding: 5px !important;
        padding-bottom: 7px !important;
    }
</style>

Of course you can change the colors, animation etc.

This example contains six links but you use any number of links (<li> elements). Just don't forget to change the width of the li element:

 .publicPage .topbar .menu li {
        display: inline-block;
        position: relative;
		/* change the percentage of width */
        width: 16%;
        max-width: 400px;
         border-top: 5px solid #f15d58;
    }

Save the report and open link for public report. The menu should be working correctly.

Here is full code:

<span style="color: rgb(102, 102, 102);font-size:140%;font-weight:bold;">
This report serves as quick overview of production, failures and costs of failures (opportunity costs) for all factories or by selected factory.

Important production KPIs and trends are adressed such as:
<ul>
<li>number of critical failures compare to expected failures,</li>    
<li>opportunity costs of failures,</li>   
<li>analysis of components that causes failures,</li>   
<li>actual and predicted lifespan of components.</li></ul></span>
<script>
 $(".publicPage .topbar h2").replaceWith('<a href="http://www.belladati.com" title="BellaDati"><img style="float: left; height: 25px;padding-left:10px;padding-top:5px;padding-bottom:5px;" src="https://service.belladati.com/pics/red-13-12/logo-belladati.png"></a><div class="menu"><ul><li class="current"><a title="name of report 1" href="/bi/report/public/aliasofreport1">name of report 1</a></li><li><a title="name of report 2" href="/bi/report/public/aliasofreport2">name of report 2</a></li><li><a title="name of report 3" href="/bi/report/public/aliasofreport3">name of report 3</a></li><li><a title="name of report 4" href="/bi/report/public/aliasofreport4">name of report 4</a></li><li><a title="name of report 5" href="/bi/report/public/aliasofreport5">name of report 5</a></li><li><a title="name of report 6" href="/bi/report/public/aliasofreport6">name of report 6</a></li></ul></div><div id="backlink"><a title="someotherlink" href="someotherlink">someotherlink</a></div>');


    $(function() {
        $(window).scroll(function() {
            var scrollTop = $(window).scrollTop();
            if (scrollTop != 0)
                $('.publicPage .topbar').stop().animate({
                    'opacity': '0.8'
                }, 400);
            else
                $('.publicPage .topbar').stop().animate({
                    'opacity': '1'
                }, 400);
        });

        $('.publicPage .topbar').hover(
            function(e) {
                var scrollTop = $(window).scrollTop();
                if (scrollTop != 0) {
                    $('.publicPage .topbar').stop().animate({
                        'opacity': '1'
                    }, 400);
                }
            },
            function(e) {
                var scrollTop = $(window).scrollTop();
                if (scrollTop != 0) {
                    $('.publicPage .topbar').stop().animate({
                        'opacity': '0.8'
                    }, 400);
                }
            }
        );
    });
</script>

<style>
    .publicPage .topbar {
        background: #f15d58;
        border-bottom: 5px solid white;
    }

    .publicPage .topbar h2 {
        display: none;
    }

.publicPage .topbar #backlink {
       float:right;
       display: block;
       height: 30px;
       line-height: 30px; 
       text-align: center;
       font-size: 14px;
       padding-right: 10px;
       padding-left: 10px;
       border-left: 1px solid rgba(239, 239, 239, 0.5);
       border-top: 5px solid #f15d58;   
    }
   .publicPage .topbar #backlink a{
        color: white; 
            border-bottom: 1px solid #f15d58;
      -o-transition:.5s;
       -ms-transition:.5s;
       -moz-transition:.5s;
       -webkit-transition:.5s;
        transition:.5s;
    }

   .publicPage .topbar #backlink a:hover {
        text-decoration:none;
            border-bottom: 1px solid  white;

    }
    .publicPage .topbar .menu {
        margin: auto 0;
        width: 100%;
        background: #f15d58;

    }

    .publicPage .topbar .menu > ul {
        margin: 0;
        padding-top: 0;
        padding-left: 10px;
        padding-right: 10px;
        list-style: none;
        font-size: 0;
        width: 75%;
        height: 30px;
    }

    .publicPage .topbar .menu li {
        display: inline-block;
        position: relative;
        width: 16%;
        max-width: 400px;
         border-top: 5px solid #f15d58;
    }

   .publicPage .topbar .menu li + li{
        border-left:1px solid rgba(239, 239, 239, 0.5);
      -o-transition:.7s;
       -ms-transition:.7s;
       -moz-transition:.7s;
       -webkit-transition:.7s;
        transition:.7s;
    }

   .publicPage .topbar .menu li + .current{
        border-left:1px solid #f15d58;
    }
   .publicPage .topbar .menu .current + li{
        border-left:1px solid #f15d58;
    }

   .publicPage .topbar .menu li + li:hover{
        border-left:1px solid #f15d58;
    }
   .publicPage .topbar .menu li:hover+ li{
        border-left:1px solid #f15d58;
    }

    .publicPage .topbar .menu a {
        color: #fff;
        display: block;
        height: 18px;
        line-height: 18px;
        text-align: center;
        font-size: 14px;
        text-decoration: none;
        background: #f15d58;
        margin: 0px;
        border-radius: 12px 12px 0px 0px;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
      -o-transition:.7s;
       -ms-transition:.7s;
       -moz-transition:.7s;
       -webkit-transition:.7s;
        transition:.7s;
    }

    .publicPage .topbar .menu .current a {
        color: #f15d58;
        background-color: white;
    }

    .publicPage .topbar .menu a:hover {
        color: white;
        background-color: #E88282;
    }

    .publicPage .topbar .menu .current a:hover {
        color: #f15d58;
        background-color: white;
    }

    .publicPage .topbar .menu ul li a {
        padding: 5px !important;
        padding-bottom: 7px !important;
    }
</style>

Please see our live example.

Page tree

Tutorial 3: Custom Report Navigation in Public Reports

Prerequisites

Steps