機械翻訳について

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

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

注意:

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

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

埋込みデータ視覚化はHTMLコンテナ内に表示されます。 ビジュアライゼーションを右クリックすると、適用可能なデータ・アクションがビジュアライゼーションに表示されます。 パブリッシュ・イベント・データ・アクションをクリックすると、ビジュアライゼーションのコンテキスト情報が決定され、その情報がナビゲーション・アクション・サービスに渡されて処理されます。 ナビゲーション・アクションのサービス・プロセスでは、コンテキスト・ペイロード情報を含む"oracle.bitech.dataaction"というイベントが発生します。 このイベントをサブスクライブし、イベント・コールバックでペイロードを受信できます。また、必要に応じてペイロードをさらに活用できます。

次のプロジェクトはHTMLページ内に埋め込まれています。 プロジェクトには、組織(fFranchises Org、Inbound Org、International Orgなど)全体のビジネス(Communication、Digital、Electronicsなど)のラインの収益(Dollars)が表示されています。

revenue-p3-lob-d3-organization.gifの説明は以下のとおりです
「図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"
      }
   ]
}

コンテキスト渡しの各列に1つの値を渡す

この例では、列のセル(インバウンド組織、デジタル製品など)をクリックすると、埋込みDA1メニュー・オプションをクリックして、選択した事業分野および組織の売上値がDollarsの埋込みアクションを選択したときに渡されます。 たとえば、インバウンド組織からのデジタル製品の収益が渡され、この例では$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つの組織(インバウンド組織と国際組織)からのデジタル製品の収益をクリックすると、値$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. Data Visualizationプロジェクトのパスのロケーションを追加または変更します。

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

  2. Data Visualizationに公開されたイベント'oracle.bitech.dataaction'をサブスクライブします。

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

  3. イベント・リスナーおよびイベント・コールバックを定義します。

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

イベントを受信するData Visualizationを備えた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>