임베딩된 콘텐츠가 있는 데이터 작업 실행
여기 설명된 정보에 따라 외부 컨테이너(예: 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>