X

Shay Shmeltzer's Oracle Development Tools Tips

Showing Parent/Child in a Single Table in Visual Builder

Shay Shmeltzer
Director of Product Management - Oracle

Parent Child (or master detail) relationships are a very common structure of data, and sometimes people want to show this information in a single table - where for each row of the parent we also show the details of the children. (In SQL you get this type of presentation using a "group by" clause). Something that looks like this:

Master Detail inside a row

In the video below I show the basic steps to help you achieve this.

The first thing you'll want to have is a REST endpoint that returns this "Tree" structure where we include the children in each parent. If you are working with business objects in Visual Builder, you'll need to enable the accessor on the relationship between the master and the detail (0:05 in the vide). Keep track of that accessor name, as you'll use it later in your code in a couple of places. Once you do this, you can pass this accessor name as the "expand" parameter to your REST call and the proper data structure can be returned. Next - store it in an Array in your page.

Now let's turn to creating the UI.

In the demo I'm using a table, and in one of the columns I'm using a bind-for-each loop (line 8) to iterate over the children of the specific row and show them.

Since there could be rows without children, we also need to condition showing this structure using a bind-if component - so we won't be trying to show an empty array (line 7).

Both of these structures need to be inside the template defined for the column table (line 6).

The end result is the following code for the page:

<div class="oj-flex">
  <oj-table scroll-policy="loadMoreOnScroll" id="oj-table--1049873659-1" class="oj-flex-item oj-sm-12 oj-md-12" data="[[ $variables.DeptArray ]]" columns='[{"headerText":"id","field":"id"},{"headerText":"department","field":"department","template":"department"},{"headerText":"Employees","field":"","template":"Employees"}]'>
    <template slot="department">
      <oj-bind-text value="[[$current.data]]"></oj-bind-text>
    </template>
    <template slot="Employees">
      <oj-bind-if test="[[$current.row.employeesCollection.items]]">
        <oj-bind-for-each data="[[$current.row.employeesCollection.items]]">
          <template>
            <oj-bind-text value="[[$current.data.name +' '+$current.data.salary]]"></oj-bind-text><br>
          </template>
        </oj-bind-for-each>
      </oj-bind-if>
    </template>
  </oj-table>
</div>

Here is a quick video showing the process end-to-end:

Quick tip - as the video shows - the browser's console is an important tool to help you find out the exact structure of the data in your variable and the proper names for attributes. Use it if something goes wrong.

Join the discussion

Comments ( 2 )
  • Anjani Kumar Chakka Thursday, May 14, 2020
    Is it possible to repeat the complete row when we have multiple children ? Like, if we enable multi row select on the table, we would be able to select one or more employee records of the same department.

    Thanks in advance.
  • Shay Shmeltzer Thursday, May 14, 2020
    Anjani - if you want the full details in each row - you would base your table on employees and fetch the related dept info into it.
    For further question try our forum - https://cloudcustomerconnect.oracle.com/resources/e610f4723c/summary
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.