Opposed to hardcoding JavaScript into each report using HTML item objects, one of the amazing features of IBM Cognos Analytics is the ability to store your JavaScript files on the Cognos server and reference them across a multitude of reports. This allows you to change a piece of JavaScript in a single location opposed to updating each and every report. IBM has created documentation for adding JavaScript to reports.
With that introduction out of the way, let's get to the JavaScript example being discussed and shared.
IBM already provides a sample piece of JavaScript to do Hide/Show functionality but the following piece of code has a different look and feel than the default one. The magic of the Custom Control JavaScript is the ability to use a single piece of code that's saved on the server and then make it your own with the properties that you set on the reporting side. Before sharing the JavaScript itself, I'll first share an example of what you can do with the properties on the reporting side just so you can see how granular and distinctive you are able to get:
JS Configuration Example:
{
"Control name": "TestBlock",
"Orientation": "top",
"Padding": "0px 15px 0px 15px",
"Foreground color": "#003868",
"Hover foreground color": "#EAEAEA",
"Background color": "#EAEAEA",
"Hover background color": "#38A8C8",
"Border color": "#B1B6BA",
"Hover border color": "#EAEAEA",
"Font size": "10px"
}
Notes: Recommend setting UI Type to 'UI without event propogation. The ControlName is simply the name of whatever item you want to show/hide.
This is most likely a block. Background and foreground colors can be adjusted in the configuration.
Now for the actual JavaScript:
define( function() {
"use strict";
function Control()
{
};
Control.prototype.initialize = function( oControlHost, fnDoneInitializing )
{
this.m_oControlHost = oControlHost;
this.m_sControlName = this.getConfigurationValue( "Control name", "Block1" );
this.m_sOrientation = this.getConfigurationValue( "Orientation", "top" );
fnDoneInitializing();
};
Control.prototype.destroy = function( oControlHost )
{
this.m_oControlHost = null;
};
Control.prototype.getConfigurationValue = function( sName, sDefaultValue )
{
var o = this.m_oControlHost.configuration;
return ( o && ( o[sName] !== undefined ) ) ? o[sName] : sDefaultValue;
};
Control.prototype.draw = function( oControlHost )
{
var elContainer = oControlHost.container;
var sUniqueSelector = 'myDisplayButton_' + elContainer.id;
var sBorderColor = this.getConfigurationValue( "Border color", null );
var sHoverBackgroundColor = this.getConfigurationValue( "Hover background color", null );
var sHoverColor = this.getConfigurationValue( "Hover foreground color", null );
elContainer.innerHTML =
'<style>' +
'.' + sUniqueSelector + '\n' +
'{' +
'background-color:' + this.getConfigurationValue( "Background color", "transparent" ) + ';' +
'color:' + this.getConfigurationValue( "Foreground color", "currentcolor" ) + ';' +
'font-size:' + this.getConfigurationValue( "Font size", "inherit" ) + ';' +
'padding:' + this.getConfigurationValue( "Padding", "0px 6px 0px 6px" ) + ';' +
( sBorderColor ? ( 'border:1px solid ' + sBorderColor ) : 'border:0' ) + ';' +
'}' +
'.' + sUniqueSelector + ':hover\n' +
'{' +
( sHoverBackgroundColor ? ( 'background-color:' + sHoverBackgroundColor + ';' ) : '' ) +
( sHoverColor ? ( 'color:' + sHoverColor + ';' ) : '' ) +
( sBorderColor ? ( 'border:1px solid ' + this.getConfigurationValue( "Hover border color", "#EAEAEA" ) ) : '' ) + ';' +
'}' +
'</style>' +
'<button class="' + sUniqueSelector + '"></button>';
this.m_btn = elContainer.lastChild;
this.m_btn.onclick = this.onClick.bind( this );
this.updateButton();
};
Control.prototype.onClick = function()
{
this.m_oControlHost.page.getControlByName( this.m_sControlName ).toggleDisplay();
this.updateButton();
};
Control.prototype.m_oOrientationToDisplayedCodePoint =
{
left : '◀',
right : '▶',
top : '▲',
bottom :'▼'
};
Control.prototype.m_oOrientationToNotDisplayedCodePoint =
{
left : '▶',
right : '◀',
top : '▼',
bottom :'▲'
};
Control.prototype.updateButton = function()
{
var b = this.m_oControlHost.page.getControlByName( this.m_sControlName ).getDisplay();
var o = b ? this.m_oOrientationToDisplayedCodePoint : this.m_oOrientationToNotDisplayedCodePoint;
this.m_btn.innerHTML = o[this.m_sOrientation];
this.m_btn.title = b ? 'Hide' : 'Show';
};
return Control;
});