Executar Ações de Dados que Têm Conteúdo Incorporado
Siga as informações descritas aqui para saber como incorporar e executar ações de dados em uma visualização dentro de contêineres externos, como uma página HTML ou uma página web de aplicativo.
Nota:
Os exemplos desta seção aplicam-se às ações de dados incorporadas quando o aplicativo de incorporação não usar a tecnologia Oracle JET. Consulte:Executando Ações de Dados
Ao clicar em uma ação de dados Publicar Evento, ela determina as informações de contexto da visualização e transmite essas informações ao serviço de ação de navegação para processá-las. O processo de serviço da ação de navegação levanta um evento chamado “oracle.bitech.dataaction” com as informações de payload do contexto. Você pode assinar esse evento e receber o payload no retorno de chamada do evento, além de poder fazer melhor uso do payload, conforme necessário.
A visualização a seguir mostra a receita em Dólares para as linhas de negócios, por exemplo, Comunicação, Digital, Eletrônicos, em organizações, por exemplo, Franchises Org, Inbound Org, International Org.
Formato e Contexto de Evento e Payload
O exemplo a seguir demonstra a publicação de um evento quando a ação de dados incorporada é chamada por uma ou mais células de dados que foram clicadas com o botão direito do mouse e a ação de dados selecionada no menu que é exibido na pasta de trabalho incorporada.
Os exemplos a seguir são de um arquivo JSON, por exemplo, 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 Payload
{"context":[
"or": [
"and":[
{"contextParamValues":[...],
"contextParamValuesKeys":[...],
"colFormula":"...",
"displayName":"...",
"isDoubleColumn":true/false,
"dataType":"..."
}
]
]
]
}
Transmitindo um único valor de uma única coluna no Contexto Transmitir por
Neste exemplo, quando você clica em uma célula de coluna, o objeto com as informações de contexto sobre a coluna é passado para o contêiner externo. Nesse caso, o nome da organização é transmitido.
{
"context": [
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}Transmitindo um único valor de cada coluna no Contexto Transmitir por
Neste exemplo, quando você clica em uma célula de coluna, por exemplo, Org. de Entrada e produtos Digitais, é transmitido o valor da receita em dólares para a linha selecionada de negócios e organização quando você clica na opção de menu DA1 Incorporado para selecionar a ação incorporada. Por exemplo, é transmitida a receita de produtos Digitais da Inbound Org, que é $1, 458,738.42, neste exemplo.
.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"
}
]
}Transmitindo diversos valores no Contexto Transmitir por
Neste exemplo, quando você clica em duas células de linha (por exemplo, Inbound Org e International Org para produtos Digitais) e clica na opção de menu DA1 Incorporado para selecionar a ação incorporada, é transmitido o valor de receita em dólares das duas células selecionadas para organização e linhas de negócios. Por exemplo, um clique na receita de produtos Digitais das duas organizações selecionadas (Inbound Org e International Org) transmite os valores $1, 458,738.42 e $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"
}
]
}
]
}
]
}Use essas etapas para ver payloads de evento usando ferramentas do browser Chrome.
- No Chrome, clique com o botão direito do mouse e selecione Inspecionar.
- Na guia Origens, clique com o botão direito do mouse na linha
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;e selecione Adicionar quebra.Quando a ação de dados do evento for chamada pela tela incorporada, uma entrada de payload vai aparecer na seção Escopo no painel direito das ferramentas do browser.
- Clique com o botão direito do mouse na entrada de payload e selecione Armazenar como variável global.
A variável global pode ser exibida na guia Console e expandida para ver detalhes do payload.
Exemplo de Página HTML com Visualização que Recebe Eventos
A amostra de código a seguir ilustra como definir um listener de evento para uma ação de dados de evento analítico. Você deve atualizar a instância analítica e o caminho incorporado para a pasta de trabalho nesta amostra de código. A pasta de trabalho deve ter uma ação de dados de evento definida. O evento no qual está sendo feito o listening é denominado oracle.bitech.dataaction. Quando o evento tiver sido disparado, uma mensagem será enviada à console.
<!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>
Você também pode modificar a seção <script> na amostra de código anterior para retornar os valores de onde a ação de dados foi chamada:
<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>