Cognos Analytics 11.0.10 JavaScript サンプル

#概要
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](https://qiita-image-store.s3.amazonaws.com/0/147246/02467c00-d07e-0134-192e-0c729495fa28.png)

#App bar
画面イメージのように、黒バーを表示して、アイコンを選択するとリストが表示されたり、
![001.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/eb0839c1-21c4-9731-4154-4a295813f1f7.jpeg)

二番目のアイコンを選択すると、グラフ類が表示されたりするJavaScriptサンプルです。
![002.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/57b56d52-a22a-9408-34e4-010203c8bede.jpeg)

#App bar data
横にバーを表示し、選択するアイテムによりフィルターがかかるようです。
![003.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/701eac31-3ef4-39c0-71ff-aa3b566a8925.jpeg)

Webを選択した場合。
![004.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/79013cfb-df1f-908b-94c3-11b647f52c18.jpeg)

#App bar static labels
App barの横版という感じですね。
![005.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/bbd67dbb-da20-9855-9791-bb4fe9b8faf9.jpeg)

Card 2を選択した場合
![006.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/25e0d6e6-987c-7bb9-2e1b-8b4d80022ee2.jpeg)

#Basic control
カスタムコントロールの基本的な使い方を紹介しています。
単純にレポート上に「Hello」の出力をしたいだけで、Source内の記述は実際のjsファイルに記載されている内容と同じです。
このソースのjsファイルを読み込んで、Hello を表示するために、カスタムコントロールをこうやって設定してね、という例です。
![007.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/9dae4d34-cbc6-7e84-921d-eb1f8ff486a6.jpeg)

#Bootstrap button bar
バーを表示し、選択するアイテムによってフィルターがかかります。
Mail選択の場合。
![008.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/f094ad9f-274b-9574-3299-293c0aa6187b.jpeg)

Web選択の場合。
![009.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/0dc74b4b-6994-1168-c76a-d6fdef6f262a.jpeg)

#Bootstrap tabs
TABにしたような感じです。
![010.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/088bf5ae-5c13-ec0a-0144-88f92a7950c0.jpeg)

#Collapse regions
このアイコンを選択すると・・・
![011.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/2ee9b3d7-7749-6ded-cce3-7a4d43d85431.jpeg)

プロンプトエリアの展開&省略ですね。これは使いそう。
![012.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/93eb55ff-e3bc-d5db-fd8e-88633b027e31.jpeg)

#D3 bar chart
横棒だけのチャートが描画されます。
![013.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/96da7c0f-fad4-0706-b8f8-3738866277d0.jpeg)

#Data store viewer
一見リストかと思いましたが、JavaScriptだけでこの表示をやっているようです。
![014.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/a33d5750-c189-ebf9-27c9-c369625dcfc7.jpeg)

レポートの機能で開いてみると、カスタム・コントロールをクリックすると、こんな感じのデータアイテムの配置ができます。どうやって実装しているのか、ソース見るとわかると思いますが。
![015.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/360397d3-3e50-37b9-b81d-c00668424da8.jpeg)

#Displayable regions
赤枠の矢印アイコンで、プロンプト自体の表示・非表示ができます。
![016.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/9fe1b0e3-11c7-1507-23b6-7af1fa19db3e.jpeg)

#Events
レポート実行時の表示はこんだけ。
![017.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/c4b52c08-00a0-3a96-a393-9a34befb76c1.jpeg)

こんなjsが呼ばれるようなので、initialize、show、hide、draw、getParametersなどの、各種イベント時のハンドルの仕方のサンプルみたいな感じかな。

```js
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](https://qiita-image-store.s3.amazonaws.com/0/147246/8eb58a49-499e-43ff-2229-09a6e1ae4147.jpeg)

あ、ホントだ、リストが全画面表示された。Escキーで戻れる。
![019.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/e2c0f948-a6f2-1ce8-fd13-fb0108952e6d.jpeg)

#Google bar chart
何がGoogleなのか(色ですかね)わかりませんが、棒グラフが表示されます。
![020.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/6e85c731-97da-a4ee-1038-2827abfaa894.jpeg)

#Google organization chart
こんな感じの組織図が描画されます。
![021.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/336466ac-9c29-b423-7b5a-5c7f38ebf7fd.jpeg)

#HTML select
値のプロンプトかと思いきや、JavaScriptで同様のものを実装しているようです。
![022.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/3e49709a-a599-b4ca-e29b-25d1af4964fe.jpeg)

#HTML slider
同様にJavaScriptで、スライダーバーを実装しています。
![023.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/ecc924b6-f1c7-9d2f-7cc3-669a4cec974e.jpeg)

#List column display
初期画面です。
![024.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/6ae8c5fa-6fba-a224-86e4-29e53ad4640a.jpeg)

ウィンドウに数字をカンマ区切りで入れて、Hide。なるほど。
![025.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/60db7d76-2bf8-ca15-6f9f-fbe21a0f7e16.jpeg)

#Loading text
5秒待ってメッセージを表示するサンプルですかね。
レポート実行時、
![026.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/c9d1caf5-6a8f-1d0c-3358-4acd2a5877a3.jpeg)

5秒後。
![027.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/245d18b9-f1fb-ec78-f46b-1dc9ccc18bb0.jpeg)

ソース

```js
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](https://qiita-image-store.s3.amazonaws.com/0/147246/fe4fea04-3e3a-8aa2-d49e-63c7bc6b4b4f.jpeg)

#Prompt API buttons
プロンプトの値を選択したり、取得したり、クリアしたりするサンプルのようです。
![029.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/1e1fa105-9c66-d848-6918-6f0638c05b9e.jpeg)

#Prompt validation
テキストボックスへの入力が、形式通りに入れられてるかチェックするようです。
下記は、形式通りじゃないので、数値を入れても実行可能になりません。
![030.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/4762940e-3fd0-7d2e-f0e3-cb3c31547de2.jpeg)

#Save csv
ボタンを押すとCSVでデータダウンロードができるようです。
![031.JPG](https://qiita-image-store.s3.amazonaws.com/0/147246/579c419f-4d21-551a-a3ea-b86c79a0d23a.jpeg)

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