Datenaktionen mit eingebettetem Inhalt ausführen
Anhand der hier beschriebenen Informationen erfahren Sie, wie Sie Datenaktionen in einer Visualisierung in externen Containern wie einer HTML-Seite oder einer Anwendungswebseite einbetten und ausführen.
Hinweis:
Die Beispiele in diesem Abschnitt gelten für eingebettete Datenaktionen in Fällen, in denen die Einbettungsanwendung keine Oracle JET-Technologie verwendet. Siehe:Datenaktionen ausführen
Wenn Sie auf die Datenaktion "Ereignis veröffentlichen" klicken, werden die Kontextinformationen für die Visualisierung bestimmt und zur Verarbeitung an den Navigationsaktionsservice übergeben. Der Serviceprozess für die Navigationsaktion löst das Ereignis "oracle.bitech.dataaction" mit den Kontext-Payload-Informationen aus. Sie können dieses Ereignis abonnieren und die Payload im Ereignis-Callback empfangen. Sie können die Payload auch nach Bedarf weiter einsetzen.
Die folgende Visualisierung zeigt den Umsatz in Dollar für Geschäftsbereiche (wie Communication, Digital, Electronics) über verschiedene Organisationen hinweg (z.B. Franchises Org, Inbound Org, International Org).
Format und Kontext von Ereignis und Payload
Mit dem folgenden Beispiel wird die Veröffentlichung eines Ereignisses gezeigt, wenn die eingebettete Datenaktion per Rechtsklick in Datenzellen und durch Auswahl der Datenaktion im angezeigten Menü in der eingebetteten Arbeitsmappe aufgerufen wird.
Die folgenden Beispiele stammen aus einer JSON-Datei, z.B. obitech-cca/cca/component.json.
Ereignisformat
"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"
}
}
}
Payload-Format
{"context":[
"or": [
"and":[
{"contextParamValues":[...],
"contextParamValuesKeys":[...],
"colFormula":"...",
"displayName":"...",
"isDoubleColumn":true/false,
"dataType":"..."
}
]
]
]
}
Einzelwert für eine einzelne Spalte im Übergabekontext übergeben
Wenn Sie in diesem Beispiel auf eine Spaltenzelle klicken, wird das Objekt mit den Kontextinformationen zur Spalte an den externen Container übergeben. In diesem Fall wird der Organisationsname übergeben.
{
"context": [
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}Einzelwert für jede Spalte im Übergabekontext übergeben
Wenn Sie in diesem Beispiel auf eine Spaltenzelle, z.B. "Inbound Org" für "Digital", und dann auf die Menüoption "Eingebettete DA1" klicken, um die eingebettete Aktion auszuwählen, wird der Umsatzwert in Dollar für den ausgewählten Geschäftsbereich und die ausgewählte Organisation übergeben. Beispiel: Der Umsatz für digitale Produkte aus "Inbound Org" wird übergeben: 1.458.738,42 US-Dollar.
.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"
}
]
}Mehrere Werte im Übergabekontext übergeben
Wenn Sie in diesem Beispiel auf zwei Zeilenzellen (wie "Inbound Org" und "International Org" für "Digital") und dann auf die Menüoption "Eingebettete DA1" klicken, um die eingebettete Aktion auszuwählen, wird der Umsatzwert in Dollar für die beiden ausgewählten Zellen für Organisation und Geschäftsbereich übergeben. Beispiel: Durch Klicken auf den Umsatz für digitale Produkte aus den beiden ausgewählten Organisationen (Inbound Org und International Org) werden die Werte 1.458.738,42 U-Dollar und 915.528,97 US-Dollar übergeben.
.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"
}
]
}
]
}
]
}Führen Sie diese Schritte aus, um Ereignis-Payloads mit Chrome-Browsertools anzuzeigen.
- Klicken Sie mit der rechten Maustaste auf eine Stelle in Chrome, und wählen Sie Inspect Source aus.
- Klicken Sie auf der Registerkarte Sources mit der rechten Maustaste auf die Zeile
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;, und wählen Sie Add breakpoint aus.Wenn die Ereignisdatenaktion aus der eingebetteten Leinwand aufgerufen wird, wird ein Payload-Eintrag im Abschnitt Scope rechts in den Browsertools angezeigt.
- Klicken Sie mit der rechten Maustaste auf den Payload-Eintrag, und wählen Sie Store as global variable aus.
Die globale Variable kann auf der Registerkarte Console angezeigt und eingeblendet werden, um Details der Payload anzuzeigen.
Beispiel für eine HTML-Seite mit Visualisierung, die Ereignisse empfängt
Der folgende Beispielcode zeigt, wie Sie einen Ereignis-Listener für eine Analyseereignis-Datenaktion definieren. Sie müssen die Analyseinstanz und den eingebetteten Pfad zur Arbeitsmappe in diesem Codebeispiel aktualisieren. Eine Ereignisdatenaktion für die Arbeitsmappe muss definiert sein. Das überwachte Ereignis hat den Namen oracle.bitech.dataaction. Wenn das Ereignis ausgelöst wurde, wird eine Nachricht an die Konsole gesendet.
<!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>
Sie können auch den <script>-Abschnitt im vorherigen Codebeispiel ändern, um die Werte für den Aufrufort der Datenaktion zurückzugeben:
<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>