Additional Blogs by Members
cancel
Showing results for 
Search instead for 
Did you mean: 
scott_stefanich
Active Participant

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.

4 Comments