Some Tips for Working with Visual Builder UI Components in Oracle Integration Cloud

Introduction

Oracle Integration Cloud Service (OIC) has now bundled several formally independent PAAS services into a single cloud service. One of these bundled services is Visual Builder (formerly VBCS). The 18.2.5 release of Visual Builder in OIC is more user friendly than prior releases. For example, in 18.2.5, users are not forced to write Javascript code to create a custom data type, and data mapping can be done with drag and drop. This release of Visual Builder also includes enhancements for Process application integration. While creating some test cases to demonstrate Process integration in Visual Builder, I encountered a few issues in working with some UI components. I would like to use this post to share some tips and work-arounds for these issues that might be helpful to other OIC developers working with Visual Builder.

Action Chain can be defined at application, flow and page level

Action chains can be defined at all three levels – application, flow, and page.  The chains defined at parent level can be used by the chains at sibling or child levels. The following pictures show action chains created at application, flow and page level respectively.

The following picture shows a page action chain that uses a Call Action Chain action to call a chain defined at flow level (parent) and application level (root level).

Leveraging this feature, we can define chains once at a higher level and share them with all child flows and pages. In this example, we created three common action chains at the application level. They perform navigation functions to previous page, to another flow, and to another page in a flow. These functions are frequently used in all parts of a web application.

Navigation to another flow

One way in Visual Builder to navigate to another page is by using a Navigate action in action chains. Once added to a chain, the Navigate action allows you to select a target to navigate to (see the picture below).

As you can see in the picture, the Navigate action allows you to navigate to the root page of this web application, another page in the same flow or a sub-flow under the current flow. There are two functions still missing: the first missing function is navigation to another flow outside of the current flow; the second missing function is allowing the navigation target to be specified as a variable. These features may be available in future releases. But in release 18.2.5, we have to use a work-around by manually editing action chain source.

The following picture shows an action chain with a Navigate action. The chain defines an input parameter which should contain the target flow name.

Click on the source icon on the left (red circled) to view the action chain source in JSON format. We manually set the navigation target to the input parameter variable as shown in the picture below.

Since this action chain is defined at the application level, it is visible from any flows and pages of this web application. This action chain can be used as an event handler or called from another action chain. To use it, we need to specify a target flow name as the input parameter. The picture below shows an example of setting a flow name to that input parameter. Now we are able to navigate to any flow from any pages.

Creating a Collapsible Component

Collapsible component is a commonly used UI component. For some reason, I am unable to use drag and drop to make it work as I wanted. After some trials, I found that the best way to work with Collapsible is to manually edit the HTML source code. The following image shows how I want my collapsible to look:

To start, we create a collapsible component by dragging and dropping the component from the component pallet to your page. To create a label (title) for the collapsible, we go into the HTML source by clicking the Code button as shown in the picture.

we can add our label manually as in the following.

Clicking the “Code” button again should take us back to the page Designer view. Now the collapsible should look like this,

Next we want to add URL links to the collapsible. We first create the links by dragging a Hyperlink component to our page and drop it outside of the collapsible.

Go into the HTML source code again, cut and paste the hyperlink components into the collapsible component.

Our collapsible component should look like the following now. Make sure the Expanded property is selected in order to view the content under the collapsible in Designer view.

Conclusion

I hope these tips make your Visual Builder experience more productive.

 

 

Add Your Comment