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 configurar la página HTML de ejemplo que se muestra a continuación.
-
Agregue o modifique la ubicación de la ruta del libro de trabajo.
Consulte
<======== 1a continuación. -
Suscríbase al evento publicado denominado "oracle.bitech.dataaction".
Consulte
<======== 2a continuación. -
Defina un listener de evento y una devolución de llamada de evento.
Consulte
<======== 3a continuación.
Ejemplo de página HTML con visualización que recibe eventos
La siguiente página HTML tiene una visualización embebida y puede recibir eventos. La página HTML está configurada para recibir el evento “oracle.bitech.dataaction.”
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"><html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Standalone DV CCA Demo</title>
<script src="http://hostname:port/bali/ui/api/v1/plugins/embedding/standalone/embedding.js" type="text/javascript"></script>
</head>
<body>
<h1>Standalone DV CCA Embedded Data Action Demo</h1>
<div id="mydiv" style="position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)" >
<oracle-dv project-path="/Shared Folders/RR/sample"></oracle-dv> <=============== 1
</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'; <========== 2
var element = document.getElementById("mydiv");
if (element) {
var oEventListener = element.addEventListener(eventName, function (e) { <================= 3
console.log("***** Payload from DV ***** ");
console.log("eventName = " + e.detail.eventName);
console.log("payload = " + JSON.stringify(e.detail.payload));
console.log("***** Payload from DV end ***** ");
}, true);
}
</script>
</body>
</html>