埋込みコンテンツを含むデータ・アクションの実行
ここに示された情報に従って、HTMLページやアプリケーションWebページなどの外部コンテナ内のビジュアライゼーションにデータ・アクションを埋め込んで実行する方法を学習します。
ノート:
この項の例は、埋込みアプリケーションでOracle JETテクノロジを使用しない場合に埋込みデータ・アクションに適用されます。参照:データ・アクションの実行
「イベントの公開」データ・アクションをクリックすると、ビジュアライゼーションのコンテキスト情報が判別され、その情報がナビゲーション・アクション・サービスに渡されて処理されます。ナビゲーション・アクションのサービス・プロセスでは、oracle.bitech.dataactionというイベントがコンテキスト・ペイロード情報とともに発生します。このイベントをサブスクライブしてイベントのコールバックでペイロードを受け取り、必要に応じてペイロードをさらに利用できます。
次のビジュアライゼーションには、組織(Franchises Org、Inbound Org、International Orgなど)の部門(Communication、Digital、Electronicsなど)ごとに収益(ドル)が表示されています。
イベントおよびペイロードの書式とコンテキスト
次の例では、1つ以上のデータ・セルを右クリックし、それによって表示された埋込みワークブックのメニューからデータ・アクションを選択することで埋込みデータ・アクションが起動される際のイベントの公開を示しています。
次の例は、JSONファイルからのものです(例: obitech-cca/cca/component.json)。
イベント書式
"events": {
"oracle.bitech.dataaction": {
"description": "Generic DV Event published from an embedded data visualization.",
"bubbles": true,
"cancelable": false,
"detail": {
"eventName": {
"description": "The name of the published BI Event",
"type": "string"
},
"payload": {
"description": "The payload contains context and related information to the event published",
"type": "object"
}
}
}
ペイロード書式
{"context":[
"or": [
"and":[
{"contextParamValues":[...],
"contextParamValuesKeys":[...],
"colFormula":"...",
"displayName":"...",
"isDoubleColumn":true/false,
"dataType":"..."
}
]
]
]
}コンテキストで渡すでの単一列に対する単一値の引渡し
この例では、列セルをクリックすると、その列についてコンテキスト情報を保持するオブジェクトが外部コンテナに渡されます。ここでは組織名が渡されます。
{
"context": [
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}コンテキストで渡すでの各列に対する単一値の引渡し
この例では、列セル(例: Inbound OrgのDigital製品)をクリックし、埋込みDA1メニュー・オプションをクリックして埋込みアクションを選択したときに渡されるのは、選択した部門と組織に対応する収益値(ドル)です。たとえば、Inbound OrgからDigital製品の収益が渡され、この例では$1,458,738.42です。
図pass-value-revenue-p3-lob-d3-organization-02.gifの説明
{
"context": [
{
"contextParamValues": [
"Digital"
],
"contextParamValuesKeys": [
"Digital"
],
"colFormula": "\"A - Sample Sales\".\"Products\".\"P3 LOB\"",
"displayName": "P3 LOB",
"isDoubleColumn": false,
"dataType": "varchar"
},
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}コンテキストで渡すでの複数値の引渡し
この例では、2つの行セル(たとえばDigital製品に対するInbound OrgとInternational Org)をクリックし、埋込みDA1メニュー・オプションをクリックして埋込みアクションを選択すると、組織と部門に対して選択された2つのセルの収益値(ドル)が渡されます。たとえば、選択した2つの組織(Inbound OrgとInternational Org)からDigital製品の収益をクリックすると、$1,458,738.42および$915,528.97の値が渡されます。
図pass-multiple-values-revenue-p3-lob-d3-organization-03.gifの説明
{
"context": [
{
"or": [
{
"and": [
{
"contextParamValues": [
"Digital"
],
"contextParamValuesKeys": [
"Digital"
],
"colFormula": "\"A - Sample Sales\".\"Products\".\"P3 LOB\"",
"displayName": "P3 LOB",
"isDoubleColumn": false,
"dataType": "varchar"
},
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
},
{
"and": [
{
"contextParamValues": [
"Digital"
],
"contextParamValuesKeys": [
"Digital"
],
"colFormula": "\"A - Sample Sales\".\"Products\".\"P3 LOB\"",
"displayName": "P3 LOB",
"isDoubleColumn": false,
"dataType": "varchar"
},
{
"contextParamValues": [
"International Org."
],
"contextParamValuesKeys": [
"International Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}
]
}
]
}次のステップを使用し、Chromeブラウザのツールを使用してイベント・ペイロードを表示します。
- Chromeで右クリックして「ソースの検査」を選択します。
- 「ソース」タブで、
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;の行を右クリックして「ブレークポイントの追加」を選択します。埋込みキャンバスからイベント・データ・アクションが呼び出されると、ペイロード・エントリがブラウザ・ツールの右側のペインにある「範囲」セクションに表示されます。
- ペイロード・エントリを右クリックし、「グローバル変数として保存」を選択します。
グローバル変数は、「コンソール」タブ内で表示でき、展開するとペイロードの詳細が表示されます。
イベントを受け取るビジュアライゼーションのあるHTMLページの例
次のサンプル・コードは、分析イベント・データ・アクションのイベント・リスナーを定義する方法を示しています。このコード・サンプルでは、分析インスタンスとワークブックへの埋込みパスを更新する必要があります。ワークブックにはイベント・データ・アクションが定義されている必要があります。リスニングされるイベントは、oracle.bitech.dataactionと呼ばれます。イベントが発生すると、メッセージがコンソールに送信されます。
<!DOCTYPE HTML>
<html dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Oracle Analytics embed example to view data action event payload</title>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script src="https://<OAC-INSTANCE>.analytics.ocp.oraclecloud.com/public/dv/v1/embedding/standalone/embedding.js" type="application/javascript">
</script>
</head>
<body>
<h1>Oracle Analytics embed example to view data action event payload</h1>
<div id="mydiv" style="position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)" >
<oracle-dv project-path='<WORKBOOK-PATH-TO-EMBED>'
active-page='insight'
active-tab-id='snapshot!canvas!1'>
</oracle-dv>
</div>
<script>
requirejs(['knockout', 'ojs/ojcore', 'ojs/ojknockout', 'ojs/ojcomposite', 'jet-composites/oracle-dv/loader'], function(ko) {
ko.applyBindings();
});
</script>
<script>
var eventName = 'oracle.bitech.dataaction';
var element = document.getElementById("mydiv");
if (element) {
var oEventListener = element.addEventListener(eventName, function (e) {
console.log("***** Payload from DV sent ***** ");
console.log("eventName = " + e.detail.eventName);
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;
console.log("******************************** ");
}, true);
}
</script>
</body>
</html>
また、前述のコード・サンプルの<script>セクションを修正して、データ・アクションが呼び出された場所の値を返すこともできます:
<script>
var eventName = 'oracle.bitech.dataaction';
var element = document.getElementById("mydiv");
if (element) {
var oEventListener = element.addEventListener(eventName, function (e) {
console.log("***** Payload from DV sent ***** ");
console.log("eventName = " + e.detail.eventName);
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;
console.log("******************************** ");
var res = " Data Received from DV Content: ";
// Get the values of the row from where data action was invoked
Object.keys(e.detail.payload.context).forEach(function(key) {
res = res.concat(key);
res = res.concat(" : ");
var temp = e.detail.payload.context[key]["oValueMap"];
var temp1 = Object.keys(temp)[0];
res = res.concat(temp1);
res = res.concat(" | ");
});
console.log("Data Action Row Context : " + res);
}, true);
}
</script>