KB438581: How to Add a Toolbar Item in Visual Insight Dashboards Using the MicroStrategy Web SDK 10.5

The following steps will add a toolbar item in Strategy Visual Insight Dashboards using the Strategy Web SDK 10.5.
Before Customization:

After Customization:

1. Launch the Web Customization Editor.
2. Create a new plugin and give it a meaningful name, such as addButtonToVI, and click OK.
3. Exit the Web Customization Editor.
4. Navigate to the Strategy Web installation.
5. Copy the HTML5VI_Content_Core.jsp file from the ..\MicroStrategy\jsp\ directory and paste it into the ..\MicroStrategy\plugins\ addButtonToVI\jsp folder.
6. Edit the HTML5VI_Content_Core.jsp file with any text editor.  After the following line of code:

<web:resource type="javascript" name="mojo/js/source/config/vi/viWelcomeData.js"/>

<!-- Load customized JavaScript file under JavaScript folder-->        
<script type="text/JavaScript">        
    mstrmojo.vi.controllers.DocumentController.prototype.customCommand = function customCommand() {        
        // Invoke the function defined in the customized JavaScript file        
        console.log("button has been pressed");        
    };        
</script>

1. Save your changes.
2. Save the icon image for the custom button in the following directory: \MicroStrategy\plugins\ addButtonToVI\style\images
3. Create the following directory: ..\MicroStrategy\plugins\ addButtonToVI \WEB-INF\xml\blocks\mojo.  
4. Create a file called MojoToolbarModel.xml and save it to this folder.  
5. Edit the MojoToolbarModel.xml file. Add the following code to this file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE block SYSTEM "blockLibrary.dtd">
<block name="MojoToolbarModel">
  <assignments>
    <property name="items">
      <list>
        <block listElementKey="K14" name="MojoToolbarButtonModel">
                    <property name="n">SampleButton</property>
                    <property name="desc">{desc:mstrWeb.3482|Undo}</property>
                    <property name="cmd">customCommand</property>
                    <property name="pm">1</property>
          </block>
      </list>
    </property>
  </assignments>
</block>

• listElementKey should not reuse/exist in the original set of listElementKey's used in the original ..\MicroStrategy\WEB-INF\xml\blocks\mojo\MojoToolbarModel.xml file.  As of Strategy Web 10.5, the listElementKey ranges from K1 - K13
• Also note that listElementKey css dictates whether the button appears on the left or right side of the toolbar
• n represents the name of the button
• desc represents the text that will display when a user hovers over the button
• cmd represents the action that will occur when the button is pressed
• pm dicatates presentation mode definition where:

<!-- pm: 
0 - Do not show in presentation mode
1 - Show in presentation mode
2 - Show ONLY in presentation mode
undefined - Do not show in presentation mode
-->

1. If the Web Customization Editor is closed, launch it again and access your plug-in.
2. Click on the Strategy Web Configuration inside the Application Settings view to expand the hierarchical tree. The expanded list comprises the different settings that can be modified to perform customizations.
3. Click on Pages to expand the list of pages used in Strategy Web.
4. Double-click the Html5Vi(HTML5 VI Page) page to open the page editor.
5. Click the Template Properties tab.
6. On the Default tab, right click the “content” section and select “Choose a new file”
7. Navigate to ..\MicroStrategy\plugins\ addButtonToVI\jsp to select the HTML5VI_Content_Core.jsp file
8. Save your changes. 
9. Navigate to Pages > Html5Vi(HTML5 VI Page) > CSS > Strategy Web and right-click on mstr.css.  Select “New Selector”.
10. Add “.mstrmojo-RootView-toolbar .mstrmojo-VIToolbar .SampleButton .icn” as the selector name.  Note that "SampleButton" is the name of the button defined in the MojoToolbarModel.xml file. 
11. Change radio button from “This Page” to “All Pages”.  Click OK.
12. Navigate to Global CSS > Customizations > global.css and right click on  “.mstrmojo-RootView-toolbar .mstrmojo-VIToolbar .SampleButton .icn” selector.  Select “New Property”.  
13. Add the following property/value pairs for the “.mstrmojo-RootView-toolbar .mstrmojo-VIToolbar .SampleButton .icn” selector:   

    background: transparent url(./images/mstr.gif) 0 0 no-repeat;
    background-origin: content-box;
    height: 32px;
    width: 16px;
    display: inline-block;
    float: left;
    padding: 12px 12px 0;

1. Restart the Web Server to see the customization.

The example provided in this document is provided “as-is” and user has read the following customization warning:
ADDITIONAL INFORMATION:
The Strategy SDK allows you to customize several Strategy products and extend and integrate the Strategy business intelligence functionality into other applications. However, before changing the way Strategy products look or behave, it is helpful to understand how the application is built. For more information regarding the Strategy products or the process of customizing Strategy products, please refer to Strategy Developer Zone (https://developer.microstrategy.com).
To access the Strategy Developer Zone, you must have access to the Strategy Knowledge Base, you must have purchased the Strategy SDK, and you must be current on your Strategy maintenance agreement. If you are a US-based business and believe that you satisfy all three of these conditions but you do not have access to the Strategy Developer Zone, please contact Strategy Technical Support at support@microstrategy.com or at (703) 848-8700. If you are an international business, please contact Strategy Technical Support at the appropriate email address or phone number found at https://www.microstrategy.com/us/services/support/contact.
CUSTOMIZATION WARNING:
This customization is provided as a convenience to Strategy users and is only directly applicable to the version stated. While this code may apply to other releases directly, Strategy Technical Support makes no guarantees that the code provided will apply to any future or previous builds. In the event of a code change in future builds, Strategy Technical Support makes no guarantee that an updated version of this particular customization will be provided. In the event of a code change in future builds, Strategy may not be able to provide additional code on this matter even though this customization is provided at this time for this specific build. For enhancements to this customization or to incorporate similar functionality into other versions, contact your Account Executive to inquire about Strategy Consulting assistance. KB438581