MicroStrategy How-To: Building Panels with Differing Heights in a Panel Stack

We’ll consider the following example of ranking countries based on GDP per capita.

In MicroStrategy, dashboard development makes heavy use of Panel Stacks. Generally Panel Stacks have a fixed height for all the underlying panels. Developers often come across a situation where extra blank space appears at the bottom of the dashboard panels when there is not enough content. Often to work around this issue, developers end up creating different dashboards.

Third I developers came up with a way to get past this limitation in MicroStrategy, using custom HTML & JQuery code. For example, a text box can behave like a panel selector and the body sections as the panels of the panel stack.

Our Approach

Consider a scenario where we want to have 3 panels and each panel has differing amounts of information, which means we need to have custom heights for each panel.

  1. To handle this scenario, we will create 4 sections where the first section is used for common/global objects and we’ll use 3 text boxes which will toggle body sections, which, in turn, are used as 3 panels where different visualizations exist.
  2. After this, we kept the height of the last 3 body sections as 1 inch. This is so each section’s div element is created when running in the presentation mode. Next, we make the changes in the body section properties as shown in the below image.

  3. Now, run the dashboard in presentation mode and get the last 3 body sections’ “K” attribute value of div by inspecting it, as the “K” value will not change for objects included in the dashboard.

  4. Get the text box’s “K” value by inspecting it.

  5. Include HTML Container in the  1st body section and insert the code below (which can be further altered to enhance animation).

    Note: Below Sample Code is without animation

    var script = document.createElement(‘script’);
    script.type = ‘text/javascript’;
    $(document).ready(function(){ $(“div[K~=’K8′]”).css(“height”, ‘140px’); // by default 1st body section should display with this height. $(“div[K~=’W2666′]”).click(function(){  //click event on first text box$(“div[K~=’K8′]”).css(“height”, ‘140px’);
    $(“div[K~=’F1410′]”).css(“height”, ‘0px’);
    $(“div[K~=’F1411′]”).css(“height”, ‘0px’); });$(“div[K~=’W2667′]”).click(function(){  //click event on second text box$(“div[K~=’K8′]”).css(“height”, ‘0px’);
    $(“div[K~=’F1410′]”).css(“height”, ‘110px’);
    $(“div[K~=’F1411′]”).css(“height”, ‘0px’);}); $(“div[K~=’W2668′]”).click(function(){  //click event on third text box$(“div[K~=’K8′]”).css(“height”, ‘0px’);
    $(“div[K~=’F1410′]”).css(“height”, ‘0px’);
    $(“div[K~=’F1411′]”).css(“height”, ’90px’); }); });
  6. Run the dashboard in presentation mode to see your panels of different heights.

1st Screen: Notice the scroll bar. Here is a section with a tall height.

2nd Screen: Shorter height.

And 3rd Screen: Different height: