Execute Data Actions that Contain Embedded Content
Follow the information described here to learn about embedding and executing data actions in a visualization within external containers such as an HTML page or an application web page.
Note:
The examples in this section apply to embedded data actions when the embedding application doesn’t use Oracle JET technology. See:Executing Data Actions
When you click a Publish Event data action, it determines the context information for the visualization and passes that information to the navigation action service to process it. The service process for the navigation action raises an event called “oracle.bitech.dataaction” with the context payload information. You can subscribe to this event and receive the payload in the event callback, and you can make further use of the payload as required.
The following visualization shows the revenue in Dollars for lines of business, for example Communication, Digital, Electronics, across organizations, for example Franchises Org, Inbound Org, International Org.
Description of the illustration revenue-p3-lob-d3-organization.gif
Event and Payload Format and Context
The following example demonstrates publishing an event when the embedded data action is invoked by one or more data cells that have been right-clicked and the data action selected from the menu that’s displayed in the embedded workbook.
The examples below are from a JSON file, for example,
obitech-cca/cca/component.json.
Event Format
"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"
}
}
}
Payload Format
{"context":[
"or": [
"and":[
{"contextParamValues":[...],
"contextParamValuesKeys":[...],
"colFormula":"...",
"displayName":"...",
"isDoubleColumn":true/false,
"dataType":"..."
}
]
]
]
}Passing a single value for a single column in the Pass By Context
In this example, when you click a column cell, the object with the context information about the column is passed to the external container. In this case, the organization name is passed.
{
"context": [
{
"contextParamValues": [
"Inbound Org."
],
"contextParamValuesKeys": [
"Inbound Org."
],
"colFormula": "\"A - Sample Sales\".\"Offices\".\"D3 Organization\"",
"displayName": "D3 Organization",
"isDoubleColumn": false,
"dataType": "varchar"
}
]
}Passing a single value for each column in the Pass By Context
In this example, when you click a column cell, for example, Inbound Org, and Digital products, what gets passed when you click the Embedded DA1 menu option to select the embedded action is the revenue value in Dollars for the selected line of business and organization. For example, the revenue for Digital products from the Inbound Org is passed, which is $1, 458,738.42 in this example.
Description of the illustration pass-value-revenue-p3-lob-d3-organization-02.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"
}
]
}Passing multiple values in the Pass By Context
In this example, when you click two row cells (for example Inbound Org and International Org for Digital products) and click the Embedded DA1 menu option to select the embedded action, what gets passed is the revenue value in dollars for the two selected cells for organization and lines of business. For example, clicking the revenue for Digital products from the two selected organizations (Inbound Org and International Org) passes the values $1, 458,738.42, and $915,528.97.
Description of the illustration pass-multiple-values-revenue-p3-lob-d3-organization-03.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 these steps to configure the sample HTML page shown below.
-
Add or modify the path location of the workbook.
See
<======== 1below. -
Subscribe to the published event called ‘oracle.bitech.dataaction’.
See
<======== 2below. -
Define an event listener and an event callback.
See
<======== 3below.
Example of an HTML Page with Visualization that Receives Events
The following HTML page has a visualization embedded and can receive events. The HTML page is configured to listen for the event “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/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>