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.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.