Blog Back ArrowMicroStrategy How to: Use an Image as a Panel Selector in a Dashboard

A feature requested often by our clients is to use images as selectors in a web dashboard. At first glance this is a trivial and easily customizable request and should be a resource-light but high-impact UI design. But out of the box, MicroStrategy allows the customization of only text links or buttons that link to panels in a panel stack.

Fear not, we have a workaround. Read on.

Approach


  • Create two Panel Stacks: Grid View and Graph View.
  • Insert two images in the dashboard: your grid view image and graph view image.
  • Now, these two images will link to the two selected panel stacks respectively, as shown in the image below.

  • Go to the Properties and Formatting window and make both the panel stacks content overflow “Clip” and bring the grid_view panel stack on top, causing it to display first by default on dashboard load.
  • Run the dashboard on presentation mode and take the “K” attribute value of each panel stack and images of their respective div. Refer to the screenshot below.

  • Now, insert HTML Container and change the code with your “K” value and paste the code in HTML Container.

    Note: This sample code is without animation

    <script>
    var script = document.createElement('script');
    script.src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js";
    script.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(script);

    setTimeout(function(){

       $("div[K~='K46']").hide(); // by default graph view will be hidden

        $("div[K~='W519']").click(function(){  // on click grid image event
        $("div[K~='K46']").hide();      //on click hide graph view
        $("div[K~='W487']").show();   // show grid panel stack
        });

         $("div[K~='W520']").click(function(){    // on click graph image event
        $("div[K~='W487']").hide();     //on click hide grid view
        $("div[K~='K46']").show();     // show graph panel stack
        });

    }, 500);

    </script>

  • Now, run the dashboard in presentation mode. You can see that the two images will act as panel selectors as shown below.
  • Linkedin
  • Twitter
  • Facebook