15.6 Using an Inline Table to Display Detail Data in a Master Table

As you may recall from Section 14.5, "Adding Hidden Capabilities to a Table", you can use the detailStamp facet in a table to hide or show additional information about a specific data object displayed in the table. When you add a component to this facet, the table displays an additional column labeled Details, which displays the additional information. It includes a toggle mechanism that enables the user to hide or show the information displayed in the Details column in a manner similar to the mechanism in an ADF Faces tree or treeTable component. In the case described in Section 14.5, "Adding Hidden Capabilities to a Table", the additional information was a single attribute from the same data collection that populates the table.

Using master-detail collections on the Data Control Palette, you can declaratively add an inline table to the detailStamp facet that displays additional information from a detail collection. A master collection is used to populate the main table and a detail collection is used to populate the inline table.

Figure 15-9 shows how an inline table of service requests can be embedded in a table of service request staff. If the user clicks the Show link in the Details column, which is built into the table facet, an inline table of service requests is displayed under the selected row of the table. The main table is populated by a master collection of users and displays the user's first and last name. The inline table is populated by a detail collection of service requests and displays the service request problem description and status.

Figure 15-9 Inline Table Displaying Information from a Detail Collection

15.6.1 How to Display Detail Data Using an Inline Table

Using the Data Control Palette, you can create both the main table and the inline table in a single declarative action. Since an inline table is similar to a tree table, you use the Tree Binding Editor to define the rules that populate the main table and the inline detail table. There must be one rule for the main table and one rule for the inline detail table. Each rule defines the following properties:

The data collection that populates the table
The attributes from the data collection that are displayed in the table

The rule for the main table must also specify a view link accessor attribute that returns the detail collection that will populate the inline table. For information about view links accessors, see Section 5.10.2, "How to Create Master/Detail Hierarchies Using View Links".

To create a master table with an inline detail table:

Drag a master data object from the Data Control Palette, and drop it on the page. This should be the master object that you want to populate the main table.
In the context menu, choose Tables > ADF Master Table, Inline Detail Table.

JDeveloper displays the Tree Binding Editor (previously shown in Figure 15-5).

In the Edit Rule page of the Tree Binding Editor, define a rule for populating the main table and another rule for populating the inline table. To define a rule you must select the following items:

Data Collection Definition: Select the data collection that will populate the table you are defining. The first rule defines the main table. So, for the first rule, select the same data collection that you dragged from the Data Control Palette (the master collection). When defining the rule for the inline table, select the appropriate detail collection. For example, to create a main table of users, you would select the User collection for the first rule; to create an inline table that displays service requests related to a user, you would select the ServiceRequest collection in the branch rule.
Display Attribute: Select one or more attributes to display in the table you are defining. Each attribute is a column in the table. For example, if the main table is displaying users, you might select both the firstName and lastName attributes.

Branch Rule Accessor: If you are defining the rule for the main table, select the accessor attribute that returns the detail collection that you want to appear in the inline detail table. The list displays only the accessor attributes that return the detail collections for the master collection you selected for the rule. If you are defining the rule for the inline table, select <none>, because you cannot embed a table inside the inline table.

View link accessor attributes, which return data collections, are generated when you create view links. The Branch Rule Accessor field displays all view link accessors that return detail collections for the master collection selected in the Data Collection Definition field. For more information about view objects and view links, see Chapter 5, "Querying Data Using View Objects".

Tip:

Be sure to click the Add New Rule button after you define each rule. If you click the OK button instead, the last rule you defined will not be saved. When you click Add New Rule, JDeveloper displays the Show Rules tab of the Tree Binding Editor, where you can verify the rules you have created.

Use the Show Rules page of the Tree Binding Editor, shown in Figure 15-6, to:
- Change the order of the rules
  
  The rule that populates the main table must be first in the list
- Identify the icons you want displayed for the expand and collapse mechanism
  
  Only the main table uses the icons, so if you want to use an icon other than the default, specify it in the rule for the main table.
  
  The default open icon is a solid down arrow with a minus sign, while the default closed icon is a solid right arrow with a plus sign
- Delete rules

15.6.2 What Happens When You Create an Inline Detail Table

When you drag and drop from the Data Control Palette, JDeveloper does many things for you. For a full description of what happens and what is created when you use the Data Control Palette, see Section 12.2.3, "What Happens When You Use the Data Control Palette".

15.6.2.1 Code Generated in the JSF Page

When you create a master table and an inline detail table using the Data Control Palette, JDeveloper adds binding objects to the page definition file, and it also adds the table and facet to the JSF page. The resulting UI components are fully functional and do not require any further modification.

