Следуйте приведенным здесь инструкциям, чтобы научиться встраивать и выполнять действия с данными в визуализации внутри внешних контейнеров, таких как страница HTML или веб-страница приложения.
Примечание.:
Примеры в этом разделе относятся к действиям со встроенными данными, когда приложение для встраивания не использует технологию Oracle JET. См. также:Выполнение действий с данными
При нажатии на действие "Событие публикации" отображаются контекстные сведения для визуализации, которые передаются в сервис действий навигации для обработки. Процесс сервиса навигации вызывает событие oracle.bitech.dataaction с контекстными полезными данными. Пользователь может подписаться на это событие, чтобы получать полезные данные во время обратного вызова события и использовать их в дальнейшем.
На следующей визуализации отображаются сведения о доходах (в долларах) для направлений бизнеса (например, средства связи, цифровые технологии, электроника) в разных организациях (например, Franchises Org, Inbound Org, International Org).
Формат и контекст событий и полезных данных
В приведенном ниже примере показана публикация события, когда действие со встроенными данными вызывается из контекстного меню одной или нескольких ячеек данных или при выборе действия в меню встроенной рабочей книги.
Эти примеры созданы на основе файла JSON (например, obitech-cca/cca/component.json
).
Формат события
"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" } } }
Формат полезных данных
{"context":[ "or": [ "and":[ {"contextParamValues":[...], "contextParamValuesKeys":[...], "colFormula":"...", "displayName":"...", "isDoubleColumn":true/false, "dataType":"..." } ] ] ] }
Передача одного значения для одного столбца в контексте
В этом примере показано, что при нажатии на ячейку столбца объект с контекстной информацией о столбце передается во внешний контейнер. В данном случае передается имя организации.
{ "context": [ { "contextParamValues": [ "Inbound Org." ], "contextParamValuesKeys": [ "Inbound Org." ], "colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"", "displayName": "D3 Organization", "isDoubleColumn": false, "dataType": "varchar" } ] }
Передача одного значения для каждого столбца в контексте
В этом примере показано, какие данные передаются при нажатии на ячейку столбца (например, "Inbound Org" и "Цифровые решения"). Если выбрать пункт меню "Встроенный DA1" в качестве действия со встроенными данными, передается значение дохода в долларах для выбранного направления бизнеса и организации. Например, в данном случае передается доход от цифровых решений компании Inbound Org, который составляет $1 458 738,42.
{ "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" } ] }
Передача нескольких значений в контексте
В этом примере показано, какие данные передаются при нажатии на две ячейки строки (например, "Inbound Org" и "International Org" для категории "Цифровые решения"). Если выбрать пункт меню "Встроенный DA1" в качестве действия со встроенными данными, передается значение дохода в долларах для двух выбранных организаций и направления бизнеса. Например, если выбрать доход от цифровых решений для двух указанных организаций (Inbound Org и International Org), передаются значения $1 458 738,42 и $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" } ] } ] } ] }
Используйте эти шаги, чтобы посмотреть полезные данные событий с помощью инструментов в браузере Chrome.
console.log("To view the payload, add a breakpoint on this line and use the browser tools debugger") ;
и выберите Add breakpoint.
Когда действие с данными события будет вызвано из встроенного холста, в разделе Scope в правой панели инструментов браузера появится запись полезных данных.
Глобальную переменную можно посмотреть на вкладке Console и развернуть, чтобы увидеть подробную информацию о полезной нагрузке.
Пример страницы HTML Page с визуализацией, получающей события
Следующий пример кода показывает, как определить прослушиватель событий для действия с данными события аналитики. Необходимо обновить в примере кода экземпляр аналитики и встроенный путь к рабочей книге. В рабочей книге должно быть определено действие с данными события. Прослушиваемое событие называется oracle.bitech.dataaction
. Когда происходит событие, на консоль отправляется сообщение.
<!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>
Можно также изменить раздел <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("******************************** "); 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>