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.
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.
- 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’);
- Once you have followed all the above steps, you’ll get the following result:
Vertical, with a notification section:
Horizontal, with a navigation menu: