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.

<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>