Kör dataåtgärder som innehåller inbäddat innehåll
Läs informationen här för att lära dig att bädda in och köra dataåtgärder i en visualisering i en extern container som en HTML-sida eller en applikationswebbsida.
Obs!:
Exemplen i det här avsnittet gäller för inbäddade dataåtgärder när den inbäddande applikationen inte använder Oracle JET-teknik. Mer information finns i:Köra dataåtgärder
När du klickar på dataåtgärden Publicera händelse bestämmer den kontextinformationen för visualiseringen och överför den informationen till navigeringsåtgärdstjänsten för att bearbeta den. Tjänsteprocessen för navigeringsåtgärden skapar en händelse som heter "oracle.bitech.dataaction" med nyttolastsinformationen för kontexten. Du kan prenumerera på den här händelsen och ta emot nyttolasten i händelseåteranropet och du kan använda nyttolasterna igen, om det behövs.
I följande visualisering visas intäkten i dollar för affärsområden, till exempel kommunikation, digitalt och elektronik, mellan olika organisationer, till exempel franchiseorganisation, inhemsk organisation och internationell organisation.
Händelse- och nyttolastformat och -kontext
I följande exempel demonstreras publicering av en händelse när den inbäddade dataåtgärden anropas av en eller flera dataceller som någon har högerklickat på och den dataåtgärd som väljs på menyn som visas i den inbäddade arbetsboken.
Exemplen nedan kommer från en JSON-fil, till exempel obitech-cca/cca/component.json.
Händelseformat
"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"
}
}
}
Nyttolastsformat
{"context":[
"or": [
"and":[
{"contextParamValues":[...],
"contextParamValuesKeys":[...],
"colFormula":"...",
"displayName":"...",
"isDoubleColumn":true/false,
"dataType":"..."
}
]
]
]
}
Överföra ett enskilt värde för en enskild kolumn i Överför per kontext
När du klickar på en kolumncell i det här exemplet överförs objektet med kontextinformation om kolumnen till den externa containern. I det här fallet så överförs organisationsnamnet.
{
"context": [
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}Överföra ett enskilt värde för varje kolumn i Överför per kontext
När du klickar på en kolumncell i det här exemplet, till exempel inhemsk organisation och digitala produkter, överförs intäktsvärdet i dollar för den valda raden i affärsområdet och organisationen när du klickar på menyalternativet Inbäddad DA1. Till exempel så överförs intäkten för digitala produkter, som är $1 458 738,42, från den inhemska organisationen i det här exemplet.
.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"
}
]
}Överföra flera värden i kontexten Överför per
När du klickar på två radceller i det här exemplet (till exempel inhemsk organisation och internationell organisation för digitala produkter) överförs intäktsvärdet i dollar för de två valda cellerna till organisationen och affärsområdet när du klickar på menyalternativet Inbäddad DA1. Om du till exempel klickar på intäkten för digitala produkter från de två valda organisationerna (inhemsk organisation och internationell organisation) så överförs värdena $1 458 738,42 och $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"
}
]
}
]
}
]
}Använd de här stegen för att visa nyttolaster för händelser med verktygen i webbläsaren Chrome.
- I Chrome högerklickar du och väljer Inspektera källa.
- På fliken Källor högerklickar du på raden
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;och väljer Lägg till brytpunkt.När händelsedataåtgärden anropas från den inbäddade ritytan visas en nyttolastpost i sektionen Omfattning i den högra rutan i webbläsarverktygen.
- Högerklicka på nyttolastposten och välj Lagra som global variabel.
Den globala variabeln kan visas på fliken Konsol och expanderas så att den visar information om nyttolasten.
Exempel på en HTML-sida med en visualisering som tar emot händelser
Följande exempelkod visar hur du definierar en händelselyssnare för en dataåtgärd för analyshändelser. Du måste uppdatera analysinstansen och den inbäddade sökvägen till arbetsboken i det här kodexemplet. Det måste finnas en definierad händelsedataåtgärd för arbetsboken. Den händelse som det lyssnas efter kallas oracle.bitech.dataaction. När händelsen har utlösts skickas ett meddelande till konsolen.
<!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>
Du kan också ändra sektionen <script> i det föregående kodexemplet så att värdena för var dataåtgärden anropades returneras:
<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>