Version 2021

Place Visualization in Relevant Section of the Visualization Gallery

  1. Add properties to the <visualization> tag in plugins\MyCustomViz\WEB-INF\xml\config\visualizations.xml.

    Property Default Value

    Description

    categories "Custom" The section in which the visualization appears in the Gallery. This can be an array separated by commas. For example, Categories=”KPI,Custom” means the visualization appears in both the KPI and Custom sections. If this property is not set or is empty, the visualization appears in the Custom section by default.
    desc_id Empty string("")

    The ID of the visualization description string defined in the i18n message bundle.

    Example: desc_id=”MyCustomViz.9”

    summary_id Empty string("")

    The ID of the visualization summary string defined in he i18n message bundle.

    Example: summary _id=”MyCustomViz.10”

    use_case_id

    Empty string("")

    The ID of the visualization use case string defined in the i18n message bundle.

    Example: use_case_id =”MyCustomViz.11”

    requirements_id Empty string("")

    The ID of the visualization requirements string defined in the i18n message bundle.

    Example: requirements_id ="MyCustomViz.12”

    summary

    Empty string("")

    The default value of the visualization summary string which is overwritten by the i18n string fetched by "summary_id" if "summary_id" is set.

    use_case Empty string("") The default value of the visualization use case (example) string which is overwritten by the i18n string fetched by "use_case_id" if "use_case_id" is set.
    requirements Empty string("") The default value of the visualization requirements string which is overwritten by the i18n string fetched by "requirements_id" if "requirements_id" is set.

  2. The use-react-config option can be used to initialize a visualization with the new React-Based Format Panel that was introduced in MicroStrategy 2021 Update 3.

    MicroStrategy Version Option

    Description

    Prior to Custom Visualization Tool version 2.2.0 mstr-viz init MyCustomViz Initializes the visualization with the older Format panel style by default.
    Custom Visualization Tool version 2.2.3 and newer mstr-viz init MyCustomViz --use-react-config=true Initializes the visualization with the React-based Format panel.
    mstr-viz init MyCustomViz --use-react-config=false Initializes the visualization with the older Format panel style.
    mstr-viz init MyCustomViz Initializes the visualization with the React-based Format panel by default.

  3. If you set --use-react-config=true, you can add the following extra properties to the <visualization> tag in plugins\MyCustomViz\WEB-INF\xml\config\visualizations.xml.

    Property Default Value

    Description

    use_react_config

    true

    Determines whether the React-based Format panel is enabled.

    When using --use-react-config=false or --use-react-config=true, you can also use the npm run build command to build the custom visualization.

    The --use-react-config=true option automatically does the preparation work with SampleViz.zip.

  4. If you set --use-react-config=true, a "format_panel_build_entry" appears in the MyCustomViz/config.js config file. This entry is for building the new Format panel. Its default value is "./formatPanelConfig/config.js". This means you must use MyCustomViz/ formatPanelConfig/config.js as the entry file to build the new Format panel. See React-Based Format Panel for more information.

Here is a code sample from a Gauge visualization to demonstrate the customization of this functionality.

Copy
<visualizations>
    <visualization-list name="ajax"
        show-in-web="true"
        view-mode="51">
        <visualization attribute-minimum="0"
            metric-minimum="1"
            categories="KPI"
            desc="Gauge"
            desc-id="Gauge.67"
            drop-zones="plugins.Gauge.GaugeDropZones"
            editor-model="plugins.Gauge.GaugeEditorModel"
            is-mojo="true"
            scope="19"
            style-name="Gauge"
            widget-type="7"
            use-react-config="true"
            summary="Measure key indicators progress to particular target"
            summary-id="Gauge.68"
            requirements="Uses 0+ ##attributes### and 1+ #metrics###"
            requirements-id="Gauge.69"
            use-case="Example: Compare number of delayed flights versus number of all flights"
            use-case-id="Gauge.70" />
    </visualization-list>
</visualizations>