Ejecución de acciones de datos con contenido embebido
Siga las indicaciones que se describen aquí para obtener más información sobre cómo incrustar y ejecutar acciones de datos en una visualización en contenedores externos como una página HTML o una página web de aplicación.
Nota:
Los ejemplos de esta sección se aplican a acciones de datos embebidas cuando la aplicación embebida no utiliza la tecnología de Oracle JET. Consulte:Ejecución de acciones de datos
Al hacer clic en una acción de datos Publicar evento, se determina la información de contexto de la visualización, que se transfiere al servicio de acción de navegación para procesarla. El proceso de servicio de la acción de navegación inicia un evento con nombre “oracle.bitech.dataaction” con la información de carga útil de contexto. Puede suscribirse al evento y recibir la carga útil en la devolución de llamada del mismo, así como hacer más uso de la carga útil según sea necesario.
La siguiente visualización muestra los ingresos en dólares de las líneas de negocio, por ejemplo, Comunicación, Digital o Electrónica, en organizaciones, como Organización de franquicias, Organización entrante u Organización internacional.
Contexto y formato de carga útil y de evento
Los siguientes ejemplos demuestran la publicación de un evento cuando la acción de datos embebida ha sido llamada por una o más celdas de datos en las que se ha hecho clic con el botón derecho y se ha seleccionado la acción de datos en el menú que se muestra en el libro de trabajo embebido.
Los ejemplos que se muestran a continuación son de un archivo JSON, por ejemplo, obitech-cca/cca/component.json.
Formato de 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 de carga útil
{"context":[
"or": [
"and":[
{"contextParamValues":[...],
"contextParamValuesKeys":[...],
"colFormula":"...",
"displayName":"...",
"isDoubleColumn":true/false,
"dataType":"..."
}
]
]
]
}
Transferencia de un solo valor de una columna única en el contexto Transferir por
En este ejemplo, al hacer clic en una celda de columna, se transfiere el objeto con información de contexto sobre la columna al contenedor externo. En este caso, se transfiere el nombre de la organización.
{
"context": [
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}Transferencia de un solo valor de cada columna en el contexto Transferir por
En este ejemplo, al hacer clic en una celda de columna, por ejemplo, Organización entrante y productos digitales, lo que se transfiere al hacer clic en la opción de menú DA1 embebida para seleccionar la acción embebida es el valor del ingreso, en dólares, de la organización y línea de negocio seleccionadas. Por ejemplo, el ingreso de los productos digitales de la organización entrante se ha transferido, y en el ejemplo presenta un valor de 1 458 738,42 $.
.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"
}
]
}Transferencia de varios valores en el contexto Transferir por
En este ejemplo, al hacer clic en dos celdas de fila (por ejemplo, Organización entrante y Organización internacional para productos digitales) y hacer clic en la opción de menú DA1 embebida para seleccionar la acción embebida, lo que se transfiere es el valor del ingreso, en dólares, de las dos celdas seleccionadas para la organización y las líneas de negocio. Por ejemplo, si se hace clic en el ingreso de los productos digitales de las dos organizaciones seleccionadas (Organización entrante y Organización internacional), se transfieren los valores 1 458 738,42 $ y 915 528,97 $.
.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"
}
]
}
]
}
]
}Siga estos pasos para ver cargas útiles de evento utilizando las herramientas del explorador Chrome.
- En Chrome, haga clic con el botón derecho y seleccione Inspect Source.
- En el separador Sources, haga clic con el botón derecho en la línea
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;y seleccione Add breakpoint.Cuando se llama a la acción de datos de evento desde el lienzo embebido, aparece una entrada de carga útil en la sección Scope del panel de la derecha de las herramientas del explorador.
- Haga clic con el botón derecho en la entrada de carga útil y seleccione Store as global variable.
La variable global se puede ver en el separador Console y se puede ampliar para ver los detalles de la carga útil.
Ejemplo de página HTML con visualización que recibe eventos
El siguiente código de ejemplo ilustra cómo definir un listener de evento para una acción de datos de evento de análisis. Debe actualizar la instancia de análisis y la ruta embebida al libro de trabajo en este ejemplo de código. El libro de trabajo debe tener una acción de datos de evento definida. El evento que se va a recibir se denomina oracle.bitech.dataaction. Cuando se dispara el evento, se envía un mensaje a la consola.
<!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>
También puede modificar la sección <script> d el ejemplo de código anterior para devolver los valores del lugar en el que se ha llamada a la acción de datos.
<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>