Oracle Analytics Cloud and Server

Home› Oracle Analytics› Oracle Analytics Forums› Oracle Analytics Cloud and Server› Oracle Analytics Cloud and Server

Categories

Welcome to the Oracle Analytics Community: Please complete your User Profile and upload your Profile Picture

OAS embedding in a react component with JavaScript Embedding Framework

Received Response
24
Views
2
Comments
Rav Singh
Rav Singh Rank 4 - Community Specialist
in Oracle Analytics Cloud and Server

I am using OAS version 2025, and embedding OAS content is working fine in a standalone HTML page.

Next, I am trying to embed OAS content in a react app using JavaScript Embedding Framework (not iFrame). But the content doesn't load.

Has anyone accomplished this? Do the JS framework steps work with react.

Answers

  • Aman Jain-Oracle
    Aman Jain-Oracle Rank 6 - Analytics & AI Lead

    Hi @Rav Singh , Have you checked this oracle documentation ? It outlines the typical workflow to use the JavaScript Embedding Framework with Oracle Analytics Content.

    Hope this helps!

  • Mike Durran-Oracle
    Mike Durran-Oracle Mod

    You need to include the embedding code for analytics within an iframe for React as the knockout binding used by JET won't work with the vdom in React - something like this..

            
import React from "react";
import ReactDOM from "react-dom";class App extends React.Component {
render() {
return   <iframe  id='OACembed' srcDoc="<!DOCTYPE HTML PUBLIC>
<html dir='ltr'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
<title>Oracle Analytics Embed Example</title>

<style>

        </style>

        <script src='https://<oac-instance>.analytics.ocp.oraclecloud.com/public/dv/v1/embedding/standalone/embedding.js' type='application/javascript'>
        </script>

    </head>
    <body>

        <div style='position: absolute; width:100%; height:100%'>

    <oracle-dv project-path='/@Catalog /shared/ReactEmbed/ReactPOC'
                   active-page='canvas' active-tab-id='1'
                   project-options='{&quot;bDisableMobileLayout&quot;:false, &quot;bShowFilterBar&quot;:false}'>
        </oracle-dv>
        </div>


    <script>
    requirejs(['jquery','knockout','ojs/ojcore', 'ojs/ojknockout', 'ojs/ojcomposite', 'obitech-application/application', 'jet-composites/oracle-dv/loader'], function($, ko, application) {
    ko.applyBindings();
    });
    </script>

    </body>
</html>" >
</iframe>;

}
}ReactDOM.render(<App />, document.getElementById('root'));