UI5 List: Expandable Panels with Search

[scott_stefanich]

A SCN question prompted me to bump an item up my eternal to-do list: Create a UI5 list with items which are expandable, collapsible, and searchable.

In UI5 terminology,

• The sample app has an XML view with a List.
• The List uses a Custom List Item with a Panel.
• The List Items are bound to a model and filtered using a Search Field.

The Page in the XML View:

<Page title="UI5 List: Expandable Panels with Search " >

  <subHeader>

   <Bar id="searchBar">

     <contentMiddle>

       <SearchField id="idSearchField" liveChange="onSearch" />

     </contentMiddle>

   </Bar>

  </subHeader>

        <content>

          <List id="idList" items="{/ItemSet}" >

            <items>

              <CustomListItem>

                <Panel expandable="true" expanded="false" headerText="{Header}" >

                  <content>

                    <Text text="{Content}" />

                  </content>

                </Panel>

              </CustomListItem>

            </items>

          </List>

        </content>

      </Page>

The complete source code is available on GitHub.