Embedding Visual Builder Apps In Oracle Cloud Applications

In some cases you will want to access Oracle Visual Builder application through an interface built with another product/service. For example, embed the VB app in a portal or another app. Embedding Visual Builder UI in an Oracle Cloud Application (Oracle's SaaS) page is another example of this use case. In this blog we'll show how to achieve this.

There are three things you'll likely want to setup in your Visual Builder app when you know it is going to be embedded.

The first one is a must do - in the web app settings->security section you should allow your application to be embedded in other servers. If not set, when a site will try to embed the URL of your app it will be denied and in the console you'll see a message similar to "Refused to display 'URL' in a frame because it set 'X-Frame-Options'". By default VB apps are not allowing other sites to embed them because of security concerns, so you need to specifically set this entry. (Note that you must re-publish your app after you change this setting).

The other thing you likely want to do is remove any surrounding chrome around the core content of your app. These parts are usually defined in the shell page which acts as the template for your page. Simply go and edit the HTML removing things that are not needed in the embedded version.

A third thing you can do is set variables in your app to accept input through the URL. This will allow the surroudning app to pass information to your VB app in an easy way. Simply mark a VB variable as "Input Parameter" and check the "pass on URL" box.

For integration into Oracle Cloud Applications, you can use the ability to customize pages in the app using the Page Composer functionality. In the video you can see that I work in a sandbox - which you should create if you are doing any changes to the app. Make sure your sandbox enables the page composer functionality.

When you are in a page you want to customize you can click to edit the page choose the area where you want to include the Visual Builder UI (a bit of understanding of ADF layout components helps to figure out where to add your section). Then you simply add a component of Web Page type (which is adding an iframe into your page). Then you can configure the URL that would be invoked.

One nice thing you can do is add parameters that you pass to your VB app whose values come from other items on the page. In the video we are passing a parameter to a VB app on the URL - and then use that value to filter which records are fetched, and as a default value on the "create" page.

In the video above I show embedding the VB app in SaaS, but in some cases you might actually open the VB app in a separate tab/window. To do that you use the page composer to add a hyperlink to your Cloud Apps page. Then you use the URL of the live VB app in the same way as the destination of this link. In the Target Frame attribute of the link you'll probably want to use _blank.

One part that is not covered in this blog, and that you'll likely want to configure when embedding VB apps in Oracle Fusion Apps, is setup of single-sign-on between VB and SaaS. There is a solution doc that explains how to setup federated identity between Oracle SaaS and PaaS here. Another good resource is the blog entry from Aparna that cover setup of identity propagation between Visual Builder and Oracle Cloud Applications.