執行包含內嵌內容的資料動作
您可以從此處描述的資訊，瞭解如何在外部容器 (例如 HTML 頁面或應用程式網頁) 內的視覺化中內嵌及執行資料動作。
註：
內嵌的應用程式若未使用 Oracle JET 技術時，本節中的範例就適用於內嵌的資料動作。請參閱：執行資料動作
當您按一下「發布事件」資料動作時，它會判斷視覺化的相關資訊環境資訊，然後將該資訊傳送給導覽動作服務來處理。導覽動作的服務處理作業會以相關資訊環境有效負載資訊引發名為 "oracle.bitech.dataaction" 的事件。您可以訂閱此事件，如此便可在事件回呼中收到有效負載，然後視需要進一步利用此有效負載。
下列視覺化顯示各組織 (例如 Franchises Org、Inbound Org、International Org) 各業務別 (例如 Communication、Digital、Electronics) 的收益 (以美元為單位)。
事件和有效負載格式與相關資訊環境
下列範例示範在使用者於一或多個資料儲存格上按一下滑鼠右鍵來呼叫內嵌資料動作，並從內嵌工作簿所顯示功能表中選取資料動作時，發布事件。
下列範例來自 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。
.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"
}
]
}在「依相關資訊環境傳送」中傳送多個值
在此範例中，當您按一下兩個資料列儲存格 (例如 Digital 產品的 Inbound Org 和 International Org)，然後按一下「內嵌 DA1」功能表選項來選取內嵌動作時，會傳送兩個所選組織和業務別儲存格的收益值 (以美元為單位)。例如，按一下兩個所選組織 (Inbound Org 和 International Org) 的 Digital 產品收益時，會傳送 $1, 458,738.42 和 $915,528.97 值。
.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>