概要
Cognos Analytics 11.0.10で使用できるJavaScriptサンプルのセットアップ方法と、JavaScript内容の紹介です。
以前、こちらの記事で、Cognos BIでとても役に立つサンプルJavaScriptを紹介していました。
Cognos プロンプト操作用サンプルJavaScript
https://qiita.com/shinyama/items/892e5696a85746fcf60a
Cognos Analyticsでは、HTLMアイテムの使用がデフォルトではできなくなり、カスタム・コントロールというオブジェクトを介しての実装が必要になりました。
Cognos AnalyticsでのJavaScriptの扱いについて
https://qiita.com/shinyama/items/0bc310fc909465c277a6
今回のサンプルJavaScriptは、カスタム・コントロールベースでの実装なので、Cognos AnalyticsでJavaScript利用をされる方は是非知っておくと役に立つと思います。
セットアップ手順
Cognos Analyticsのインストール時に、簡易インストールか、カスタムインストールの場合は「サンプル」を選択してインストールを行います。
<CA_Install>\samples\JavaScriptフォルダに、以下の3ファイルが配置されます。
javascript.zip : サンプルのJavaScriptソースファイルが含まれています
JavaScript_setup_instructions.pdf : サンプルJSのセットアップ手順です
JS_samples_deployment.zip : Cognos Administrationのコンテンツの管理からインポートします
javascript.zipは解凍すると、javascriptというフォルダが生成され、その配下にサンプルのJavascriptソースが配置されますので、javascriptフォルダを、以下の場所に配置します。
<CA_Install>\webcontent\samples\javascript
JS_samples_deployment.zip を<CA_Install>\deployment にコピーし、Cognos Administrationのコンテンツ管理からインポートします。
こんな感じに、チームコンテンツのSamples > JavaScript から、サンプルのレポートを実行できます。
App bar
画面イメージのように、黒バーを表示して、アイコンを選択するとリストが表示されたり、
二番目のアイコンを選択すると、グラフ類が表示されたりするJavaScriptサンプルです。
App bar data
横にバーを表示し、選択するアイテムによりフィルターがかかるようです。
Webを選択した場合。
App bar static labels
App barの横版という感じですね。
Card 2を選択した場合
Basic control
カスタムコントロールの基本的な使い方を紹介しています。
単純にレポート上に「Hello」の出力をしたいだけで、Source内の記述は実際のjsファイルに記載されている内容と同じです。
このソースのjsファイルを読み込んで、Hello を表示するために、カスタムコントロールをこうやって設定してね、という例です。
Bootstrap button bar
バーを表示し、選択するアイテムによってフィルターがかかります。
Mail選択の場合。
Web選択の場合。
Bootstrap tabs
TABにしたような感じです。
Collapse regions
このアイコンを選択すると・・・
プロンプトエリアの展開&省略ですね。これは使いそう。
D3 bar chart
横棒だけのチャートが描画されます。
Data store viewer
一見リストかと思いましたが、JavaScriptだけでこの表示をやっているようです。
レポートの機能で開いてみると、カスタム・コントロールをクリックすると、こんな感じのデータアイテムの配置ができます。どうやって実装しているのか、ソース見るとわかると思いますが。
Displayable regions
赤枠の矢印アイコンで、プロンプト自体の表示・非表示ができます。
Events
レポート実行時の表示はこんだけ。
こんなjsが呼ばれるようなので、initialize、show、hide、draw、getParametersなどの、各種イベント時のハンドルの仕方のサンプルみたいな感じかな。
define( function() {
"use strict";
var bAlert = false;
function Control()
{
};
Control.prototype.initialize = function( oControlHost, fnDoneInitializing )
{
this.log( "CustomControl.initialize" );
fnDoneInitializing();
};
Control.prototype.show = function( oControlHost )
{
this.log( "CustomControl.show" );
};
Control.prototype.hide = function( oControlHost )
{
this.log( "CustomControl.hide" );
};
Control.prototype.draw = function( oControlHost )
{
this.log( "CustomControl.draw" );
oControlHost.container.innerHTML = "Hello";
};
Control.prototype.getParameters = function( oControlHost )
{
this.log( "CustomControl.getParameters" );
return null;
};
Control.prototype.destroy = function( oControlHost )
{
this.log( "CustomControl.destroy" );
};
Control.prototype.log = function( s )
{
console.log( s );
if ( bAlert )
{
alert( s );
}
};
return Control;
});
Full screen
このアイコンを選択すると。
あ、ホントだ、リストが全画面表示された。Escキーで戻れる。
Google bar chart
何がGoogleなのか(色ですかね)わかりませんが、棒グラフが表示されます。
Google organization chart
こんな感じの組織図が描画されます。
HTML select
値のプロンプトかと思いきや、JavaScriptで同様のものを実装しているようです。
HTML slider
同様にJavaScriptで、スライダーバーを実装しています。
List column display
初期画面です。
ウィンドウに数字をカンマ区切りで入れて、Hide。なるほど。
Loading text
5秒待ってメッセージを表示するサンプルですかね。
レポート実行時、
5秒後。
ソース
define( function() {
"use strict";
function C_LoadingText()
{
};
C_LoadingText.prototype.initialize = function( oControlHost, fnDoneInitializing )
{
oControlHost.loadingText = "This is loading text set by calling setLoadingText()";
setTimeout( fnDoneInitializing, 5000 );
};
C_LoadingText.prototype.draw = function( oControlHost )
{
oControlHost.container.innerHTML = "Done.";
};
return C_LoadingText;
});
Page module
カスタム・コントロールではなく、ページからjsを呼び出す例のようです。
Prompt API buttons
プロンプトの値を選択したり、取得したり、クリアしたりするサンプルのようです。
Prompt validation
テキストボックスへの入力が、形式通りに入れられてるかチェックするようです。
下記は、形式通りじゃないので、数値を入れても実行可能になりません。
Save csv
ボタンを押すとCSVでデータダウンロードができるようです。
以上です。
ちら見して頂き、記憶の片隅にこういうサンプルがあると覚えておいて頂ければ、いつか助かる日が来るかも知れません。