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 die folgenden Schritte aus, um die unten gezeigte HTML-Beispielseite zu konfigurieren.
-
Fügen Sie den Pfad der Arbeitsmappe hinzu, bzw. ändern Sie diesen.
Siehe
<======== 1weiter unten. -
Abonnieren Sie das veröffentlichte Ereignis "oracle.bitech.dataaction".
Siehe
<======== 2weiter unten. -
Definieren Sie einen Ereignis-Listener und ein Ereignis-Callback.
Siehe
<======== 3weiter unten.
Beispiel für eine HTML-Seite mit Visualisierung, die Ereignisse empfängt
Die folgende HTML-Seite umfasst eine eingebettete Visualisierung und kann Ereignisse empfangen. Die HTML-Seite ist zum Abhören des Ereignisses "oracle.bitech.dataaction" konfiguriert.
<!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>