Visual Builder Component for Embedding Oracle Analytics — Part 2 — Layout and Sizing
By: Mike Durran
Tags: Oracle Cloud, Oracle, Embedding, Developer, Analytics

Visual Builder Component for Embedding Oracle Analytics — Part 2 — Layout and Sizing Mike Durran Aug 27·3 min read

Introduction

In part 1 of this blog series, I introduced the Oracle Analytics Cloud (OAC) / Visual Builder (VB) component and described how to configure your environment, install it into a VB application and embed an analytics canvas. In this blog, I’ll describe how to add multiple canvases and describe options for sizing the content.

Layout and Sizing

In this example, two canvases from Oracle Analytics have been embedded on a single VB application page.

Two Analytics Canvases on a VB Application Page

You’ll typically need to change some style parameters to get the exact layout you need (and I’ll cover those later in this blog). When adding multiple OAC components to a single page, make sure that the overall page structure is set accordingly. In the example above, both OAC components are contained within the same ‘Flex Row’ and ‘Flex Container’ — you can see this in the ‘Structure’ tab in VB.

Structure of Application Page

You may have noticed that VB also offers a ‘Code’ view of the page and this can be useful in understanding more about the application page, especially when troubleshooting.

<div class="oj-flex oj-sm-justify-content-center">

<div class="oj-flex"> <oj-oa-project class="oj-flex-item oj-sm-flex-0"

host="https://<OAC-instance>-ia.analytics.ocp.oraclecloud.com/"

project-path="/@Catalog/shared/Embed/VBCS/VBCS1"

style="border:1px solid #343b67; min-width:490px; min-height:500px" b-show-filter-bar="false">

</oj-oa-project> <oj-oa-project class="oj-flex-item oj-sm-flex-0"

host="https://<OAC-instance>-ia.analytics.ocp.oraclecloud.com/"

project-path="/@Catalog/shared/Embed/VBCS/VBCS1"

active-tab-id="2"

style="border:1px solid #343b67; min-width:490px; min-height:500px"b-show-filter-bar="false">

</oj-oa-project> </div>

</div>

In the code view of the page, you will see references to the OAC component as <oj-oa-project>. The changes I made in order to get this layout were:

Set the parent Flex Row to ‘justify centre’

Flex Row Justify Setting

Change the ‘Item Sizing’ parameter on the Oracle Analytics Project component to ‘Zero’ for both occurrences of the component.

Item Sizing Setting

Add the following to the ‘Style’ parameter for both occurrences of the Oracle Analytics Project component.

Analytics Component Style Setting

You can find this in the ‘All | General Attributes’ section of the component settings, or you could edit the code directly.

This Section Contains the Style Setting

This is an example to get you started in setting the layout of your applications as required. Other things to consider are the settings for the Analytics canvas, in particular settings for how the width and height are impacted by screen size.

It is important to note that what you see in the VB application is a reference of the analytics canvas, so if you make any changes to the canvas and save them to the catalog, then you’ll see those changes in the VB application.