One thing that I have found useful at a few different clients is a small item that can be added to a dashboard which helps the user to understand what the dashboard is supposed to achieve, how to use it etc. This can be accomplished fairly easily with a static text view on a report that just brings back a very easy result. However, sometimes this will be even better received if you add a bit of style to it. It is very easy to make an expanding/collapsing item using some simple javascript and css. Here is a very simple example:
Initial state of item:
After clicking the "Show Help" link:
Clicking the Hide Help link will then collapse the item again, this adds a bit of style to the help item and saves screen real-estate on the dashboard when the help is not needed.
This can be easily created in a static text item following these steps:
- Create a very simple report, for example just put the year column from one of the date dimensions in the request and limit it to 2009, something that will return very quickly. You have to have a query underneath a request, even if you are only exposing a static text view.
- Create a static text view, ensure the "Contains HTML Markup" box is ticked otherwise it won't work properly.
- Put the HTML in the box, here is the HTML for my simple example:
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<style type="text/css">
<!--
div.wrapper {
text-align:left;
margin:0 auto;
width:500px;
border:2px solid #1358A8;
background: #9ABFDC;
padding:10px;
}
#myvar{
border:1px solid #1358A8;
background:#EAEFF5;
padding:20px;
font-family:verdana;
}
a.link{
color:#1358A8;
cursor:pointer;
font-family:verdana;
font-weight:bold;
text-decoration: underline;
}
p.custom{
font-family: verdana;
color: #586073;
}
-->
</style>
<script type="text/javascript">
<!--
function switchMenu(obj) {
var el = document.getElementById(obj);
var linkVar = document.getElementById("showhidelink");
if ( el.style.display != "none" ) {
el.style.display = 'none';
linkVar.innerHTML = "Show Help";
}
else {
el.style.display = 'block';
linkVar.innerHTML = "Hide Help";
}
}
//-->
</script>
</head>
<body>
<div class="wrapper">
<p align=center><a title="Show/Hide" onclick="switchMenu('myvar');" class="link" id="showhidelink">Show Help</a></p>
<div id="myvar" style='display:none;'>
<p class = "custom">Here is some help text to give details on what this dashboard is showing</p>
<p class = "custom">And another paragraph with some more information</p>
</div>
</div>
</body>
</html>
As you can imagine using some more complex css means you can make this look even better and make it match any company branding guidelines for your client.
No comments:
Post a Comment