Podane tu informacje pozwalają dowiedzieć się więcej o osadzaniu i uruchamianiu czynności związanych z danymi z wizualizacji w zewnętrznych pojemnikach, takich jak strona HTML czy strona internetowa aplikacji.
Uwaga:
Przedstawione tu przykłady mają zastosowanie do osadzanych czynności związanych z danymi, gdy aplikacja osadzająca nie używa technologii Oracle JET. Zob.:Uruchamianie czynności związanych z danymi
Gdy zostanie wybrana czynność "Publikuj zdarzenie", nastąpi ustalenie kontekstu wizualizacji i informacja ta zostanie - w celu jej przetworzenia - przekazana do usługi czynności nawigacji. Proces usługi dla czynności nawigacji zgłosi zdarzenie o nazwie "oracle.bitech.dataaction" z ładunkiem zawierającym informację o kontekście. Zdarzenie to można subskrybować i otrzymać ładunek w wywołaniu zwrotnym zdarzenia, który to ładunek można później odpowiednio wykorzystywać.
Poniższa wizualizacja pokazuje przychód w dolarach dla linii prowadzonej działalności (takich jak Communication, Digital, Electronics) z uwzględnieniem różnych organizacji (np. Franchises Org, Inbound Org, International Org).
Format zdarzenia i ładunku oraz kontekst
Poniższy przykład przedstawia publikowanie zdarzenia, jeśli osadzona czynność związana z danymi zostanie wywołana przez jedną lub więcej komórek danych, gdy użytkownik kliknie je prawym przyciskiem myszy i z wyświetlonego menu osadzonego skoroszytu wybierze czynność związaną z danymi.
Poniższe przykłady pochodzą z pliku JSON, na przykład obitech-cca/cca/component.json
.
Format zdarzenia
"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 ładunku
{"context":[ "or": [ "and":[ {"contextParamValues":[...], "contextParamValuesKeys":[...], "colFormula":"...", "displayName":"...", "isDoubleColumn":true/false, "dataType":"..." } ] ] ] }
Przekazywanie jednej wartości z jednej kolumny w kontekście przekazywania
W tym przykładzie, gdy użytkownik kliknie komórkę kolumny, zostanie przekazany do pojemnika zewnętrznego obiekt z informacją o kontekście kolumny. W tym przypadku jest przekazywana nazwa organizacji.
{ "context": [ { "contextParamValues": [ "Inbound Org." ], "contextParamValuesKeys": [ "Inbound Org." ], "colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"", "displayName": "D3 Organization", "isDoubleColumn": false, "dataType": "varchar" } ] }
Przekazywanie jednej wartości dla każdej z kolumn w kontekście przekazywania
W tym przykładzie, gdy użytkownik kliknie na komórce kolumny (na przykład dla "Inbound Org" i produktów "Digital") i wybierze opcję "Embedded DA1", zostanie przekazana wartość przychodu w dolarach dla wybranej linii działalności i organizacji. Na przykład dla produktów "Digital" z "Inbound Org" zostałby w tym przykładzie przekazany przychód $1,458,738.42.
{ "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" } ] }
Przekazywanie wielu wartości w kontekście przekazywania
W tym przykładzie, gdy użytkownik kliknie na dwóch komórkach w wierszu (na przykład "Inbound Org" i "International Org" dla produktów "Digital") i wybierze opcję "Embedded DA1", zostanie przekazana wartość przychodu w dolarach dla dwóch wybranych komórek organizacji i linii działalności. Na przykład dla produktów "Digital" z dwóch wybranych organizacji ("Inbound Org" i "International Org") zostałyby w tym przykładzie przekazane wartości $1,458,738.42 i $915,528.97.
{ "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" } ] } ] } ] }
Przy użyciu tych etapów można wyświetlić ładunki zdarzeń przy użyciu narzędzi przeglądarki Chrome.
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;
i wybrać Dodaj punkt przerwania.
Gdy czynność danych zdarzenia zostanie wywołana z poziomu osadzonej kanwy, w sekcji Zakres w prawym okienku narzędzi przeglądarki pojawi się wpis ładunku.
Zmienną globalną można wyświetlić na karcie Konsola i rozwinąć, aby wyświetlić szczegóły ładunku.
Przykład strony HTML z wizualizacją, przyjmującej zdarzenia
Poniższy przykładowy kod przedstawia sposób definiowania nasłuchu czynności związanej z danymi zdarzenia analitycznego. W tym przykładzie kodu należy zaktualizować instancję analityczną i osadzoną ścieżkę w skoroszycie. W skoroszycie musi być zdefiniowana czynność związana z danymi zdarzenia. Nasłuchiwane zdarzenie nosi nazwę oracle.bitech.dataaction
. Po uaktywnieniu zdarzenia do konsoli wysyłany jest komunikat.
<!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>
Można również zmodyfikować sekcję <script>
w poprzednim przykładzie kodu, aby zwrócone zostały wartości miejsca wywołania czynności związanej z danymi:
<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>