Saturday 9 August 2014

Disappearing Dashboard Menus

Disappearing Dashboard Menus


When creating dashboards, screen real estate is a constant concern. You want to provide a simple, beautiful dashboard, but you also want to allow your users to slice and dice the data. In this post, I’ll show a simple technique for bringing extra content to a page without losing precious screen real estate.

I’m Using
  • Dashboard (formerly Xcelsius) 2011 SP4 (BI4.0 SP4)
I’m Assuming
  • That you’re familiar with Dashboards

Also, see the sister post Disappearing Dashboard Panels.

Here’s my dashboard

image

Note the small tab to the right of “Global Expenses”. If I hover the mouse of this, I’ll see a dropdown menu that shows a selection of regions and countries.
image

Selecting a country will change the heading for the dials.
image

This is really very simple. I’ve used a label based menu that’s moved mostly off of the screen, and a container to contain it. The ‘tab’ that you see is the the left few pixels of the component. Here’s the steps:
  1. Add a Canvas Container component to your model.
    image
  2. Make sure that you set the scroll bars to off. Since you’re going to put a component in the container that goes outside the border of the container, you don’t want scroll bars showing up.
    image
  3. Now add a Label Based Menu component into the canvas container.
    image
  4. Note that if you place it near the edge of the container, it will ‘disappear’ where it goes outside the border.
    image
  5. On the General tab of the properties, change the Orientation to vertical.
  6. Bind the menu to your data source and check that it is filtering the rest of the model as you want it to.
  7. On the Behaviour tab, un-tick the Always Expanded box.
  8. Set Expand On to Mouse Click or Mouse Over, I’m using Mouse Over.
  9. Set Expand Direction to Left Down.
    This means that by default, you won’t be able to see the list of available things to click on, until you hover over the component. When you do hover, the list of things to click on will appear to the left of the component, and expand down the page. If you were hiding the component off to the left, then you would set the expand direction to Right Down.
  10. Tick the box Open Animation if you’re into that type of thing.
  11. Save and run the model and check that the menu appears as you want it to.

    If you want it to be a bit more obvious to your users that there are more options hidden away, you can add an arrow to the component.
    image
  12. In the Title field for the label based menu, put a ‘<’ character.
    image
  13. Go to Appearance > Text and select the Title item and left justify the text.
    image

So… that’s it!

- See more at: http://blog.davidg.com.au/2012/10/disappearing-dashboard-menus.html#sthash.uGWpmohP.dpuf

No comments:

Post a Comment