Scroll to top
Please assign a menu to the primary menu location

How To Implement Row Expander In A Table in VBCS

Roshan - August 16, 2022 - 0 comments - 493 Views

Reading Time: 4 minutes

In this blog, we will show you to implement a row expander in a table in Oracle Visual Builder Cloud Service.

The Problem

How to implement row Expander in a Table when a hierarchical relationship exists between rows.

row expander in vbcs

The Solution

First drag & drop table components in the required page, after dropping the table, insert required data into the table using a JavaScript function to create a FlattenedTreeDataProviderViewStructure. Initially an ADP (Array Tree Data Provider) variable is created using the endpoint as data type.

The array of the ADP which contains data in the row format is changed into a tree structure and that tree is passed as Data in the table.  Here in this tutorial, we will explain how to achieve this requirement.

The expandable rows are actually the various nodes of a tree which are dependent on each other in a hierarchical fashion. So, the rows figuratively turn into a tree structure(using objects of objects) as below.

tree structure in vbcs

Step 1: Create a variable type from the required End point and give the variable type required name.

tree structure

Step 2: Create a variable and select type as ARRAY DATA PROVIDER (ADP).

array data provider

For the current ADP, select ItemType as the type that you created in previous step.

array data provider

Step 3: Create an Event Listener VBEnter to load when the page loads and add a Page Action chain for ex. LoadData in this case.

event listener

Step 4: In the action chain to populate the table, call the rest endpoint to get the Emp Data and assign the response array to the array Structure “Data” of the ADP created.

Emp Data

action chain to populate the table

Step 5: In the JavaScript pane, Define the dependencies of knockout, ojs/ojarraytreedataprovider and ojs/ojknockouttemplateutils and create three functions in the JavaScript.


Create a function named convertArrayIntoTree to convert the array of employee records into a tree structure.


Create another function named updateTreeDataProvider to convert your tree structure into a FlattenedTreeDataProviderView.

Create another function, getTreeDataProvider, to return the data in the FlattenedTreeDataProviderView structure.

function named updateTreeDataProvider

Step 6: Call the JavaScript function updateTreeDataProvider, and pass the array of the ADP as the argument in the function.

action chain to populate the table

assign input parameters

Step 7: Add the column name in the properties pane of table, also call the function getTreeDataProvider() from the data property of the table.

get tree data provider

get tree data provider

Step 8: Create a template for the Table component and add the oj-row-expander to the column designated with the expand/collapse icon.

In the oj-row-expander, set context as context=”[[row]]” and then access the data for columns as, and so on.

template for the Table component

Step 9: Play the Web-App to check the row-expander property in the table.

play the web app

We hope you liked our blog on row expander in VBCS. If you have any questions or concern, please get in touch with us at

You might also like: How to create OTBI Dashboards

Author avatar


Roshan comes with an extensive experience in the Oracle Implementation domain after completing his Electronics and Communication Engineering from Bengaluru. He holds a plethora of professional certifications from Oracle after starting as an Associate Developer role and quickly made his way to a Senior Manager. He has worked with clients across the globe in ANZ, EMEA, APAC and Europe. At Conneqtion Group, Roshan has been a key part of managing the organization’s largest risk teams apart from sharing his experience and skills to develop and nurture young talent with his dynamic vision.   

Related posts

Post a Comment

Your email address will not be published. Required fields are marked *