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 […]

WebCenter Navigation triggered from UCM Content


You probably have already seen in many posts out there how to consume and display content from UCM into your WebCenter Portal Framework application and/or Spaces app. Now I want to show you how to navigate from your UCM Data File to a WebCenter page. You should definitely read this post if you currently have a Site Studio based website and want to migrate it to WebCenter. Unfortunately, currently there is no migration path to take your existing navigation structure from UCM to WebCenter Portal. You’ll have to review your UCM Navigation Model and manually rewrite it, splitting it into many navigation models according to your security needs.
To showcase the solution I created a small sample application with only 2 pages. The first one is the Home page with an UCM data file displayed through Content Presenter. This data file has a link to Page 2.


WebCenter Portal Framework


The first step is to open the default-navigation-model.xml file in JDeveloper and create an ExternalId url attribute in the page you want to navigate to. In our case it’s Page 2.


I’ll name it page2.


Just to clarify I have the region definition and region template info below.

Region Definition


Title and Content are a plain text and wysiwyg element types respectively.

Region Template
   1: <div>
   2: <div><!--$wcmElement("TITLE")--></div>
   3: <div><!--$wcmElement("CONTENT")--></div>
   4: </div>

Now add the link to Page 2 on the data file. Open Oracle Content Server and select the data file content information. From Content Actions, click on Edit Data File.


The Site Studio Contributor window will pop up. I’ll select the Go to Page 2 and create a link.


Notice that $wcUrl(‘ExternalId’) is how we link our contributor data file to Page 2 on WebCenter Portal app. In this case we have $wcUrl(‘page2’).


Moving back to JDeveloper, we’ll drop the data file from our UCM connection into panelCustomizable in home.jspx, then select Content Presenter to render it.


Once the Edit Task Flow Binding window pops up, you’ll see the datasource attribute already populated, where MyContentServer is the name of our UCM connection and DF_BLOG is the dDocName of our data file. Next, we’ll inform who the region template is in the templateView attribute, and put the true value for the regionTemplate attribute.


Voilà! We’re ready to run the app.

WebCenter Spaces

Spaces already provide an ExternalId property when editing a Navigation item, which makes our lives a little bit easier.


Regarding navigation inside the same UCM data file, there’s no need to change anything in your code. Content Presenter is smart enough to identify that you are making reference to another data file.