Utføre datahandlinger som inneholder innebygd innhold
Følg opplysningene her hvis du vil vite mer om innebygging og utførelse av datahandlinger i en visualisering i eksterne beholdere, for eksempel en HTML-side eller applikasjonsnettside.
Merknad:
Eksemplene i denne delen gjelder for innebygde datahandlinger når innebyggingsapplikasjonen ikke bruker Oracle JET-teknologi. Se:Utføre datahandlinger
Når du klikker på en datahandling for publisering av hendelse, bestemmer den kontekstopplysningene for visualiseringen og sender opplysningene til navigeringshandlingstjenesten for behandling. Tjenesteprosessen for navigeringshandlingen fremkaller en hendelse med navnet oracle.bitech.dataaction, med nyttelastopplysningene for konteksten. Du kan abonnere på denne hendelsen og motta nyttelasten i tilbakekallet av hendelsen, og du kan bruke nyttelasten ytterligere etter behov.
Visualiseringen nedenfor viser omsetningen i dollar for forretningsområder som Communication, Digital og Electronics på tvers av organisasjoner, for eksempel Franchises Org, Inbound Org og International Org.
Hendelsesformat, nyttelastformat og kontekst
Eksemplet nedenfor viser publisering av en hendelse når den innebygde datahandlingen startes av én eller flere dataceller brukeren har høyreklikket på, og datahandlingen velges på menyen som vises i den innebygde arbeidsboken.
Eksemplene nedenfor er fra en JSON-fil, for eksempel obitech-cca/cca/component.json.
Hendelsesformat
"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"
}
}
}
Nyttelastformat
{"context":[
"or": [
"and":[
{"contextParamValues":[...],
"contextParamValuesKeys":[...],
"colFormula":"...",
"displayName":"...",
"isDoubleColumn":true/false,
"dataType":"..."
}
]
]
]
}
Sende en enkeltverdi for en enkeltkolonne i sendingskonteksten
Når du klikker på en kolonnecelle i dette eksemplet, sendes objektet med kontekstopplysningene om kolonnen til den eksterne beholderen. I dette tilfellet sendes organisasjonsnavnet.
{
"context": [
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}Sende en enkeltverdi for hver kolonne i sendingskonteksten
Når du klikker på en kolonnecelle i dette eksemplet, for eksempel Inbound Org og Digital, sendes omsetningsverdien i dollar for det valgte forretningsområdet og den valgte organisasjonen når du klikker på menyvalget Innebygd DA1 og velger den innebygde handlingen. Omsetningen for Digital-produkter sendes for eksempel fra Inbound Org, som i dette eksemplet er 1 458 738,42 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"
}
]
}Sende flere verdier i sendingskonteksten
Når du klikker i to radceller i dette eksemplet (for eksempel Inbound Org og International Org for Digital-produkter), klikker på menyvalget Innebygd DA1 og velger den innebygde handlingen, sendes omsetningsverdien i dollar for de to valgte cellene for organisasjonen og forretningsområdene. Hvis du for eksempel klikker på omsetningen for Digital-produkter fra de to valgte organisasjonene (Inbound Org og International Org), sendes verdiene 1 458 738,42 og 915 528,97 dollar.
.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"
}
]
}
]
}
]
}Bruk disse trinnene til å vise hendelsesnyttelaster ved hjelp av verktøy i nettleseren Chrome.
- I Chrome høyreklikker du og velger Inspect Source.
- Høyreklikk på linjen
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;i fanen Sources, og velg Add breakpoint.Når hendelsesdatahandlingen startes fra det innebygde lerretet, vises en nyttelastoppføring under Scope i ruten til høyre i nettleserverktøyene.
- Høyreklikk på nyttelastoppføringen, og velg Store as global variable.
Den globale variabelen kan vises i fanen Console og utvides for å vise detaljene om nyttelasten.
Eksempel på en HTML-side med visualisering som mottar hendelser
Eksempelkoden nedenfor illustrerer hvordan du definerer en hendelseslytter for en datahandling for en analysehendelse. Du må oppdatere analyseforekomsten og den innebygde banen til arbeidsboken i dette kodeeksempelet. Arbeidsboken må ha en hendelsesdatahandling definert. Hendelsen det lyttes etter, heter oracle.bitech.dataaction. Når hendelsen er utløst, sendes det en melding 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å endre seksjonen <script> i kodeeksemplet ovenfor for å returnere verdiene for hvor datahandlingen ble startet:
<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>