Define an Expandable List

The purpose of an Expandable List is to allow the user to see more information than was traditionally possible using a simple list, without navigating away from the list page itself.

An expandable list is a list where each row can be expanded by clicking on a toggle control. In the expanded state, a page relevant to the row is displayed.

Figure 1. Person Search Page With Expandable List

1. Toggle Control
2. Page Level Action Sets

Define an Expandable List shows the Person Search page which has been modified to include an expandable list. The following are some points to note:

• A Toggle Control is added to the start of each row. It allows the row to be expanded and collapsed. It is possible to expand more than one row at a time. The size of the content area adjusts automatically to accommodate this. Refer to User Interface Element 1 in Define an Expandable List
• Page Level Action Sets are displayed as buttons when a page is viewed inline. Refer to User Interface Element 2 in Define an Expandable List.

The following is the modified code for the Person Search page:

        <PAGE PAGE_ID="SimpleSearch">

  <SERVER_INTERFACE NAME="ACTION"
    CLASS="PersonFacade"
    OPERATION="advancedSearch"
    PHASE="ACTION"/>

  ...

  <LIST TITLE="List.Title.Results">
         <DETAILS_ROW>
      <INLINE_PAGE PAGE_ID="SimplePerson">
        <CONNECT>
          <SOURCE NAME="ACTION" PROPERTY="personID"/>
          <TARGET NAME="PAGE" PROPERTY="personID"/>
        </CONNECT>
      </INLINE_PAGE>
    </DETAILS_ROW> 
        ...
  </LIST>
</PAGE>

A new element, the DETAILS_ROW, has been added to the LIST. This defines the inline page that will be displayed when a row is expanded, including the parameters that will be passed to that page for each row.