Build interactive widgets using custom JavaScript libraries

January 17, 2015

 

Ever since MicroStrategy introduced “Flash View” mode in their dashboards, it has been a very popular choice for developers looking to introduce interactivity in their dashboards. MicroStrategy also introduced the Visualization SDK along with Flex development tools to create custom Flash widgets.

However in recent years, Flash as a technology is being slowly phased out. This means that most companies that have invested in building solutions using Flex will eventually have to think about moving to DHTML-based solutions.

Early adopters beware - There are some advantages with Flash that users might miss if they make the transition to DHTML. In my opinion the biggest would be the ability to work offline. Flash dashboards allow us to export the whole dashboard as an MHTML file or a more platform agnostic Flash-embedded PDF file. These files essentially act as self-contained dashboards that can work on a client machine. The size of the file will be dependent on the amount of data being brought back along with the number of controls and panels used to create the dashboard. These Flash-embedded PDF files have been popular with users over the years.

Additionally, if you’re in the process of transitioning to dashboards in DHTML mode, you do have the option of building DHTML widgets using a new visualization framework. In almost all cases, custom DHTML-based widgets will be using AJAX controls that leverage third-party JavaScript visualization libraries such as Highcharts, D3, and JQPlot etc.

For our custom DHTML widgets, we have been using the new Mojo Framework. Building widgets using this framework allows us to target out-of-the-box (OOTB) controls and datasets just as we would with OOTB widgets.

I’ll be adding more implementation details and videos in future posts but for now I’ll provide a high-level overview of this approach.

 

Mojo Visualization Framework

 

A traditional way of building such widgets in MicroStrategy Web involved building a custom page to create the visualization and then rendering the dashboard in an iFrame. This approach presented a few challenges related to targeting the widget with OOTB controls. To overcome these challenges, MicroStrategy suggests a newer approach: loading custom JavaScript libraries (and CSS) at run-time and rendering visualizations inside a DIV element. It also allows us to slice-and-dice the data for the widget by targeting it via out-of-the-box MicroStrategy controls such as dropdown selectors, checkboxes and so on.

The new approach requires us to create two styles:

  • The first style would be required while registering the widget. This style would simply point to an out-of-the-box transform and layout. In the dashboard editor mode, when the user right-clicks on a data grid and applies the custom widget, this style is invoked which kicks off the underlying Java class. This class should contain at a minimum four formal parameters. Two parameters that define the height and width of the widget, one that defines the JavaScript file that renders the client-side code of the widget and another one that points to a second style that renders the grid data in the format that we need.

  • The second style mentioned in the bullet point above is responsible for retrieving the data from the data grid in the format that we would require (JSON or XML). We could use an existing MicroStrategy style for this but that would require us to re-format the data on the client-side. Ideally we should manage to retrieve the data from the server in the format that our JavaScript control expects so as to minimize any formatting of large amounts of data on the client.

While registering a widget, we need to specify a name for the widget and a style pointing to a Java class that will be invoked when the widget is chosen. This is the style mentioned in the first bullet-point above.

 

Once the widget is registered, it will show up in the list of widgets in the widget menu. In the screenshot below, we have registered a widget called JQPlot Bar Chart.

 

As shown above, the widget is registered as a style that points to an OOTB transform (ReportAjaxMojoVisualizationTransform). This Java class contains formal parameters that will be used to render the widget. The formal parameters are as follows:

  • containerHeight: Corresponds to the height of the widget

  • containerWidth: Corresponds to the width of the widget

  • mojoClassName: Points to the JavaScript file in your plugin. This JavaScript file will be stored in the following folder --

/javascript/mojo/js/source.

 

In the above example the JavaScript file name will be JQPlotBarChart.js.

  • eportXMLStyle: This parameter points to a style that will retrieve data in a custom JSON format. In the above example, we have created a style called CustomMojoVisualizationDataStyle that points to a custom transform. This custom Java class will contain all the logic to retrieve data from the grid that the widget points to and render it in the format that we require. As a good practice, the transform should contain a formal parameter called contentType. The content type can be either JSON or XML (or some other structure). Thus we can just use one transform to render data in many different styles.

As we can see, the mojo visualization approach is a much more elegant way to develop custom DHTML widgets. It also allows us to maintain interactivity with OOTB components of the dashboard.

 

For a MicroStrategy dashboard developer, a well-designed solution would make the custom widget virtually indistinguishable from an OOTB widget. The developer would simply right-click on a report grid and apply the custom widget to render it. In addition to this, the developer would also be able to set attributes on the grid as selectors and target other objects on the dashboard. This functionality would work seamlessly on the widget as well. For the example below, I have used JQPlot, which is an open-source plotting and charting plugin for the jQuery JavaScript framework. This particular example can be found here: http://www.jqplot.com/tests/rotated-tick-labels.php

 

As we can see, the chart is rendered on a MicroStrategy grid with Tutorial data.

Please reload

Contact us!

If you are interested in learning more about Third I, please fill out the form below and we'll have one of our specialists contact you directly.

 

FOLLOW US

  • Facebook
  • LinkedIn
  • Twitter
  • YouTube

VISIT US

CONTACT US

info@the3i.com
(703) 272 8209

PRIVACY POLICY     |     Copyright ©  2018 Third I, Inc. All rights reserved.