Efectuarea de acţiuni cu conţinut înglobat asupra datelor
Urmaţi informaţiile descrise aici pentru a afla mai multe despre înglobarea şi executarea acţiunilor pentru date într-o vizualizare dintr-un container extern, cum ar fi o pagină HTML sau o pagină web de aplicaţie.
Notă:
Exemplele din această secţiune se aplică acţiunilor pentru date înglobate când aplicaţia care înglobează nu utilizează tehnologia Oracle JET. Consultaţi:Efectuarea de acţiuni asupra datelor
Când faceţi clic pe acţiunea Publicare eveniment, se stabilesc informaţiile de context ale vizualizării, care sunt apoi trimise la serviciul pt. acţiunea de navigare şi procesate. Procesul pt. acţiunea de navigare din serviciu generează un eveniment numit "oracle.bitech.dataaction", cu informaţiile payloadului de context. Vă puteţi abona la acest eveniment, pt. a primi payloadul din callbackul evenimentului, şi puteţi utiliza apoi acel payload cum doriţi.
Această vizualizare arată venitul în dolari pentru domeniile de activitate, de exemplu, Comunicaţii, Digital, Electronice din organizaţiile, de exemplu, Franchises Org, Inbound Org, International Org.
Formatul şi contextul payloadului şi al evenimentului
Următorul exemplu arată publicarea unui eveniment când o acţiune de date înglobate este invocată de una sau mai multe dintre celulele de date pe care s-a făcut clic dreapta, iar acţiunea de date selectată din meniu este afişată în registrul de lucru înglobat.
Exemplele de mai jos sunt dintr-un fişier JSON, de exemplu, obitech-cca/cca/component.json.
Format eveniment
"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"
}
}
}
Format payload
{"context":[
"or": [
"and":[
{"contextParamValues":[...],
"contextParamValuesKeys":[...],
"colFormula":"...",
"displayName":"...",
"isDoubleColumn":true/false,
"dataType":"..."
}
]
]
]
}
Trimiterea unei singure valori pt. o singură coloană în "Trimitere după context"
În acest exemplu, când faceţi clic pe o celulă din coloană, obiectul cu informaţiile de context despre coloană este transmis containerului extern. În acest caz, este trimis numele organizaţiei.
{
"context": [
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}Trimiterea câte unei valori pt. fiecare coloană în "Trimitere după context"
În acest exemplu, când faceţi clic pe o celulă din coloană, de ex., pe Inbound Org. sau pe Produse Digital, atunci când faceţi clic pe opţiunea de meniu înglobată DA1 pt. a selecta acţiunea înglobată, se transmite valoarea în dolari a venitului, pentru domeniul de activitate şi organizaţia selectate. De exemplu, se trimite venitul pt. produsele Digital, din organizaţia Inbound, adică în acest exemplu, valoarea de 1.458.738,42 de dolari.
.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"
}
]
}Trimiterea mai multor valori în "Trimitere după context"
În acest exemplu, când faceţi clic pe două celule din rânduri (de ex., pe Inboung Org. şi pe International Org. pt. produsele Digital) şi faceţi clic pe opţiunea de meniu înglobată DA1 pt. a selecta acţiunea înglobată, se trimite valoarea în dolari a venitului pt. cele două celule selectate, cea pt. organizaţie şi cea pt. linia de business. De exemplu, dacă faceţi clic pe venitul pt. produsele Digital din cele două organizaţii selectate (Inboung şi International), sunt trimise valorile 1.458.738,42 şi 915.528,97 de dolari.
.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"
}
]
}
]
}
]
}Utilizaţi aceşti paşi pentru a vizualiza payloadurile evenimentelor utilizând instrumentele din browserul Chrome.
- În Chrome, faceţi clic dreapta şi selectaţi Inspectare.
- În fila Surse, faceţi clic dreapta pe linia
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;şi selectaţi Adăugare punct de întrerupere.Când acţiunea pentru datele evenimentului este invocată din canvasul imbricat, o intrare de payload va apărea în secţiunea Domeniu din panoul din dreapta al instrumentelor browserului.
- Faceţi clic dreapta pe intrarea de payload şi selectaţi Stocare ca variabilă globală.
Variabila globală poate fi vizualizată în fila Consolă şi extinsă pentru a vizualiza detaliile payloadului.
Exemplu de pagină HTML cu vizualizare care primeşte evenimente
Următorul exemplu de cod ilustrează cum se defineşte un listener de eveniment pentru acţiunea pentru date a unui eveniment de analiză. Trebuie să actualizaţi instanţa de analiză şi calea imbricată către registrul de lucru în acest exemplu de cod. Registrul de lucru trebuie să aibă o acţiune pentru datele evenimentului definită. Evenimentul care este ascultat se numeşte oracle.bitech.dataaction. Când evenimentul este declanşat, un mesaj este trimis către consolă.
<!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>
De asemenea, puteţi modifica secţiunea <script> din exemplul de cod anterior pentru a returna valorile de acolo de unde a fost invocată acţiunea pentru date:
<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>