Hide/Show Elements on a Dashboard

Here’s some more fun that we can have using HTML Containers.  Say that you want to add just a little bit more dynamic flair to your Dashboard, such as hiding and showing different objects into view.  Using an HTML Container and some simple JavaScript, we can accomplish that pretty easily.  Although I don’t have it working quite perfectly, perhaps the more JavaScript savvy among you wouldn’t mind lending your abilities to this code to get it to work a little bit better.

Update: Better Method

Step 1 – Get the Object Handle
This part is a little tricky, but pretty straight forward.  What we need to do is find the handle of the object that we want to hide on this page.  You can find this by viewing source on the page, but it’s a lot easier to use tools like Firebug or Google Chrome’s built in Inspect Element feature.

I used Google Chrome’s Inspect Element feature:

  1. Run your Dashboard like normal in Interactive mode, then right click on an empty space and choose Inspect Element. (If you’re getting a MicroStrategy menu, then right click somewhere else until you get Chrome’s menu).
  2. Make sure the Elements tab is selected in the bottom viewer area, and as you hover on lines in the code, it’ll highlight the corresponding section on the page above.  You’ll have to dig through lots of layers, but just keep expanding the sections when the whole page is highlighted.  Eventually you’ll come to the line that highlights just the object you want, in this case, a Grid.  Note the ID of the object, in this case, W47.

Step 2 – Add an HTML Container

Now that we have the ID, we can add the JavaScript in an HTML Container.  Simply add one to your Dashboard with the following code:

<a href="javascript:getElementById('W47').style.display='none';">hide</a><br/><a href="javascript:getElementById('W47').style.display='';">show</a>

There are two types of hiding in HTML: Visibility and Display.  The difference is what the surrounding HTML on the screen does in reaction to the hidden object.  For more information, you can consult this great tutorial: http://www.hiteshagrawal.com/javascript/showhide-html-elements-using-javascript

Finished

Here’s a short demo video of it in action.
Limitations
I’m not a JavaScript expert, so if anyone has ways to improve on this simple idea, I’d love to see them.  I toyed with it for a while, but was never able to get everything to work.
Default to Hidden – I couldn’t find a way to get the object to start out hidden on the page.  Using the Visible property in MicroStrategy renders it hidden by default, but then the JavaScript can’t get it back.  Any attempts I made to add an onLoad() function in an HTML Container didn’t work either.  I suspect in most practical uses, you’ll want the object hidden first and then show it later (like maybe implementing help popups or something).
Collapse the Page – Unfortunately, even when the Display property is used, the page still does not collapse around the hidden object.  You just end up with a big blank space where the object used to be.  I suspect this is because MicroStrategy is using absolute positioning for a Dashboard.  Perhaps a more complex script could rearrange the items on the screen, but that’s probably too messy for real usage.

You may also like...