MicroStrategy ONE

Create a Plug-In

In addition to creating a plug-in using the Custom Visualization Tool, you can also create a plug-in in the following ways:

The Custom Visualization Tool is replacing Visualization Builder in the MicroStrategy 2021 release. Take a look at some of its exciting new features and try it out! Visualization Builder can still be used in the 2019 and 2020 releases, but is no longer supported in version 2021 and up.

Once you have created a plug-in, you can use the visualization in MicroStrategy Library, Web, or Desktop. Simply copy the plug-in folder to the appropriate location on a Windows or Mac machine.

Create a Plug-In from Scratch

Creating a visualization plug-in takes only a few steps.

  1. Create a folder for your plug-in and give it a meaningful name. Save it under the plugins folder in your MicroStrategy Web installation directory.

  2. Create a JavaScript file and save it under javascript/mojo/js/source in the plug-in folder you just created. In this file, you add the code to render the visualization. It uses the MicroStrategy JavaScript framework, as well as any other frameworks needed to render the visualization. See Learn from Sample Code for sample code and instructions to help you create your JavaScript file.

  3. Create a visualizations.xml configuration file and save it under WEB-IN/xml/config in the plug-in folder you just created. In this file, you define the visualization so that it is added to the visualization gallery for use in a dashboard or document.

  4. Create a styleCatalog.xml configuration file and save it under WEB-IN/xml in the plug-in folder you just created. In this file, you define the style to render the HTML code for the visualization and any styles needed for optional actions.

Create a Plug-In from a Template

To simplify the process of creating a visualization plug-in, a template plug-in, called MstrVisTemplate, has been provided. It has the predefined structure of a visualization plug-in, and includes the basic files required to render a simple visualization and skeleton JavaScript code. The detailed instructions and code samples in Learn from Sample Code walk you through the process of adding the actual JavaScript code to render the visualization and making the required configuration settings.

Filename Location  

MstrVisTemplate.js

javascript/mojo/js/source

JavaScript code responsible for rendering the visualization

global.css

style

CSS file with style rules applied to visualization

Html5ViPage.css

style

CSS file with rules for setting the custom icon on the visualization gallery for dashboards

visualizations.xml

WEB-INF/xml/config

XML configuration file containing the definition of the visualization so that it appears on the list of available visualizations

styleCatalog.xml

WEB-INF/xml

XML configuration file containing the definition of the style responsible for rendering the visualization