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.
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:
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.
Now that you have basic menu working, you can add additional features.
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.
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 this CSS to your Custom content:
.menu a:hover { color: #fff; background: #78bbbb; border:5px solid bottom #ffffff; } |
Save the custom content. The result should look like this:
Here you can download a BellaApp with all examples: Menu examples.bdt