MicroStrategy ONE

Specify an Icon for the Visualization in the Gallery

In MicroStrategy Web, Workstation, and Desktop, there is a pane with a list of icons, called the Gallery, on the right side of the screen. Each built-in visualization has its own distinctive icon. When you create a custom visualization, you can add a custom icon for your visualization. The recommended size for the icon is 28 x 28 pixels.

.

To add an icon for a custom visualization, you need to save the visualization icon file and add the code needed to make the icon appear in the visualization Gallery and in the document insert menu.

In the code snippets below, make sure to replace the visualization name with the actual one.

Add an Icon for the Gallery

  1. Create a file called Html5ViPage.css if it does not exist and add code similar to what is shown below:

    Copy 
    .mstrmojo-VIGallery .mstrmojo-VIGalleryList .item.ic-ParaCoorDataProcessingStyle > div > div {
        background-image: url("../style/images/icon.png");
        background-position: 0 0;
    }

    In this code sample, the visualization name is ParaCoorDataProcessing. You replace this name with the name of the actual visualization.

  2. Save the file under the style folder in your plug-in, as style/Html5ViPage.css.
  3. Under style/images in the plug-in, save the visualization icon as icon.png.

The Custom Visualization Tool is replacing Visualization Builder in the MicroStrategy 2021 release. Visualization Builder can still be used in the 2019 and 2020 releases, but is no longer supported in version 2021 and up.

Add an Icon for the Document Insert Menu

  1. Create a file called global.css if it does not exist and add code similar to what is shown below:

    Copy 
    #RwMenuModel_WEB-INFxmllayoutsblocksInsertDHTMLWidgetMenuLayoutxml #mnuInsertWgD3BubbleChart {
      background: url("images/defaultimage_RWD.png") 4px center no-repeat scroll;
      padding: 3px 0pt 3px 14px;
    }
    #RwMenuModelEditor_WEB-INFxmllayoutsblocksInsertDHTMLWidgetMenuEditorLayoutxml #mnuInsertWgD3BubbleChart {
      background: url("images/defaultimage_RWD.png") 4px center no-repeat scroll;
      padding: 3px 0pt 3px 14px;
      padding: 3px 0pt 3px 14px;
    }

    In this code sample, the visualization name is D3BubbleChart; it is highlighted. You replace this name with the name of the actual visualization.

  2. Save the file under the style folder in your plug-in, as style/global.css.
  3. Under style/images in the plug-in, save the visualization icon as defaultImage_RWD.png.