Execute Data Actions that Contain Embedded Content

When you configure a data action that contains embedded content, you can embed the project for that data action into 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

The embedded visualization is displayed within the HTML container. When you right-click the visualization, any applicable data actions are displayed in the visualization. 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 project is embedded inside a HTML page. The project shows the revenue (in Dollars) for lines of business (for example Communication, Digital, Electronics) across organizations (For example fFranchises Org, Inbound Org, International Org) —

Description of revenue-p3-lob-d3-organization.gif follows
Description of the illustration revenue-p3-lob-d3-organization.gif

Event and Payload Format and Context

The following examples enable an event to be published 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 project.

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, what gets passed is an object with context information about the column. 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 pass-value-revenue-p3-lob-d3-organization-02.gif follows
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 pass-multiple-values-revenue-p3-lob-d3-organization-03.gif follows
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.

  1. Add or modify the path location of the project.

    See <======== 1 below.

  2. Subscribe to the published event called ‘oracle.bitech.dataaction’.

    See <======== 2 below.

  3. Define an event listener and an event callback.

    See <======== 3 below.

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>