ทำตามข้อมูลที่อธิบายที่นี่เพื่อเรียนรู้เกี่ยวกับการรวมและการรันการดำเนินการของข้อมูลในการแสดงข้อมูลภายในคอนเทนเนอร์ภายนอก เช่น เป็นเพจ HTML หรือเว็บเพจของแอปพลิเคชัน
หมายเหตุ:
ตัวอย่างในส่วนนี้ใช้กับการดำเนินการกับข้อมูลที่รวมเมื่อแอปพลิเคชันที่รวมอยู่ไม่ได้ใช้เทคโนโลยี Oracle JET โปรดดู:การรันการดำเนินการกับข้อมูล
เมื่อคุณคลิกการดำเนินการกับข้อมูลแผยแพร่อีเวนต์ ระบบจะกำหนดข้อมูลคอนเท็กซ์สำหรับการแสดงข้อมูลและส่งข้อมูลนั้นไปยังบริการการดำเนินการนาวิเกตเพื่อประมวลผล การประมวลผลบริการสำหรับการดำเนินการนาวิเกตจะสร้างอีเวนต์ชื่อ “oracle.bitech.dataaction” พร้อมข้อมูลเพย์โหลดของคอนเท็กซ์ คุณสามารถสมัครอีเวนต์นี้และรับเพย์โหลดในการติดต่อกลับอีเวนต์ และคุณสามารถใช้ประโยชน์เพิ่มเติมจากเพย์โหลดตามที่ต้องการ
การแสดงข้อมูลต่อไปนี้จะแสดงรายรับเป็นดอลลาร์สำหรับรายการธุรกิจต่างๆ ตัวอย่างเช่น การสื่อสาร ดิจิตัล อิเล็กทรอนิกส์ ระหว่างหน่วยงานต่างๆ เช่น Franchises Org, Inbound Org, International Org
รูปแบบและคอนเท็กซ์ของอีเวนต์และเพย์โหลด
ตัวอย่างต่อไปนี้แสดงการเผยแพร่อีเวนต์เมื่อการดำเนินการกับข้อมูลที่กำหนดถูกเรียกใช้โดยเซลล์ข้อมูลอย่างน้อย 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"
}
]
}การส่งค่าเดียวสำหรับแต่ละคอลัมน์ในส่งโดยคอนเท็กซ์
ในตัวอย่างนี้ เมื่อคุณคลิกที่เซลล์คอลัมน์ เช่น หน่วยงานขาเข้า และผลิตภัณฑ์ดิจิตัล สิ่งที่จะถูกส่งเมื่อคุณคลิกตัวเลือกเมนู DA1 ที่กำหนดเพื่อเลือกการดำเนินการที่กำหนดคือค่ารายรับเป็นดอลลาร์สำหรับสายธุรกิจและหน่วยงานที่เลือก ตัวอย่างเช่น รายรับของผลิตภัณฑ์ดิจิตัลจากหน่วยงานขาเข้าจะถูกส่ง ซึ่งในตัวอย่างนี้ได้แก่ $1, 458,738.42

{
"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 แถว (เช่น หน่วยงานขาเข้าและหน่วยงานระหว่างประเทศสำหรับผลิตภัณฑ์ดิจิตัล) และคลิกตัวเลือกเมนู DA1 ที่กำหนดเพื่อเลือกการดำเนินการที่กำหนด สิ่งที่จะถูกส่งคือค่ารายรับเป็นดอลลาร์สำหรับเซลล์ที่เลือกไว้ 2 เซลล์สำหรับหน่วยงานและรายการธุรกิจ ตัวอย่างเช่น การคลิกรายรับสำหรับผลิตภัณฑ์ดิจิตัลจากหน่วยงานที่เลือกไว้ 2 หน่วยงาน (หน่วยงานขาเข้าและหน่วยงานระหว่างประเทศ) จะส่งค่า $1, 458,738.42 และ $915,528.97

{
"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
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>