V tejto časti sú uvedené informácie o vkladaní a vykonávaní akcií s dátami vo vizualizácii v rámci externých kontajnerov, ako je stránka HTML alebo webová stránka aplikácie.
Poznámka:
Príklady uvedené v tejto sekcii sa vzťahujú na vložené akcie s dátami, keď aplikácia na vkladanie nepoužíva technológiu Oracle JET. Pozrite si:Spúšťanie akcií s dátami
Keď kliknete na akciu s dátami Publikovať udalosť, zistia sa kontextové informácie pre vizualizáciu a tieto informácie sa odovzdajú do služby akcie navigácie, ktorá ich spracuje. Proces služby akcie navigácie vyvolá udalosť s názvom „oracle.bitech.dataaction“ s informáciami o payloade kontextu. Môžete sa prihlásiť na odber tejto udalosti a prijímať payload v rámci spätného volania udalosti a v prípade potreby ďalej pracovať s týmito dátami payload.
Nasledujúca vizualizácia zobrazuje výnosy v dolároch pre rôzne predmety podnikania, napríklad telekomunikácie, digitálne produkty, elektronika, naprieč organizáciami: Franchises Org, Inbound Org alebo International Org.
Formát a kontext udalosti a payloadu
Nasledujúci príklad znázorňuje publikovanie udalosti, keď je vložená akcia s dátami vyvolaná jednou alebo viacerými dátovými bunkami, na ktoré používateľ klikol pravým tlačidlom a vybral akciu s dátami z ponuky, ktorá je zobrazená vo vloženom zošite.
Príklady nižšie pochádzajú zo súboru JSON, napríklad obitech-cca/cca/component.json
.
Formát udalosti
"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" } } }
Formát payloadu
{"context":[ "or": [ "and":[ {"contextParamValues":[...], "contextParamValuesKeys":[...], "colFormula":"...", "displayName":"...", "isDoubleColumn":true/false, "dataType":"..." } ] ] ] }
Odovzdanie jednej hodnoty pre jeden stĺpec v metóde odovzdania podľa kontextu
V tomto príklade sa po kliknutí na bunku v stĺpci odovzdá objekt s kontextovými informáciami o stĺpci do externého kontajnera. V tomto prípade sa odovzdá názov organizácie.
{ "context": [ { "contextParamValues": [ "Inbound Org." ], "contextParamValuesKeys": [ "Inbound Org." ], "colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"", "displayName": "D3 Organization", "isDoubleColumn": false, "dataType": "varchar" } ] }
Odovzdanie jednej hodnoty pre každý stĺpec v metóde odovzdania podľa kontextu
V tomto príklade sa po kliknutí na bunku v stĺpci, napríklad Inbound Org a Digitálne produkty, po kliknutí na voľbu ponuky Vložené DA1 na výber vloženej akcie sa odovzdá hodnota výnosov v dolároch pre vybraný predmet podnikania a organizáciu. Napríklad v tomto príklade sa odovzdajú výnosy pre kategóriu „Digital products“ z organizácie „Inbound Org“, čiže 1 458 738,42 USD.
{ "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" } ] }
Odovzdanie viacero hodnôt v metóde odovzdania podľa kontextu
V tomto príklade sa po kliknutí na dve bunky v riadkoch (napríklad „Inbound Org“ a „International Org“ pre kategóriu „Digital products“) a následnom výbere vloženej akcie kliknutím na voľbu ponuky „Vložené DA1“ odovzdá hodnota výnosov v USD pre dve vybrané bunky pre organizáciu a predmety podnikania. Napríklad po kliknutí na výnosy pre kategóriu „Digital products“ z dvoch vybraných organizácií („Inbound Org“ a „International Org“) sa odovzdajú hodnoty 1 458 738,42 USD a 915 528,97 USD.
{ "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" } ] } ] } ] }
Pomocou týchto krokov môžete zobraziť payloady udalosti pomocou nástrojov prehľadávača Chrome:
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;
a vyberte položku Add breakpoint (Pridať bod prerušenia).
Keď je vyvolaná akcia s dátami udalosti z vloženého kresliaceho plátna, objaví sa záznam payloadu v sekcii Scope (Rozsah) v pravom podokne nástrojov prehľadávača.
Globálna premenná sa zobrazí na karte Konzola a je ju možné rozbaliť a zobraziť si detaily payloadu.
Príklad stránky HTML s vizualizáciou prijímajúcou udalosti
Nasledujúca ukážka kódu ukazuje, ako definovať prijímač udalostí pre akciu s dátami udalosti analytiky. Je potrebné aktualizovať inštanciu analytiky a vloženú cestu k zošitu v tejto ukážke kódu. Zošit musí mať definovanú akciu s dátami udalosti. Udalosť, ktorá sa bude prijímať, sa nazýva oracle.bitech.dataaction
. Keď sa spustí udalosť, do konzoly sa odošle správa.
<!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>
V predchádzajúcej ukážke kódu môžete modifikovať aj sekciu <script>
tak, aby vracala hodnoty miesta, kde bola vyvolaná akcia s dátami:
<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>