KB439757: Best Practices to Create Custom Visualization to Work on Both Web and Mobile

The following are best practices when creating custom visualizations so that they work on both Strategy Web and Mobile

• When using the JavaScrip APIs, there is a high level version requirement for browsers. Mobile browsers will also need to be checked for support.
  
• Relative path should have the following format, starting from 10.10 mobile app: 
  

  {url: (mstrApp.getPluginsRoot && mstrApp.getPluginsRoot() || "../plugins/")+"<plugin name>/javascript/mojo/js/source/<library file name>.js"}

  
  
• Mobile bundle is a subset of the full web bundle which includes the APIs within the JavaScript files as below. They are the most common ones used to create a custom visualization. If there is a need to use other APIs, please submit a request and Strategy will review and support. 
  

  <jsBundle name="CustomVisBase" depSort="true" inherits="mojo-coreui" minify="true">

  
  

      <jsDir path="javascript/mojo/js/source">

  
  

        <jsFile name="CustomVisBase.js" />

  
  

        <jsFile name="VisUtility.js" />

  
  

        <jsFile name="array.js" />

  
  

        <jsFile name="DocPortlet.js" />

  
  

        <jsFile name="boxmodel.js" />

  
  

        <jsFile name="num.js" />

  
  

        <jsFile name="dom.js" />

  
  

        <jsFile name="hash.js" />

  
  

        <jsFile name="color.js" />

  
  

        <jsFile name="css.js" />

  
  

        <jsFile name="Box.js" />

  
  

        <jsFile name="string.js" />

  
  

        <jsFile name="func.js" />

  
  

        <jsFile name="VisEnum.js" />

  
  

        <jsFile name="VisMenuList.js" />

  
  

        <jsFile name="_HasMarkup.js" />

  
  

        <jsFile name="DocModel.js" />

  
  

      </jsDir>

  
  

      <jsDir path="javascript/mojo/js/source/Refine/">

  
  

        <jsFile name="DateTimeUtil.js" />

  
  

      </jsDir>

  
  

      <jsDir path="javascript/mojo/js/source/models/template">

  
  

        <jsFile name="DataInterface.js" />

  
  

      </jsDir>

  
  

      <jsDir path="javascript/mojo/js/source/vi/models/editors">

  
  

        <jsFile name="CustomVisEditorModel.js" />

  
  

      </jsDir>

  
  

      <jsDir path="javascript/mojo/js/source/vi/models">

  
  

        <jsFile name="CustomVisDropZones.js" />

  
  

      </jsDir>

  
  

      <jsDir path="javascript/mojo/js/source/ui">

  
  

        <jsFile name="_HasScroller.js" />

  
  

      </jsDir>

  
  

      <jsDir path="javascript/mojo/js/source/mstr">

  
  

        <jsFile name="EnumFunction.js" />

  
  

      </jsDir>

  
  

      <jsDir path="javascript/mojo/js/source/chart/model/enums">

  
  

        <jsFile name="EnumDSSObjectType.js" />

  
  

      </jsDir>

  
  

      <jsDir path="javascript/mojo/js/source/chart/enums">

  
  

        <jsFile name="EnumFontStyle.js" />

  
  

      </jsDir>

  
  

      <jsDir path="javascript/mojo/js/source/models">

  
  

        <jsFile name="FormatModel.js" />

  
  

      </jsDir>

  
  

      <jsDir path="javascript/mojo/js/source/vi/ui">

  
  

        <jsFile name="DatasetUnitMenuUtils.js" />

  
  

      </jsDir>

  
  

    </jsBundle>

  
  

  </jsBundles>

  
  
• Mobile supports the following JSON keys which are most common ones needed to create a custom visualization. If there is a need for other JSON keys outside of the following scope, please submit request and Strategy will review and support.
  
  

• The following are special CSS style handles for the input field element in the plugin.
  
• In a iOS custom visualization, the input field selection is disabled by default in our entry root html file with the below style setting. The input field will not respond to keyboard:
  Disable user selection:
  

  
  <style>
  * {
  	-webkit-touch-callout: none;
  	-webkit-user-select: none;
  }
  </style>
  

  
  This is an expected behavior, because in an iOS device, there are touch gestures, like long press, tap, and hold to trigger native tooltip/context menu, pan/swipe gesture to change pages in library, etc... To disable the default settings,

  -webkit-user-select

  is provided by WKWebview.
  
• If the user plugin has specific input field, then the plugin needs to enable -webkit-user-select for that specific element. For a workaround, add the following style to overwrite the plugin global css file:
  

  
  #inputfield_div > * {
    -webkit-user-select: auto !important;
  }

  
  `i

  nputfield_div

  ` is the input field element id in the plugin. This css setting will override the

  -webkit-user-select property

  for the specific input field element.
  
• Mobile supports the following Plugin folder structure:
  

• iOS Custom Visualization has offline support. When rendering for the first time, plugin files will be downloaded from the server. For performance and stability concerns, we will NOT download the entire Plugin folder as there are a lot of files that are not used on the mobile device. Thus, Mobile has a specific download folder paths, as shown in the above screenshot.
  

• Plugins/<CustomVisualizationName>/javascript

  : This is for the plugin's main Javascript files.

• Plugins/<CustomVisualizationName>/libs

  : This is for the plugin's referenced internal/external libraries.

• Plugins/<CustomVisualizationName>/images

  : This is for the plugin's image files, like 'png', 'jpeg', etc.

• Plugins/<CustomVisualizationName>/styles

  : This is for CSS style files.

• Plugins/<CustomVisualizationName>/data

  : This is for data files, like 'JSON' data.
• Other files NOT in the above folder paths will not be downloaded from the server and may cause custom visualization render fail.
  

ADDITIONAL INFORMATION:
The Strategy SDK allows you to customize the standard Strategy Web interface, and extend and integrate the Strategy business intelligence functionality into other applications. However, before changing the way Strategy Web products look or behave, it is helpful to understand how the application is built. For more information regarding the Strategy Web architecture or the process of customizing Strategy Web, please refer to Strategy Developer Zone (https://resource.microstrategy.com/msdz/).
 
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. For enhancements to this customization or to incorporate similar functionality into other versions, contact your Account Executive to inquire about Strategy Consulting assistance. 
 
Disclaimers and Limitation of Liabilities 
Disclaimer:The utility application is provided "as is" and without warranty of any kind. Strategy Expressly disclaims all warranties, express, implied or statutory, including, without limitation, the implied warranties of merchantability, fitness for a particular purpose, satisfactory quality and noninfringement. 
 
Limitation of Liability: Strategy shall have no liability to licensee for any damages of any kind, including, but not limited to, liability for direct, indirect, special, incidental or consequential, damages (which shall include, but not be limited to, loss of data or information, loss of revenue or anticipated profits or lost business). 
 
Third Party Software Installation: WARNING: 
The third-party product(s) discussed in this technical note is manufactured by vendors independent of Strategy. Strategy makes no warranty, express, implied or otherwise, regarding this product, including its performance or reliability.
KB439757