Creating Collapsible Hierarchical List in Visual Builder

Collapsible lists that show parent/children relationship are a common UI pattern for showing hierarchical information in limited space. The Oracle JET ListView component has built-in functionality of collapsible group headers to allow you to represent such layout. See the cookbook sample for Collapsible Group Headers. In this blog we'll show the basic steps needed to implement this behavior in Visual Builder.

To get this expandable list view we need to get a tree structure of data where the top nodes are the parents, and the leafs are the children. We store this in an ArrayTreeDataProvider variable. We already covered the steps needed to create this in a previous blog about using tree view. This blog builds on the previous one, and starts from a state where the variable is already populated with the tree data.

This leave us with the task of adding the list and binding it to data. To do this we'll add a list, and bind it to the variable holding the data. Next we'll create two itemTemplates in the list and control which one to show using an oj-bind-if component that depends on a field that distinct between the parent and child type of records. We will then populate each of those item templates with the layout we want for that section. In the video below we are using a shortcut to creating the list using the quick start, and then modify it to bind to the tree variable.

Check out this video to see the development steps:

The code created in the page is:

  <oj-list-view class="oj-flex-item oj-sm-12 oj-md-12" data="[[ $variables.ourTree ]]">
    <template slot="itemTemplate">
      <oj-bind-if test="[[$current.data.department]]">
        <span>
          <oj-bind-text value="[[$current.data.department]]"></oj-bind-text>
        </span>
      </oj-bind-if>
      <oj-bind-if test="[[$current.data.name]]">
        <oj-list-item-layout>
          <img :src="[[ $current.data.picture ]]" width="32" height="32" slot="leading">
          <div>
            <oj-bind-text value="[[ $current.data.name ]]"></oj-bind-text>
          </div>
          <div slot="secondary">
            <oj-bind-text value="[[ $current.data.salary ]]"></oj-bind-text>
          </div>
        </oj-list-item-layout>
      </oj-bind-if>
    </template>
  </oj-list-view>