Example 15-7 shows the code generated in the JSF page. This sample displays users in the main table and service requests in the inline detail table. The main table is defined the same as any other ADF databound table. It is bound to the LoggedInUser binding object in the page definition file, which is a tree binding object. The columns in the main table display the user's first name and last name. The table includes a detailStamp facet in which the detail table is defined. The detail table is also bound to the LoggedInUser tree binding object, and the columns are set up to display the data from the service request collection. As with tree components, the page definition file defines the accessor attribute that returns the detail collection.

Example 15-7 JSF Code Created for the Master Table with an Inline Detail Table

<af:table rows="#{bindings.LoggedInUser.rangeSize}"
          emptyText="#{bindings.LoggedInUser.viewable ? \'No rows yet.\' :
                       \'Access Denied.\'}"
          var="row" value="#{bindings.LoggedInUser.treeModel}">
  <af:column headerText="#{bindings.LoggedInUser.labels.FirstName}"
             sortable="false" sortProperty="FirstName">
    <af:outputText value="#{row.FirstName}"/>
  </af:column>
  <af:column headerText="#{bindings.LoggedInUser.labels.LastName}"
             sortable="false" sortProperty="LastName">
    <af:outputText value="#{row.LastName}"/>
  </af:column>
  <f:facet name="detailStamp">
    <af:table rows="#{bindings.LoggedInUser.rangeSize}"
              emptyText="No rows yet." var="detailRow"
              value="#{row.children}">
      <af:column headerText="#{row.children[0].labels.Status}"
                 sortable="false" sortProperty="Status">
        <af:outputText value="#{detailRow.Status}"/>
      </af:column>
      <af:column headerText="#{row.children[0].labels.ProblemDescription}"
                 sortable="false" sortProperty="ProblemDescription">
        <af:outputText value="#{detailRow.ProblemDescription}"/>
      </af:column>
    </af:table>
  </f:facet>
</af:table>

15.6.2.2 Binding Objects Defined in the Page Definition File

Example 15-8 shows the binding objects added to the page definition file for a master table with an inline detail table. The executables element defines an iterator binding named LoggedInUserIterator, which displays data from the LoggedInUser collection in the main table. No iterator binding is needed for the detail collection, because the accessor attribute referenced in the tree binding object returns the detail data that is related to the currently selected master data.

In the bindings element, the tree binding object populates the data in the master and detail tables. The nodeDefintion elements define the attributes that are displayed in the columns of the master and detail tables. The first nodeDefinition element defines the data in the master table, and the second one defines the data in the inline detail table. For more information about tree binding objects, see Section 15.4.2, "What Happens When You Create ADF Databound Trees".

Example 15-8 Binding Objects Added to the Page Definition File for a Master Table with an Inline Detail Table

<executables>
  <iterator id="LoggedInUserIterator" RangeSize="10" Binds="LoggedInUser"
            DataControl="SRService"/> 
</executables>
<bindings>
  <tree id="LoggedInUser" IterBinding="LoggedInUserIterator">
    <AttrNames>
      <Item Value="UserId"/>
      <Item Value="Email"/>
      <Item Value="FirstName"/>
      <Item Value="LastName"/>
    </AttrNames>
    <nodeDefinition DefName="oracle.srdemo.model.queries.LoggedInUser"
                    id="LoggedInUserNode">
      <AttrNames>
        <Item Value="FirstName"/>
        <Item Value="LastName"/>
      </AttrNames>
      <Accessors>
        <Item Value="ServiceRequestsByStatus"/>
      </Accessors>
    </nodeDefinition>
    <nodeDefinition DefName="oracle.srdemo.model.queries.ServiceRequestsByStatus"
                    id="ServiceRequestsByStatusNode">
      <AttrNames>
        <Item Value="Status"/>
        <Item Value="ProblemDescription"/>
      </AttrNames>
    </nodeDefinition>
  </tree>
</bindings>

15.6.3 What Happens at Runtime

When the user hides or shows the details of a row (by clicking the Hide or Show links), the table generates a DisclosureEvent event, which expands or collapses the inline detail table. The isExpanded method on this event determines whether the user is showing or hiding the detail table.

The DisclosureEvent event has an associated listener. The DisclosureListener attribute on the table is implicitly bound to the accessor attribute specified in the node rule defined in the page definition file. This accessor attribute is invoked in response to a DisclosureEvent event. For example, if the user clicks on the Show link, the accessor attribute is invoked to populate the data in the inline table.