概要

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 から、サンプルのレポートを実行できます。
image.png

App bar

画面イメージのように、黒バーを表示して、アイコンを選択するとリストが表示されたり、
001.JPG

二番目のアイコンを選択すると、グラフ類が表示されたりするJavaScriptサンプルです。
002.JPG

App bar data

横にバーを表示し、選択するアイテムによりフィルターがかかるようです。
003.JPG

Webを選択した場合。
004.JPG

App bar static labels

App barの横版という感じですね。
005.JPG

Card 2を選択した場合
006.JPG

Basic control

カスタムコントロールの基本的な使い方を紹介しています。
単純にレポート上に「Hello」の出力をしたいだけで、Source内の記述は実際のjsファイルに記載されている内容と同じです。
このソースのjsファイルを読み込んで、Hello を表示するために、カスタムコントロールをこうやって設定してね、という例です。
007.JPG

Bootstrap button bar

バーを表示し、選択するアイテムによってフィルターがかかります。
Mail選択の場合。
008.JPG

Web選択の場合。
009.JPG

Bootstrap tabs

TABにしたような感じです。
010.JPG

Collapse regions

このアイコンを選択すると・・・
011.JPG

プロンプトエリアの展開&省略ですね。これは使いそう。
012.JPG

D3 bar chart

横棒だけのチャートが描画されます。
013.JPG

Data store viewer

一見リストかと思いましたが、JavaScriptだけでこの表示をやっているようです。
014.JPG

レポートの機能で開いてみると、カスタム・コントロールをクリックすると、こんな感じのデータアイテムの配置ができます。どうやって実装しているのか、ソース見るとわかると思いますが。
015.JPG

Displayable regions

赤枠の矢印アイコンで、プロンプト自体の表示・非表示ができます。
016.JPG

Events

レポート実行時の表示はこんだけ。
017.JPG

こんな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

このアイコンを選択すると。
018.JPG

あ、ホントだ、リストが全画面表示された。Escキーで戻れる。
019.JPG

Google bar chart

何がGoogleなのか(色ですかね)わかりませんが、棒グラフが表示されます。
020.JPG

Google organization chart

こんな感じの組織図が描画されます。
021.JPG

HTML select

値のプロンプトかと思いきや、JavaScriptで同様のものを実装しているようです。
022.JPG

HTML slider

同様にJavaScriptで、スライダーバーを実装しています。
023.JPG

List column display

初期画面です。
024.JPG

ウィンドウに数字をカンマ区切りで入れて、Hide。なるほど。
025.JPG

Loading text

5秒待ってメッセージを表示するサンプルですかね。
レポート実行時、
026.JPG

5秒後。
027.JPG

ソース

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を呼び出す例のようです。
028.JPG

Prompt API buttons

プロンプトの値を選択したり、取得したり、クリアしたりするサンプルのようです。
029.JPG

Prompt validation

テキストボックスへの入力が、形式通りに入れられてるかチェックするようです。
下記は、形式通りじゃないので、数値を入れても実行可能になりません。
030.JPG

Save csv

ボタンを押すとCSVでデータダウンロードができるようです。
031.JPG

以上です。
ちら見して頂き、記憶の片隅にこういうサンプルがあると覚えておいて頂ければ、いつか助かる日が来るかも知れません。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.