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.