BOBJ TOOLS: Disappearing Dashboard Panels

Disappearing Dashboard Panels

With only a certain amount of pixels at your disposal, it can be tricky to fit all the information you wish to display on your Xcelsius dashboard. This post shows a simple way to create a panel that is available to users when they want it, but can be hidden away when don’t.
I’m Using

Xcelsius 2008 SP5 (but the logic is the same across any recent version)

I’m Assuming

That you’re familiar with the general concepts of Xcelsius

Also, see the sister post, Disappearing Dashboard Menus.

This post is, I’m afraid, quite basic. I’m using the standard trick of push buttons and dynamic visibility to hide/show various components on the page. If you’re familiar with the technique you scan skip straight to step 9. But enough apologies, let’s get started…

Props

This dashboard was created during my first project using Centigon Solutions’ GMaps plugin. I’m amazed that I got anything done because I was so excited at the coolness of maps in dashboards, and how painless this plug-in is to use (nope, they’re not paying me a cent!).

The End Result

With the panel hidden:

With the panel shown:

The Panel

The ‘panel’ in this case is a collection of components in a container component. The container therefore is the only component that needs to be made visible/not visible. I’ll assume that you have some sort of background already created. In my case, this is a map.

Add a Container component to your canvas.
With more complex models, it helps to name your components by clicking the component in the object explorer, then clicking again.
Add some components to the container. Remember, it is the contents of this container that will show/hide. For testing I’ll keep it simple and just add a text box.
Add two push button components to your canvas. Put them both outside the container. You should now have something that looks like this:
Name the buttons ‘Open’ and ‘Close’ or something similar.
In the Excel model, add a set of four cells that looks like this:
One of the push buttons will take A3 and put it in A2. The other push button will take A4 and put it in A2. Really what you’re doing is changing the state of the A2 cell from ‘Open’ to ‘Close’ with the push buttons. So, go on, bind the push buttons to the spreadsheet accordingly.
Now I need to tell the container that if cell A2 says ‘Open’ then it should show, otherwise it shouldn’t. You do this by setting the Dynamic Visibility property of the container.
Preview the model and test it. The buttons should hide and show the container.

That’s the mechanics of it done. Now let’s make it pretty. Firstly, I don’t want a big button saying open. I’ve assessed that my users will be frequent users and so I can afford to be a little bit obscure and just use a small tab with an arrow.
But I don’t replace my push button, I change the shape of it and change the label from ‘Open the Panel’ to simply ‘<’.
Move the button to the very right side of the canvas.
Now take the close button, reshape it and rename it to simply ‘>’.
Put this button inside the canvas. You don’t need your users to ever close the panel unless it’s showing, right?
Re-order your objects so that the canvas is in front of the open button. This way the button will be hidden when the panel is open (a user will never need to open the panel if it’s already open, right?). The order should look something like this:

It’s a bit hard to make out in a screenshot, but this is my panel; everything you see here is inside the container. Note the close button ('>) that pokes out from the left of the rectangle.

With the background showing, this is how it all looks. Spend some time lining everything up nicely so that it really does look like a side panel appearing.
If you’re a bit of a show-off, you can add a little drop-shadow to the panel. This is a rectangle component with a linear gradient.