Customvis FAQ

How can I load and use an external CSS?

There are currently two approaches for loading CSS:

1. Use the RenderBase.loadCss function, passing the url of the css file. An example:

   protected create( _parent: HTMLElement )
   {
       this.loadCss( '../static/style.css' );
   }

   Note that this approach is currently limited to asynchronous loading of css files.
2. Use a manifest.xml file. Once you have created and started or built a custom visualization, you will find a manifest.xml in the ‘build’ folder of the visualization. Copy this file to the root of the custom visualization folder and add a Dependency element to the existing Service binding:

   <ServiceBindings>
       <Service format="client" lang="js" class="renderer/Main" apiversion=“1.0”>
           <Dependency type="css" resource="static/style.css" />
       </Service>
   </ServiceBindings>

   This ensures that the css is loaded before any custom visualization is created.

Both samples assume that your css file is named 'style.css' and is located in the '/static' folder.

Can my visualization have tooltips?

By default, a custom visualization provides hit test information to IBM Cognos Analytics. This hit test information is used by Cognos Analytics to provide a tooltip. The advantage of this approach is that the tooltip is consistent with the rest of the UI and could provide additional information about the data as well (information that may not be known to the visualization).

If, however, you want to provide a custom tooltip you need to:

1. Override the hitTest function to prevent built-in tooltips to become active.
2. Implement your own mouse handling and tooltip code.

If you want both custom and built-in tooltips, you can implement a hitTest function that returns null for only some elements.

protected hitTest(_elem: Element | null )
{
    // If native tooltip is needed on this element, suppress app tooltips.
    if ( needsNativeTooltip( _elem ) )
        return null; // return null to suppress app tooltips
    // Call default hitTest to allow app tooltip support.
    return super.hitTest( _elem );
}

Does Customvis have support for Internet Explorer 11?

Customvis-lib was compiled to support by all major browsers, including Microsoft Internet Explorer 11. However, if your custom visualization has other external dependencies, those dependencies might have incompatibilities with some browsers. Also be aware in that some APIs are not supported or work differently across different browsers. Always make sure you test your custom visualizations on all browsers that you want to support.

How can I include plain JS files instead of TypeScript?

Use the following import statement in your Main.ts file:

import * as MyJSLib from "./MyJSLib"

Then create a JavaScript file MyJSLib.js in the renderer folder, next to your Main.ts. You can export functions from the JavaScript file, like this:

export function doSomething( _param1, _param2 )
{
    return _param1 + _param2;
}

In Main.ts you can now call this function using MyJSLib.doSomething( p1, p2 );.

Where can I find the command-line tools?

The Cognos Analytics custom visualizations command-line tools can be downloaded from [CAserverroot]/bi/js/dashboard-analytics/lib/@waca/vida/sdk/customvis.tgz. Once downloaded, you can install the command-line tools using npm install -g customvis.tgz in the folder where you downloaded the file. More information can be found in the documentation.