Embed Oracle Analytics Content into a Custom Application That Doesn’t Use Oracle JET

Use JavaScript Embedding Framework V2 to embed Oracle Analytics content in a custom application that doesn't use Oracle JET.

If the custom application uses a technology other than Oracle JET, use the standalone V2 embedding mode. V2 first loads a lightweight entry script and then loads the embedding implementation required by the page. This approach avoids adding Oracle Analytics dependencies, such as RequireJS, Knockout, and jQuery, to the host application namespace.
If the Developer option isn't displayed in the workbook's Menu, then you need to enable it. See Enable Oracle Analytics Developer Options.
  1. Include the standalone V2 version of embedding.js. Note that if the host framework varies between Oracle JET and non-JET implementations, you can use the auto embedding mode instead.
    <script 
       src="https://<instance>.analytics.ocp.oraclecloud.com/public/dv/v2/embedding/standalone/embedding.js" 
       type="text/javascript"></script>
  2. Optionally, append lang=<IETF-language-tag> to the script URL to specify the language used for embedded user interface elements and messages.
    <script 
       src="https://<instance>.analytics.ocp.oraclecloud.com/public/dv/v2/embedding/standalone/embedding.js?lang=en-US" 
       type="text/javascript"></script>
  3. Find and include an <oracle-dv> element inside an appropriately sized container. To find this tag:
    1. Go to Oracle Analytics and open the workbook containing the analytics content you want to embed.
    2. Click Edit to enter the workbook in author mode.
    3. Click the workbook's Menu and then click Developer.
    4. Click the Embed tab.
    5. Locate the item you want to embed and click Copy to copy it.

    Example

    <div style="width: calc(100% - 40px); height: calc(100vh - 120px)"> 
       <oracle-dv project-path="/@Catalog/users/admin/workbook_name"> 
       </oracle-dv> 
    ]</div>

    Here project-path specifies the workbook's path.

  4. Initialize JavaScript Embedding Framework V2 after the <oracle-dv> element is present.
    <script> 
       oracle.oa.embedding.ready().then((application) => { 
         application.applyBindings(); 
       }); 
    </script>

    oracle.oa.embedding.ready() returns a promise that resolves when the V2 framework is ready. Calling application.applyBindings() processes the <oracle-dv> elements in the page.

    You can optionally provide a binding model or a root element to applyBindings() when the application uses bindings or must process only a specific section of the page.

  5. Configure authentication as required. For V2, configure 3-legged OAuth or token authentication through application.setEmbeddingConfig() after oracle.oa.embedding.ready() resolves and before calling applyBindings().
    Don't use the deprecated TOKEN=true or IDCS_OAUTH3LEGGED=true query parameters in V2 script URLs.

Complete Example

Here project-path specifies the workbook's path.

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Standalone Oracle Analytics V2 Embed Demo</title>

    <script
      src="https://<instance>.analytics.ocp.oraclecloud.com/public/dv/v2/embedding/standalone/embedding.js"
      type="text/javascript"></script>
  </head>

  <body>
    <h1>Embedded Oracle Analytics Workbook</h1>

    <div style="width: calc(100% - 40px); height: calc(100vh - 120px)">
      <oracle-dv project-path="/shared/embed/test-embed">
      </oracle-dv>
    </div>

    <script>
      oracle.oa.embedding.ready().then((application) => {
        application.applyBindings();
      });
    </script>
  </body>
</html>