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:

VIDEO

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

VIDEO

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.
image2
  • Now, add a text box and an arrow image in the first section. We will use these as a section selector.
image1-1
  • Run the dashboard in presentation mode and get the “K” attribute value of the body section and text box div.
image3
  • 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

<script>
var script = document.createElement(‘script’);
script.src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.js”;
script.type = ‘text/javascript’;
document.getElementsByTagName(‘head’)[0].appendChild(script);
setTimeout(function(){
$(document).ready(function(){
$(“div[K~=’W2529′]”).click(function(){
if($(“div[K~=’F2527′]”).css(“height”)==’78px’)
{
$(“div[K~=’F2527′]”).hide();
$(“div[K~=’W2563′]”).hide();
$(“div[K~=’W2548′]”).show();
}
else
{
$(“div[K~=’F2527′]”).show();
$(“div[K~=’W2548′]”).hide();
$(“div[K~=’W2563′]”).show();
}
});
});
$(“div[K~=’F2527′]”).css(“height”, ‘0px’);
$(“div[K~=’W2563′]”).hide();
},500);
</script>

  • 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