埋込みコンテンツを含むデータ・アクションの実行

埋込みコンテンツを含むデータ・アクションを構成すると、そのデータ・アクションのワークブックをHTMLページまたはアプリケーションWebページなどのコンテナに埋め込むことができます。

ノート:

この項の例は、埋込みアプリケーションでOracle JETテクノロジを使用しない場合に埋込みデータ・アクションに適用されます。参照:

データ・アクションの実行

埋込みビジュアライゼーションは、HTMLコンテナ内に表示されます。ビジュアライゼーションを右クリックすると、該当するデータ・アクションがビジュアライゼーションに表示されます。「イベントの公開」データ・アクションをクリックすると、ビジュアライゼーションのコンテキスト情報が判別され、その情報がナビゲーション・アクション・サービスに渡されて処理されます。ナビゲーション・アクションのサービス・プロセスでは、oracle.bitech.dataactionというイベントがコンテキスト・ペイロード情報とともに発生します。このイベントをサブスクライブしてイベントのコールバックでペイロードを受け取り、必要に応じてペイロードをさらに利用できます。

次のワークブックは、HTMLページ内に埋め込まれています。ワークブックには、組織(Franchises Org、Inbound Org、International Orgなど)の部門(Communication、Digital、Electronicsなど)ごとに収益(ドル)が表示されています。

図revenue-p3-lob-d3-organization.gifの説明

イベントおよびペイロードの書式とコンテキスト

次の例では、1つ以上のデータ・セルを右クリックし、それによって表示された埋込みワークブックのメニューからデータ・アクションを選択することで、埋込みデータ・アクションが起動される際にイベントの公開が有効化されます。

次の例は、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のDigital製品)をクリックし、埋込みDA1メニュー・オプションをクリックして埋込みアクションを選択したときに渡されるのは、選択した部門と組織に対応する収益値(ドル)です。たとえば、Inbound OrgからDigital製品の収益が渡され、この例では$1,458,738.42です。

pass-value-revenue-p3-lob-d3-organization-02.gifの説明が続きます

図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"
      }
   ]
}

コンテキストで渡すでの複数値の引渡し

この例では、2つの行セル(たとえばDigital製品に対するInbound OrgとInternational Org)をクリックし、埋込みDA1メニュー・オプションをクリックして埋込みアクションを選択すると、組織と部門に対して選択された2つのセルの収益値(ドル)が渡されます。たとえば、選択した2つの組織(Inbound OrgとInternational Org)からDigital製品の収益をクリックすると、$1,458,738.42および$915,528.97の値が渡されます。

pass-multiple-values-revenue-p3-lob-d3-organization-03.gifの説明が続きます

図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"
                  }
               ]
            }
         ]
      }
   ]
}

これらのステップを使用して、次に示すサンプルHTMLページを構成します。

ワークブックのパスの位置を追加または変更します。

次の<======== 1を参照してください。
oracle.bitech.dataactionという公開イベントをサブスクライブします。

次の<======== 2を参照してください。
イベント・リスナーおよびイベント・コールバックを定義します。

次の<======== 3を参照してください。

イベントを受け取るビジュアライゼーションのあるHTMLページの例

次のHTMLページには、ビジュアライゼーションが埋め込まれており、イベントを受け取ることができます。HTMLページは、イベント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>