임베딩된 콘텐츠가 있는 데이터 작업 실행
여기 설명된 정보에 따라 외부 컨테이너(예: 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"
}
]
}
]
}
]
}다음 단계에 따라 아래 표시된 샘플 HTML 페이지를 구성할 수 있습니다.
-
워크북의 경로 위치를 추가 또는 수정합니다.
아래의
<======== 1을(를) 참조하십시오. -
'oracle.bitech.dataaction'이라는 게시 이벤트를 구독합니다.
아래의
<======== 2을(를) 참조하십시오. -
이벤트 리스너 및 이벤트 콜백을 정의합니다.
아래의
<======== 3을(를) 참조하십시오.
시각화가 포함되어 이벤트를 수신하는 HTML 페이지 예
다음 HTML 페이지는 시각화를 포함하며 이벤트를 수신할 수 있습니다. HTML 페이지는 "oracle.bitech.dataaction" 이벤트를 수신하도록 구성됩니다.
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"><html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Standalone DV CCA Demo</title>
<script src="http://hostname:port/bali/ui/api/v1/plugins/embedding/standalone/embedding.js" type="text/javascript"></script>
</head>
<body>
<h1>Standalone DV CCA Embedded Data Action Demo</h1>
<div id="mydiv" style="position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)" >
<oracle-dv project-path="/Shared Folders/RR/sample"></oracle-dv> <=============== 1
</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'; <========== 2
var element = document.getElementById("mydiv");
if (element) {
var oEventListener = element.addEventListener(eventName, function (e) { <================= 3
console.log("***** Payload from DV ***** ");
console.log("eventName = " + e.detail.eventName);
console.log("payload = " + JSON.stringify(e.detail.payload));
console.log("***** Payload from DV end ***** ");
}, true);
}
</script>
</body>
</html>