Udføre datahandlinger, der indeholder integreret indhold
Følg de oplysninger, der vises her, for at få mere at vide om integration og udførelse af datahandlinger i en visualisering i eksterne containere såsom en HTML-side eller websiden for en applikation.
Bemærk:
Eksemplerne i dette afsnit gælder for integrerede datahandlinger, når integreringsapplikationen ikke bruger Oracle JET-teknologi. Se:Udførelse af datahandlinger
Når du klikker på en datahandling af typen Publicer begivenhed, bestemmer den kontekstoplysningerne for visualiseringen og overfører disse oplysninger til navigationshandlingstjenesten, som behandler dem. Navigationshandlingens tjenesteproces fremkalder en begivenhed kaldet "oracle.bitech.dataaction" med kontekst-payload-oplysningerne. Du kan abonnere på denne begivenhed og modtage payloadet i begivenhedens tilbagekald, og du kan benytte payloadet til yderligere formål efter behov.
Følgende visualisering viser indtægten i dollars for forskellige forretningsområder, for eksempel Communication, Digital og Electronics, på tværs af organisationer, for eksempel Franchises Org, Inbound Org og International Org.
Begivenheds- og payload-format og -kontekst
I det følgende eksempel demonstreres publicering af en begivenhed, når den indlejrede datahandling kaldes via højreklik på en eller flere dataceller, og datahandlingen vælges i den menu, der vises i den integrerede projektmappe.
Eksemplerne nedenfor er fra en JSON-fil, for eksempel obitech-cca/cca/component.json.
Begivenhedsformat
"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":"..."
}
]
]
]
}
Overførsel af en enkelt værdi for en enkelt kolonne i konteksten Overfør efter
Når der i dette eksempel klikkes på en kolonnecelle, videregives objektet med kontekstoplysninger om kolonnen til den eksterne container. I dette tilfælde overføres organisationsnavnet.
{
"context": [
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}Overførsel af en enkelt værdi for hver kolonne i konteksten Overfør efter
Når der i dette eksempel klikkes på en kolonnecelle, for eksempel Inbound Org eller Digital products, er det, der overføres, når der klikkes på menupunktet Embedded DA1 til valg af den indlejrede handling, indtægtsværdien i dollars for det valgte forretningsområde og den valgte organisation. For eksempel overføres indtægten for Digital products fra Inbound Org, og den er i eksemplet 1.458.738,42 dollars.
.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"
}
]
}Overførsel af flere værdier i konteksten Overfør efter
Når der i dette eksempel klikkes på to rækkeceller (for eksempel Inbound Org og International Org for Digital-produkter) og derefter klikkes på menupunktet Embedded DA1 for at vælge den indlejrede handling, er det, der overføres, indtægtsværdien i dollars for de to valgte celler for organisation og forretningsområder. For eksempel overføres værdierne 1.458.738,42 dollars og 915.528,97 dollars, når der klikkes på indtægten for Digital products fra de to valgte organisationer (Inbound Org og International Org).
.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"
}
]
}
]
}
]
}Brug disse trin til at se begivenheds-payloads ved hjælp af Chrome-browserværktøjer.
- Højreklik i Chrome, og vælg Undersøg.
- Højreklik under fanen Kilder på linjen
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;, og vælg Tilføj stoppunkt.Når begivenhedsdatahandlingen kaldes fra det integrerede kanvas, vises en payload-post i sektionen Omfang i højre rude i browserværktøjerne.
- Højreklik på payload-posten, og vælg Gem som global variabel.
Den globale variabel kan ses på fanen Konsol og udvides til at vise detaljer om payloadet.
Eksempel på en HTML-side med visualisering, der modtager begivenheder
Følgende eksempelkode illustrerer, hvordan du definerer en begivenheds-listener for en analysebegivenheds datahandling. Du skal opdatere analyseinstansen og den integrerede sti til projektmappen i dette kodeeksempel. Projektmappen skal have en defineret datahandling for begivenheden. Den begivenhed, der lyttes til, kaldes oracle.bitech.dataaction. Når begivenheden er udløst, sendes en meddelelse til konsollen.
<!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 også modificere sektionen <script> i det tidligere kodeeksempel for at returnere værdierne for, hvor datahandlingen blev kaldt:
<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>