MicroStrategy 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.


  • 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

    var script = document.createElement(‘script’);
    script.type = ‘text/javascript’;


       $(“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);
  • Now, run the dashboard in presentation mode. You can see that the two images will act as panel selectors.