Visual Builder Component for Embedding Oracle Analytics — Part 2 — Layout and Sizing
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.
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.
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’
- Change the ‘Item Sizing’ parameter on the Oracle Analytics Project component to ‘Zero’ for both occurrences of the component.
- Add the following to the ‘Style’ parameter for both occurrences of the Oracle Analytics Project component.
You can find this in the ‘All | General Attributes’ section of the component settings, or you could edit the code directly.
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.
