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.
{ "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.
{ "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 configurar a página em HTML de exemplo mostrada abaixo.
Acrescente ou modifique a localização do percurso do livro.
Consulte <======== 1
abaixo.
Subscreva o evento publicado denominado 'oracle.bitech.dataaction'.
Consulte <======== 2
abaixo.
Defina um listener de eventos e uma callback de evento.
Consulte <======== 3
abaixo.
Exemplo de uma Página em HTML com uma Visualização que Recebe Eventos
A página em HTML seguinte tem uma visualização incorporada e pode receber eventos. A página em HTML está configurada para efetuar listen do 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>