7.5 Adding Hidden Capabilities to a Table

You can use the detailStamp facet in a table to include data that can be displayed or hidden. When you add a component to this facet, the table displays an additional column labeled Details with a toggle. When the user activates the toggle, the component added to the facet is shown. When the user clicks on the toggle again, the component is hidden. For more information about facets in general, see Section 6.3.2.1, "Using Facets". Figure 7-4 shows how the description of a service request in an outputText component can be hidden or shown in the table (note that this functionality does not currently exist in the SRDemo application).

Figure 7-4 Table with an Output UI Component in the detailStamp Facet

Problem description text can be hidden below the row.

If you wish to show details of another object that has a master-detail relationship (for example, if you wanted to show the details of the person to whom the service request is assigned), you could use the Master Table-Inline Detail widget. For more information about master-detail relationships and the use of this widget, see Section 8.6, "Displaying Detail Information Using an Inline Table".

7.5.1 How to Use the detailStamp Facet

To use the detailStamp facet, you insert a component that is bound to the data to be displayed or hidden into this facet. You can also set an attribute on the table that creates a link which allows a user to show or hide all details at once.

To use the detailStamp facet:

Drag the attribute to be displayed in the facet from the Data Control Palette onto the detailStamp facet folder. Figure 7-5 shows how the detailStamp facet folder appears in the Structure window.

Figure 7-5 The detailStamp Facet Folder in the Structure Window
From the ensuing context menu, choose the UI component to display the attribute.
If you want a link to allow users to hide or show all details at once, select the table tag in the Structure window. In the Property Inspector, set the allDetailsEnabled attribute to true.
If the attribute to be displayed is specific to a current record, then you need to replace the JSF code (which simply binds the component to the attribute), so that it uses the table's variable to display the data for the current record.

For example, when you drag an attribute, JDeveloper inserts the following code:
```
<f:facet name="detailStamp">  <af:outputText value="#{bindings.<attributename>.<inputValue>}"/></f:facet>
```
You need to change it to the following:
```
<f:facet name="detailStamp">
  <af:outputText value="#{row.<attributename>}"/>
</f:facet>
```

7.5.2 What Happens When You Use the detailStamp Facet

When you drag an attribute in the detailStamp facet folder, JDeveloper adds the attribute value binding to the page definition file if it did not already exist, and it also adds the code for facet to the JSF Page.

For example, say on the SRList page you want the user to be able to optionally hide the service request description as shown in Figure 7-4. Since the table was created using the findServiceRequest(Integer, String) method, you can drag the problemDescription attribute and drop it inside the detailStamp facet folder in the Structure window.

Example 7-3 shows the code JDeveloper then adds to the JSF page.

Example 7-3 JSF Code for a detailStamp Facet

<f:facet name="detailStamp">
  <af:outputText value="#{bindings.problemDescription.inputValue}"
                id="outputText7"/>
</f:facet>

You then need to change the code so that the component uses the table's variable to access the correct problem description for each row. Example 7-4 shows how the code should appear after using the row variable.

Example 7-4

<f:facet name="detailStamp">
  <af:outputText value="#{row.problemDescription}"
                 id="outputText7"/>
</f:facet>

7.5.3 What Happens at Runtime

When the user hides or shows the details of a row, the table generates a DisclosureEvent (or a DisclosureAllEvent when the allDetailsEnabled attribute on the table is set to true). This event tells the table to toggle the details (either expand or collapse).

The DisclosureEvent has an associated listener. You can bind the DisclosureListener attribute on the table to a method on a managed bean. This method will then be invoked in response to the DisclosureEvent to execute any needed post-processing.