MicroStrategy How-To: Creating Collapsible Sections in a Dashboard

Real estate in information-dense dashboards is always scarce. Dashboard designers have to get creative in packing large amounts of information on a single page, especially when scrolling is undesirable. Often they resort to creating hypercards, pop-ups, information windows, or links to other dashboards with more detail. Our client challenged us to create collapsible/accordion type sections such that contextual information could be shown or hidden via a click.

Since MicroStrategy does not have a native feature to create a collapsible section, we achieved this by tinkering with body sections and some neat jQuery code.

Collapse 1
Collapse 2

Here’s how to create a vertical collapsible section:


The same steps can be followed to create a horizontal collapsible section:


How did we do it?

  • Create three body sections:
  • First section will be used as the section selector,
  • Second section is where we will put the items that will appear in the “collapsible” section when the button is clicked
  • Third section can be used to display any other information needed.
  • Go to the Properties and Formatting window and make the second section’s height “0” as shown in the below image.
  • Now, add a text box and an arrow image in the first section. We will use these as a section selector.
  • Run the dashboard in presentation mode and get the “K” attribute value of the body section and text box div.
  • Now, insert an HTML container in the first section and use the below code with your “K” value of div:
    Note: Below Sample Code is without animation

var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
$(“div[K~=’F2527′]”).css(“height”, ‘0px’);

  • Once you have followed all the above steps, you’ll get the following result:

Vertical, with a notification section:

Collapse 1

Horizontal, with a navigation menu:

Collapse 2