Blog Back ArrowMicroStrategy 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:

Section as a Slide information(With Sound) (1)

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

Horizontal Expanding Collapsing(With Sound) (1)

 

FREE MicroStrategy 2019 Upgrade Assessment

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

New call-to-action

  • Linkedin
  • Twitter
  • Facebook