Embedding Quick Tip — Using an iFrame to embed Oracle Analytics in Oracle Visual Builder

Mike Durran
2 min readMar 31, 2021
Embedding an OAC canvas into VB using an iFrame

Introduction

Oracle Visual Builder (VB) is a low-code development environment. In this embedding quick tip, I’ll describe how to embed an Oracle Analytics Cloud (OAC) canvas into a VB application. As a quick summary on how to do this, you need to upload a html file that contains the details required to embed an OAC canvas into the ‘Source’ section of your VB application. Once that file is in place, you can define an iFrame in your application that will reference the location of the uploaded embed HTML file.

Uploading an Embed File

I’ve described elsewhere on this blog how to create a basic ‘hello-world’ HTML file that contains the required elements to embed content from Oracle Analytics. Let’s refer to this file as ‘oac_embed.html’. Within VB, there is a section called ‘Source’ that is a ‘file system’ for your application.

The ‘Source’ section in VB

Within the source area, it’s possible to upload the file ‘oac_embed.html’ to a suitable location (right mouse click to see a pop up menu with an import option). As you can see in the above illustration, I’ve chosen to locate this file in the /webApps/iframe_app/resources/embed/ directory.

Importing files into the source area of VB

Reference the Uploaded HTML file

Navigating back to the Web Apps area in VB, we can now create a <div> that includes an <iframe> to reference the uploaded file. Here is an example copied from the ‘Code’ section of my VB application:

<div class=”oj-flex”>
<h1 class=”oj-flex-item oj-sm-12 oj-md-12">OAC / VBCS iFrame Embed</h1>
</div>

<div>
<iframe style=”padding:0px; margin:0px; border:0px; width: calc(100% — 40px); height:100%; position:absolute” :src=”[[ $application.path + ‘resources/embed/oac_embed.html’ ]]”> </iframe>
</div>

It’s important to note how the oac_embed.html file is referenced, using :src:

:src=”[[ $application.path + ‘resources/embed/oac_embed.html’ ]]”

Many thanks to Duncan Mills for this information.

Summary

Oracle Visual Builder is a powerful, easy to use, way to build low-code applications. One way to embed a canvas from Oracle Analytics is to use an iFrame that references a HTML file uploaded to the VB application source area.

--

--

Mike Durran

Analytics Product Manager at Oracle. [All content and opinions are my own]