Executar Ações de Dados Com Conteúdo Incorporado
Siga as informações descritas aqui para obter mais informações sobre a incorporação e execução de ações de dados numa visualização no âmbito de containers externos, tais como uma página HTML ou uma página na Web da aplicação.
Nota:
Os exemplos nesta secção aplicam-se a ações de dados incorporadas quando a aplicação de incorporação não utiliza tecnologia Oracle JET. Consulte:Executar Ações de Dados
Quando clica numa ação de dados Publicar Evento, esta determina as informações de contexto da visualização e transmite-as ao serviço de ações de navegação para processamento. O processo do serviço da ação de navegação gera um evento denominado "oracle.bitech.dataaction" com as informações do payload de contexto. Pode subscrever este evento e receber o payload na callback do evento. Também pode utilizar o payload noutras áreas, conforme necessário.
A visualização seguinte mostra as receitas em dólares para as linhas de negócio, por exemplo, Communication, Digital, Electronics, entre as organizações, por exemplo, Franchises Org, Inbound Org, International Org.
Formato e Contexto do Evento e do Payload
O exemplo seguinte demonstra a publicação de um evento quando a ação de dados incorporada é invocada por uma ou mais células de dados nas quais se clicou com o botão direito do rato e a ação de dados selecionada no menu apresentado no livro incorporado.
Os exemplos abaixo são de um ficheiro JSON, por exemplo, obitech-cca/cca/component.json.
Formato do 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 do Payload
{"context":[
"or": [
"and":[
{"contextParamValues":[...],
"contextParamValuesKeys":[...],
"colFormula":"...",
"displayName":"...",
"isDoubleColumn":true/false,
"dataType":"..."
}
]
]
]
}
Transmitir um único valor para uma única coluna no Contexto de Transmissão
Neste exemplo, quando clica numa célula da coluna, o objeto com as informações de contexto sobre a coluna é transmitido ao container externo. Neste caso, é transmitido o nome da organização.
{
"context": [
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}Transmitir um único valor para cada coluna no Contexto de Transmissão
Neste exemplo, quando clica numa célula da coluna, por exemplo, Inbound Org e produtos Digital, o que é transmitido quando clica na opção de menu Embedded DA1 para selecionar a ação incorporada é o valor das receitas em dólares para a linha de negócio e organização selecionadas. Por exemplo, são transmitidas as receitas para os produtos Digital da Inbound Org, que correspondem a $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"
}
]
}Transmitir vários valores no Contexto de Transmissão
Neste exemplo, quando clica em duas células da linha (por exemplo, Inbound Org e International Org para produtos Digital) e clica na opção de menu Embedded DA1 para selecionar a ação incorporada, o que é transmitido é o valor das receitas em dólares para as duas células selecionadas de organização e linhas de negócio. Por exemplo, se clicar nas receitas dos produtos Digital das duas organizações selecionadas (Inbound Org e International Org), são transmitidos 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"
}
]
}
]
}
]
}Utilize estes passos para visualizar os payloads de eventos utilizando as ferramentas do browser Chrome.
- No Chrome, clique com o botão direito do rato e selecione Inspecionar.
- No separador Origens, clique com o botão direito do rato na linha
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;e selecione Adicionar ponto de interrupção.Quando a ação de dados do evento for invocada a partir da tela incorporada, será apresentada uma entrada do payload na secção Âmbito no painel direito das ferramentas do browser.
- Clique com o botão direito do rato na entrada do payload e selecione Armazenar como variável global.
A variável global pode ser visualizada no separador Consola e expandida para visualizar os detalhes do payload.
Exemplo de uma Página em HTML com uma Visualização que Recebe Eventos
O código de exemplo seguinte ilustra como definir um listener de eventos para uma ação de dados de evento do Analytics. Deve atualizar a instância do Analytics e o percurso incorporado para o livro neste exemplo de código. O livro deve ter uma ação de dados de evento definida. O evento que está a ser monitorizado chama-se oracle.bitech.dataaction. Quando o evento é acionado, é enviada uma mensagem para a 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>
Também pode modificar a secção <script> no exemplo de código anterior para devolver os valores de onde a ação de dados foi invocada:
<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>