Oracle Analytics Cloud Developer Experience

Oracle Analytics Cloud (OAC) provides a powerful, highly visual, easy to use, augmented analytics environment that enables a fast time to insight. The typical user of OAC is either a business analyst looking to gain insight from their data or a business user who consumes analysis and insight, typically on a mobile device.

But what if your organization wants to extend the capabilities of OAC or embed the visual analytics from OAC within a custom application or portal?

Enter… the OAC Developer Experience!

The OAC developer experience offers the ability to easily embed OAC content in other web applications or websites, while retaining the interactivity available in OAC. Let’s take a look at an example of embedding an OAC canvas in a simple webpage. A concept we can build on in further blogs on this subject.

Here is a canvas in OAC, containing three visualizations of sales data over time and region, that I’d like to embed into a custom webpage :

A visual analytics canvas in OAC that I’d like to embed in a custom web page

To get started on embedding, we will need to create a development environment. This will let us start creating and testing our embedded OAC content within HTML files. This can be as simple as a text editor (ideally one that will format HTML, Javascript etc.), a local webserver (e.g. configured to serve files from localhost) and a browser to view the output.

If you just access the HTML file directly from the browser then you may get an error “AJAX request failed during bootstrap”.

One of the first tasks however, is to configure your localhost development environment as a safe domain for embedding content in the OAC console as shown below (note the first screen is the earlier version which has now been revised to the one shown below in latest OAC versions):

The OAC console, with localhost entered as a safe domain to allow testing of embedding

The OAC Console (latest version), with localhost entered as a safe domain to allow testing of embedding

If you’re testing using a localhost webserver, then you may need to add both references to http://localhost:<port> as well as http://127.0.0.1:<port>.

You will also need to be logged into the OAC instance you’re embedding from using the same browser you’re using for testing in order for you to see the embedded OAC content in your custom webpage.

Let’s look at how to reference the OAC content you wish to embed. The first step is to access the relevant code from the OAC ‘Developer’ menu, see illustration below for the location of this menu item:

The OAC developer menu

Opening this menu will display a number of tabs, the one you’re interested in is called ‘Embed’:

The OAC embedding tab in the developer menu UI

The ‘Embed’ tab provides you the details of what you need to include in the custom web page or application to show OAC content. The first item is a required link to the OAC Javascript code on your OAC server. Note that there is an option called ‘embeddingmode’ that is substituted with ‘jet’ if you’re using Oracle ‘jet’ or ‘standalone’ if you’re not. In our example, we’re going to use the following:

<script src=”https://<your-instance-name>.analytics.ocp.oraclecloud.com/dv/ui/api/v1/plugins/embedding/standalone/embedding.js” type=”application/javascript”></script>

Note that if you’ve been using the most recent version of OAC which has the new UI for creating the OAC instance (you may have heard this referred to as ‘Native’ compared to ‘PSM’) then you’ll see a slightly different link to reference:

<script src=”https://<your-instance-name>.analytics.ocp.oraclecloud.com/static/dv/embedding/v1/standalone/embedding.js” type=”application/javascript”></script>

The next HTML element enables you to embed the OAC project is as follows and is the simplest way to start embedding OAC content in your own pages, in this case, the default canvas view in the project named ‘Embed Sample’:

<oracle-dv project-path=”/users/<user-name>/Embed Sample”></oracle-dv>

The final HTML file that will display OAC embedded content will look like the following, including additional code required by the Javascript frameworks ‘RequireJS’ and ‘Knockout’ that are used by OAC:

<!DOCTYPE HTML PUBLIC “-//IETF//DTD HTML//EN”>
<html dir=”ltr”>
<head>
<title>Oracle Analytics Cloud Embedding Sample</title>
</head>
<body>
<div style=”text-align: center”>
<h1>Oracle Analytics Cloud Embedding Sample</h1>
</div>

<div style=”position: absolute; width: calc(100% — 40px); height: calc(100% — 120px)” >

<oracle-dv project-path=”/users/<user-name>/Embed Sample”>
</oracle-dv>

</div>

<script src=”https://<your-instance-name>.analytics.ocp.oraclecloud.com/static/dv/embedding/v1/standalone/embedding.js” type=”application/javascript”></script>

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

</body>
</html>

The output from this embedding example appears as follows:

Example of embedding OAC content into a custom webpage

You still get the same interactivity on the OAC visualizations that you get in the main OAC product.

This is, it’s possible to brush across the canvas as well as sorting etc. as seen in the following illustration:

Illustration of interactivity in OAC visualization embedded in custom webpage

After following these steps, you should now have your own OAC data visualization embedded in a simple HTML page.

The aim of this blog has been to get you started and see how easy it is to embed visual analytics from Oracle Analytics Cloud in your own portals or webpages.

The next blogs in this series will extend on this. In the meantime, here are some useful references for embedding OAC content:

Oracle Analytics Cloud product documentation on embedding

Oracle Analytics YouTube : Embedding OAC Content into External Portals

Building analytic applications with Oracle Visual Builder.