Working with Hierarchical Trees in Oracle Visual Builder

In this blog and video I'll show how to display hierarchical data in a tree component in Oracle Visual Builder. Oracle JET has various ways to show these type of hierarchies, and I'm going to start from the most basic tree component. While showing how to do this, we'll also cover a few other tips/techniques in Visual Builder. Here are some to the tips you'll learn along the way:

Getting Master and Details in a Single REST Call

In a tree situation, you might want to fetch both the parent and child records in one go. When working with the Visual Builder business components, such relationships are usually implemented with two separate objects with a reference field between them. To enable the master to fetch the details as part of the query, you'll need to enable the accessor access on the relationship between the two. (See 1:10 in the videos). You will also need to specify the expand option in the REST call to have the actual data fetched. (See 5:20 in the video).

Adding "Missing" JET Components

While some JET components don't show up in the component palette, you do have access to them in the code editor (7:10 in the video). If you add them through the code editor code insight, we'll automatically add the needed definition code to the json file for the page.

Working with Unique Variable Types 

Once you have the array of data, you'll need to transform it to the type of variable that the tree UI component expacts - an ArrayTreeDataProvider in our case. However this type doesn't actually exist as a built-in type in VB. So the video shows you at 8:40 how to create a JS function that returns the needed type and assign it to an Any type variable.

One thing that got cut from the video is adding missing dataTypes in the JS code by including them in the require part of the JS file. You add those at the top of the JS code: define(['ojs/ojarraytreedataprovider'], function(ArrayTreeDataProvider) 

Note that because our array of data might have shared ids between records in the master and records in the details - we need to specify keyAttributesScope : 'siblings' the to the constructor. And because our children don't come under a "children" attribute in the array we also specify the childrenAttribute property to the constructor.

The complete JavaScript Code is:

define(['ojs/ojarraytreedataprovider'], function(ArrayTreeDataProvider) {   'use strict';   var PageModule = function PageModule() {};   PageModule.prototype.buildTree = function (myarray){     return new ArrayTreeDataProvider(myarray, { keyAttributes: 'id' , keyAttributesScope : 'siblings' , childrenAttribute : 'employeesCollection.items'});   }   return PageModule; }); Passing Values to Action Chain

The last part of the video shows how to switch the display item to be a link, and assign an action chain to a click event on it. It then shows you how you can specify which information is passed to this action chain - for example the name of an employee - which you can then use in the action chain for further processing. While in the video I replace the detail parameter to the event, you can instead add a new parameter that is passed to the action and assign value to that one.

 

Here is the complete process: