Tutorial 2: Custom Report Navigation in Reports

BellaDati allows you to add custom content to your reports and dashboards. With basic knowledge of HTML and CSS, it is possible to create custom navigation between reports or (and) dashboard.

Basic Menu Example

Add new custom content to your report.
Switch to Source mod.
Add HTML code of your menu. In this case we will use a list with <ul> and <li> tags:
```
<div class="menu">
    <ul>
      <li><a href="/bi/report/detail/IDofReport">Name of link 1</a></li>
      <li><a href="/bi/report/detail/IDofReport2">Name of link 2</a></li>
      <li><a href="/bi/report/detail/IDofReport3">Name of link 3</a></li>               
    </ul>
</div>
```
Please notice several parts of the code:
1. the <div> wrapper has its class. This class will be used for custom styling via CSS.
2. Inside of each <li> element, there is a link to a specific report and name of the link. You can find the ID of the report in adress bar of your browser.

When basic structure is complete, add your own CSS. For horizontal menu you use for example this code:

<style type="text/css">
.menu {
  margin: auto 0;
  width: 100%;
background: #43a05f;
}
.menu > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0;
}
.menu li {
  display: inline-block;
  position: relative;
}
.menu a {
  color: #fff;
  display: block;
width:300px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 18px;
  text-decoration: none;
  background: #43a05f;
}
</style>

Of course it is possible to use your own stylesheet.

Change the Content color theme to default to remove the background.
Click on save. The result should look like this:

Additional improvements

Now that you have basic menu working, you can add additional features.

Highlight currently open report

This is possible by adding class to an <a> element of currently open report.This means that the class has to be added to different <a> element in each report.

Example

Report 1:

<div class="menu">
    <ul>
      <li><a class="current" href="/bi/report/detail/12345">Name of link 1</a></li>
      <li><a href="/bi/report/detail/12346">Name of link 2</a></li>
      <li><a href="/bi/report/detail/12347">Name of link 3</a></li>               
    </ul>
</div>

Report 2:

<div class="menu">
    <ul>
      <li><a href="/bi/report/detail/12345">Name of link 1</a></li>
      <li><a class="current" href="/bi/report/detail/12346">Name of link 2</a></li>
      <li><a href="/bi/report/detail/12347">Name of link 3</a></li>               
    </ul>
</div>

Then you need to set up the css:

.menu .current{
    color: #fff;
    background: #77dd77;
}

Save the custom content. The result should look like this:

Add hover effect

Add this CSS to your Custom content:

.menu a:hover {
    color: #fff;
    background: #78bbbb;
border:5px solid bottom #ffffff;
}