执行包含嵌入式内容的数据操作
通过此处提供的信息了解如何在外部容器（如 HTML 页或应用程序 Web 页）内的可视化中嵌入和执行数据操作。
注：
此部分中的示例适用于当嵌入应用程序不使用 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 products"）时，单击“嵌入式 DA1”菜单选项以选择嵌入式操作时传递的是所选业务部门和组织的收入，以美元为单位。例如，传递 "Inbound Org" 的 "Digital products" 的收入，在本例中为 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 products" 的 "Inbound Org" 和 "International Org"）并单击“嵌入式 DA1”菜单选项以选择嵌入式操作时，传递的时组织和业务部门两个选定单元的收入，以美元为单位。例如，单击所选两个组织（"Inbound Org" 和 "International Org"）的 "Digital products" 收入将传递值 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 中，单击右键并选择 Inspect Source。
- 在 Sources 选项卡中，右键单击
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;行，并选择 Add breakpoint。从嵌入的画布调用事件数据操作时，浏览器工具的右侧窗格上的 Scope 部分中将显示一个有效负载条目。
- 右键单击该有效负载条目，然后选择 Store as global variable。
可以在 Console 选项卡中查看全局变量，并且可以展开全局变量以查看有效负载的详细信息。
具有接收事件的可视化的 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>