Gegevensacties uitvoeren die ingesloten inhoud bevatten
Volg de hier beschreven informatie over het insluiten en uitvoeren van gegevensacties in een visualisatie binnen externe containers, zoals een HTML-pagina of een applicatiewebpagina.
Opmerking:
De voorbeelden in deze sectie zijn van toepassing op acties voor ingesloten gegevens als de Oracle JET technologie niet wordt gebruikt in de insluitingsapplicatie. Zie voor meer informatie:Gegevensacties uitvoeren
Als u op een gegevensactie 'Event publiceren' klikt, worden de contextgegevens voor de visualisatie opgehaald en ter verwerking doorgegeven aan de navigatieactieservice. Het serviceproces voor de navigatieactie initieert vervolgens een event met de naam 'oracle.bitech.dataaction', dat de payload voor de contextgegevens bevat. U kunt zich abonneren op dit event om de payload in de eventcallback te ontvangen en de payload verder waar nodig gebruiken.
De volgende visualisatie toont de opbrengsten (in dollars) voor bedrijfsactiviteiten (bijvoorbeeld Communication, Digital, Electronics) tussen organisaties (bijvoorbeeld Franchises Org, Inbound Org, International Org).
Formaat en context van event en payload
In het volgende voorbeeld wordt het publiceren van een event gedemonstreerd wanneer de ingesloten gegevensactie wordt aangeroepen omdat op een of meer gegevenscellen met de rechtermuisknop is geklikt, waarna de gegevensactie is geselecteerd in het menu dat in de ingesloten werkmap wordt weergegeven.
De voorbeelden hieronder komen uit een JSON-bestand, bijvoorbeeld obitech-cca/cca/component.json.
Eventformaat
"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"
}
}
}
Payloadformaat
{"context":[
"or": [
"and":[
{"contextParamValues":[...],
"contextParamValuesKeys":[...],
"colFormula":"...",
"displayName":"...",
"isDoubleColumn":true/false,
"dataType":"..."
}
]
]
]
}
Eén waarde voor één kolom doorgeven in de context voor doorgeven
In dit voorbeeld wordt, wanneer u op een kolomcel klikt, het object met de contextinformatie over de kolom doorgegeven aan de externe container. In dit geval wordt de organisatienaam doorgegeven.
{
"context": [
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}Eén waarde voor elke kolom doorgeven in de context voor doorgeven
In dit voorbeeld wordt, wanneer u op een kolomcel (bijvoorbeeld 'Inbound Org' en 'Digital products') en op de menuoptie 'Ingesloten GA1' klikt om de ingesloten actie te selecteren, de opbrengstwaarde in dollars doorgegeven voor de geselecteerde bedrijfstak en organisatie. Zo wordt bijvoorbeeld de opbrengst voor Digital products van Inbound Org doorgegeven, wat in dit voorbeeld $1.458.738,42 is.
.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"
}
]
}Meerdere waarden doorgeven in de context voor doorgeven
In dit voorbeeld wordt, wanneer u op twee kolomcellen (bijvoorbeeld Inbound Org en International Org voor Digital-producten) en op de menuoptie 'Ingesloten GA1' klikt om de ingesloten actie te selecteren, de opbrengstwaarde in dollars doorgegeven voor de twee geselecteerde cellen voor organisatie en bedrijfsactiviteit. Als u bijvoorbeeld op de opbrengst voor Digital-producten van de twee geselecteerde organisaties (Inbound Org en International Org) klikt, worden de waarden $1.458.738,42 en $915.528,97 doorgegeven.
.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"
}
]
}
]
}
]
}Gebruik deze stappen om de payloads van events te bekijken met de Chrome-browserhulpmiddelen.
- Klik in Chrome met de rechtermuisknop en selecteer Bron inspecteren.
- Klik in het tabblad Bronnen met de rechtermuisknop op de regel
console.log("Voeg een onderbrekingspunt toe op deze regel en gebruik de debugger van de browserhulpmiddelen om de payload te bekijken") ;en selecteer Onderbrekingspunt toevoegen.Wanneer de gegevensactie van het event vanuit het ingesloten canvas wordt aangeroepen, wordt er in de sectie Bereik in het rechterdeelvenster van de browserhulpmiddelen een payloadinvoer weergegeven.
- Klik met de rechtermuisknop op de payloadinvoer en selecteer Opslaan als algemene variabele.
De algemene variabele kan in het tabblad Console worden bekeken en uitgevouwen om details van de payload te bekijken.
Voorbeeld van een HTML-pagina met visualisatie die events ontvangt
De volgende voorbeeldcode illustreert hoe u een eventlistener definieert voor de gegevensactie van een analytisch event. De analytische instance en het ingesloten pad naar de werkmap moeten in dit codevoorbeeld worden bijgewerkt. In de werkmap moet de gegevensactie voor een event zijn gedefinieerd. Het event waarnaar wordt geluisterd, wordt oracle.bitech.dataaction genoemd. Wanneer het event in gang is gezet, wordt er een bericht naar de console verzonden.
<!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>
U kunt ook de sectie <script> in het vorige codevoorbeeld wijzigen om de waarden te retourneren van waar de gegevensactie werd aangeroepen.
<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>