Previously, we published a video showing how easy it is to add new custom D3 Visualizations to MicroStrategy 10 in less than a minute. After creating a D3 visualization, you may find that users want to format the widget. Instead of making code changes for each dashboard, you can add properties to the visualization that make it customizable. To do this, you will need an already completed D3 visualization. For my example, I will be using a Scatter Plot d3 visualization that was created for a client. Based on the data they had per dashboard, they wanted to format their axes, add a legend, and/or change the size of their data points.
1. To begin, you will want to make a layout file that represents the options to add. Save this file in /plugins//WEB-INF/xml/layouts.
2. Next, you will need add this layout file to the styleCatalog.xml (located in /plugins//WEB-INF/xml). Give the style unique name, but keep the transform listed below:
3. Next, add a ‘propsEditor’ declaration in the visualizations.xml file (located in /plugins//WEB-INF/xml/config). Here, you add the style you previously created:
4. We have to edit the transform Java class that the widget uses to return report data. This was listed in the styleCatalog.xml file. In my example, it is called ScatterPlotWidgetDataTransform. We will make two changes to this class, add a line to the render method, and add the setMojoVisProps method to create the Properties Editor:
6. After making all these changes, you will need to restart your web server. To view the properties, open a document that contains your widget in Design Mode. Right-click on the widget, choose ‘Properties and Formatting…’. Click the ‘Widget’ option in the left pane. Click the ‘Widget Properties’ button.
7. You should have something that looks like this, showing the custom properties you created for your specific visualization.
Latest posts by Rebecca Vogt (see all)
- Customizing Mobile Authentication with the MicroStrategy iOS SDK - June 15, 2017
- Adding Custom Properties to D3 Visualizations in MicroStrategy 10 - October 13, 2015