Eseguire azioni dati con contenuto incorporato
Attenersi a quanto descritto di seguito per le informazioni su come incorporare ed eseguire azioni dati in una visualizzazione all'interno di contenitori esterni, ad esempio una pagina HTML o una pagina Web dell'applicazione.
Nota:
Gli esempi riportati in questa sezione sono applicabili alle azioni dati incorporate quando l'applicazione di incorporamento non utilizza la tecnologia Oracle JET. Vedere:Esecuzione di azioni dati
Quando si fa clic su un'azione dati Pubblica evento, l'azione determina le informazioni di contesto per la visualizzazione e passa tali informazioni al servizio di azione navigazione per l'elaborazione. L'elaborazione del servizio per l'azione navigazione pubblica un evento denominato "oracle.bitech.dataaction" con le informazioni di payload del contesto. È possibile eseguire la sottoscrizione a questo evento e ricevere il payload nel callback dell'evento nonché utilizzare ulteriormente il payload in base alle esigenze.
La visualizzazione riportata di seguito mostra i ricavi in dollari relativi ad alcuni settori di attività, ad esempio Communication, Digital, Electronics e così via, per più organizzazioni, ad esempio Franchises Org, Inbound Org, International Org.
Formato e contesto dell'evento e del payload
L'esempio riportato di seguito illustra la pubblicazione di un evento quando l'azione dati incorporata viene richiamata da una o più celle dati su cui è stato fatto clic con il pulsante destro del mouse e dall'azione dati selezionata dal menu visualizzato nella cartella di lavoro incorporata.
Gli esempi seguenti sono estratti da un file JSON, ad esempio obitech-cca/cca/component.json.
Formato dell'evento
"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"
}
}
}
Formato del payload
{"context":[
"or": [
"and":[
{"contextParamValues":[...],
"contextParamValuesKeys":[...],
"colFormula":"...",
"displayName":"...",
"isDoubleColumn":true/false,
"dataType":"..."
}
]
]
]
}
Passaggio di un valore singolo per una colonna singola nel contesto Passa in base a
In questo esempio, quando si fa clic su una cella di colonna, l'oggetto con le informazioni di contesto relative alla colonna viene passato al contenitore esterno. In questo caso viene passato il nome dell'organizzazione.
{
"context": [
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}Passaggio di un valore singolo per ogni colonna nel contesto Passa in base a
In questo esempio, quando si fa clic su una cella di colonna, ad esempio Inbound Org e prodotti Digital, l'elemento passato quando si fa clic sull'opzione di menu Embedded DA1 per selezionare l'azione incorporata è il valore dei ricavi in dollari per il settore di attività e l'organizzazione selezionati. Nell'esempio illustrato viene passato il valore dei ricavi per i prodotti Digital da Inbound Org, ovvero 1,458,738.42 di dollari.
.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"
}
]
}Passaggio di più valori nel contesto Passa in base a
In questo esempio, quando si fa clic su due celle di riga, ad esempio Inbound Org e International Org per i prodotti Digital, e si fa clic sull'opzione di menu Embedded DA1 per selezionare l'azione incorporata, l'elemento passato è il valore dei ricavi in dollari per le due celle selezionate per l'organizzazione e i settori di attività. Ad esempio, se si fa clic sui ricavi per i prodotti Digital delle due organizzazioni selezionate (Inbound Org e International Org) vengono passati i valori 1,458,738.42 e 915,528.97 dollari.
.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"
}
]
}
]
}
]
}Seguire questi passi per visualizzare i payload degli eventi utilizzando gli strumenti del browser Chrome.
- In Chrome, fare clic con il pulsante destro del mouse e selezionare Ispeziona origine.
- Nella scheda Origini fare clic con il pulsante destro del mouse sulla riga
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;e selezionare Aggiungi breakpoint.Quando l'azione dati dell'evento viene richiamata dallo sfondo incorporato, viene visualizzata una voce di payload nella sezione Ambito nel riquadro destro degli strumenti del browser.
- Fare clic con il pulsante destro del mouse sulla voce del payload e selezionare Memorizza come variabile globale.
La variabile globale può essere visualizzata nella scheda Console ed espansa per visualizzare i dettagli del payload.
Esempio di pagina HTML con visualizzazione che riceve gli eventi
Nel codice di esempio seguente viene illustrato come definire un listener di eventi per un'azione dati dell'evento di analitica. È necessario aggiornare l'istanza di analitica e il percorso incorporato della cartella di lavoro in questo esempio di codice. Per la cartella di lavoro deve essere definita un'azione dati dell'evento. L'evento per il quale si è in ascolto è denominato oracle.bitech.dataaction. Una volta attivato l'evento, viene inviato un messaggio alla console.
<!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>
Inoltre, è possibile modificare la sezione <script> nell'esempio di codice precedente per restituire i valori del punto in cui l'azione dati è stata richiamata:
<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>