14.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 13.3.2.1, "Using Facets". Figure 14-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 14-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 composite component. For more information about master-detail relationships and the use of the master-detail composite component, see Section 15.6, "Using an Inline Table to Display Detail Data in a Master Table".

14.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 the facet. You can also set an attribute on the table that creates a link that allows a user to show or hide all details at once.

To use the detailStamp facet:

From the Data Control Palette, drag the attribute to be displayed in the facet onto the detailStamp facet folder. Figure 14-5 shows how the detailStamp facet folder appears in the Structure window.

Figure 14-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 in the Structure window. Then 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>
```

14.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. Since the table was created using the ServiceRequestsByStatus collection, you can drag the ProblemDescription attribute and drop it inside the detailStamp facet folder in the Structure window.

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

Example 14-3 JSF Code for a detailStamp Facet

<f:facet name="detailStamp">
  <af:outputText value="#{bindings.ServiceRequestsByStatusProblemDescription.inputValue}"/>
</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 14-4 shows how the code should appear after using the row variable.

Example 14-4 Modified JSF Code for a detailStamp Facet

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

14.5.3 What Happens at Runtime

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

The DisclosureEvent event 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 event to execute any needed post-processing.