Embed Oracle Analytics Content into a Custom Application that Uses Oracle JET

If the custom application uses Oracle JET, then the embedded Oracle Analytics content extends the application with the component it needs.

Before you begin to embed analytics content, confirm that the custom application uses the same major version of JET that Oracle Analytics uses.

To find the version of JET that Oracle Analytics uses, log into Oracle Analytics, open the browser console, and run this command:

requirejs('ojs/ojcore').version

This procedure uses an example embedding application named OAJETAPP.

Create or open an Oracle JET application. If you use an Oracle JET quickstart application, you can use create an application named OAJETAPP using the navdrawer template.

Add the JavaScript Embedding Framework V2 script to the application HTML page, for example, OAJETAPP/src/index.html.

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

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/jet/embedding.js?lang=en-US"
     type="text/javascript"></script>

Include <oracle-dv> in the appropriate application view, for example OACJETAPP/src/js/views/dashboard.html. The project-path attribute specifies the path of the workbook to render.

<div class="oj-hybrid-padding" 
      style="position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)">  
   <h3Dashboard Content Area</h3>

   <oracle-dv 
     id="oracle-dv" 
     project-path="/Shared Folders/embed/test-embed">
   </oracle-dv>
</div>

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.
If your Oracle JET application calls ko.applyBindings() itself, wait for oracle.oa.embedding.ready() before calling the host application's binding function.
```
oracle.oa.embedding.ready().then(() => {
   ko.applyBindings(viewModel, document.getElementById('globalBody'));
});
```
Configure authentication as required.
- For V2, configure token authentication or 3-legged OAuth through application.setEmbeddingConfig() after oracle.oa.embedding.ready() resolves and before you call applyBindings().
- Don't use the deprecated TOKEN=true or IDCS_OAUTH3LEGGED=true script query parameters in V2 examples.
Build and run the Oracle Jet application.
```
ojet build
ojet serve
```

Complete Example

<!-- OAJETAPP/src/index.html -->
<script
  src="https://<instance>.analytics.ocp.oraclecloud.com/public/dv/v2/embedding/jet/embedding.js"
  type="text/javascript"></script>
```

```html
<!-- OAJETAPP/src/js/views/dashboard.html -->
<div class="oj-hybrid-padding"
     style="position: absolute; width: calc(100% - 40px); height: calc(100% - 120px)">
  <h3>Dashboard Content Area</h3>

  <oracle-dv
    id="oracle-dv"
    project-path="/Shared Folders/embed/test-embed">
  </oracle-dv>
</div>
```

```javascript
// Initialize after the oracle-dv element is present.
oracle.oa.embedding.ready().then((application) => {
  application.applyBindings();
});