Develop a Custom Visualization

Once you have initialized your visualization, you can start developing it.

1. In your text editor, open config.js for visualization you just initialized.

2. Locate the line that starts with path_of_plugins and enter the path where your MicroStrategy plugins are located. The plugin folder can be on the Web server or where Workstation is installed in one of the locations mentioned below, assuming it is your default install location. Use either a relative or absolute path.

   Use the one of the following paths, assuming it is your default install location:

   • Mac Workstation:

     /Applications/MicroStrategy Workstation.app/Contents/Frameworks/OneTierDashboardWindow.framework/Resources/code/plugins

   • Windows Workstation:

     C:/Program Files/MicroStrategy/Code/plugins

   • Web server:

     ASP Web: <Installation Path>/Web ASPx/plugins

     JSP Web on Tomcat: <Tomcat Installation Path>/webapps/MicroStrategy/plugins

   Copy

   module.exports = {
     // ####################################################
     // THE NAME OF PLUGIN DIRECTORY, CLASS, NAMESPACE,
     // PLEASE DO NOT CHANGE THIS FIELD!!!
     plugin_name: 'MyVizName',
     // ####################################################
   
     // the dir path of MicroStrategy plugins, relative or absolute path are both valid
     path_of_plugins: 'C:/Program Files/MicroStrategy/Code/plugins',

3. Go back to the command line and navigate to the MyVizName folder you created earlier.

4. Run the npm run start command to build a simple demo visualization that you can modify. This command starts the dev service and builds the demo visualization in the plugins folder.

   Copy

   C:\Custom_Viz\MyVizName>npm run start
   
   > myvizname@1.0.0 start C:\Custom_Viz\MyVizName
   > mstr-viz-build development
   
   
   webpack is watching the files…
   
   Hash: 36b3ca829e9b4ccd8bbb
   Version: webpack 4.40.2
   Time: 4241ms
   Built at: 09/18/2019 3:20:18 PM
                                               Asset       Size                Chunks             Chunk Names
              javascript/mojo/js/source/MyVizName.js   2.32 MiB             MyVizName  [emitted]  MyVizName
     javascript/mojo/js/source/MyVizNameDropZones.js   8.61 KiB    MyVizNameDropZones  [emitted]  MyVizNameDropZones
   javascript/mojo/js/source/MyVizNameEditorModel.js   10.7 KiB  MyVizNameEditorModel  [emitted]  MyVizNameEditorModel
                                    style/global.css  655 bytes             MyVizName  [emitted]  MyVizName
   style/images/a1ae0d62f3e47ae0cc1aa22b839584ba.svg   6.18 KiB                        [emitted]
   Entrypoint MyVizName = style/global.css javascript/mojo/js/source/MyVizName.js
   Entrypoint MyVizNameDropZones = javascript/mojo/js/source/MyVizNameDropZones.js
   Entrypoint MyVizNameEditorModel = javascript/mojo/js/source/MyVizNameEditorModel.js
   [./src/MyVizName.js] 4.9 KiB {MyVizName} [built]
   [./src/MyVizNameDropZones.js] 1.69 KiB {MyVizNameDropZones} [built]
   [./src/MyVizNameEditorModel.js] 2.37 KiB {MyVizNameEditorModel} [built]
   [./src/vis.scss] 39 bytes {MyVizName} [built]
       + 521 hidden modules
   Child mini-css-extract-plugin ../mstr-viz/node_modules/css-loader/dist/cjs.js!../mstr-viz/node_modules/sass-loader/dist/cjs.js!../mstr-viz/src/build/loaders/icon-loader.js??ref--6-0!src/vis.scss:
       Entrypoint mini-css-extract-plugin = *
       [../mstr-viz/node_modules/css-loader/dist/cjs.js!../mstr-viz/node_modules/sass-loader/dist/cjs.js!../mstr-viz/src/build/loaders/icon-loader.js?!./src/vis.scss] ../mstr-viz/node_modules/css-loader/dist/cjs.js!../mstr-viz/node_modules/sass-loader/dist/cjs.js!../mstr-viz/src/build/loaders/icon-loader.js??ref--6-0!./src/vis.scss 952 bytes {mini-css-extract-plugin} [built]
       [./src/images/icon.svg] 63 bytes {mini-css-extract-plugin} [built]
           + 2 hidden modules

5. Restart your application server.

6. Open Desktop, Workstation, or MicroStrategy Web and locate your custom visualization in the Gallery.

7. Make code changes to your custom visualization as necessary. Since the dev service is still running, any changes you make in the source code are instantly re-built. To view the latest changes in Web, make sure to disable the cache in your browser. Then refresh your report, document, or dashboard to see the latest changes.