Skip to Content

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.

ListPanelFilter.JPG

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.

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  1. Michael Lehmann

    How could a solution look like if {Content} is a array with another list of items. Can it be done with a nested list?


    Lets say your Json model looks like:


    {

      “ItemSet” : [

        {

          “Header” : “Apple”,

          “Content” : [

            {

                “name: “Apple Juice”,

            },

            {

                “name: “Apple Pie”,

            },

          ]

        },

        {

          “Header” : “Blackberry”,

          “Content” : “Blackberry Pie”

        },

        {

          “Header” : “Blueberry”,

          “Content” : “Blueberry Pie”

        }

      ]

    }

    How should the data binding be done:

    1. <Page title=“UI5 List: Expandable Panels with Search “ > 
    2.   <subHeader> 
    3.    <Bar id=“searchBar”> 
    4.      <contentMiddle> 
    5.        <SearchField id=“idSearchField” liveChange=“onSearch” /> 
    6.      </contentMiddle> 
    7.    </Bar> 
    8.   </subHeader> 
    9.         <content> 
    10.           <List id=“idList” items=“{/ItemSet}” > 
    11.             <items> 
    12.               <CustomListItem> 
    13.                 <Panel expandable=“true” expanded=“false” headerText=“{Header}” > 
    14.                   <content> 
    15.                     <List  id=“nestedList” items=“{/ItemSet/0}”>???</list>
    16.                   </content> 
    17.                 </Panel> 
    18.               </CustomListItem> 
    19.             </items> 
    20.           </List> 
    21.         </content> 
    22.       </Page> 
    (0) 
    1. Michael Gorka

      Hi Michael,

      It’s Michael here. I am not sure whether you found a solution to your issue but I had the same requirement and the following code snippet worked for me:

         

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

                  <items>

                    <CustomListItem>

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

                        <content>

                          <List items=”{path: ‘Content’}” >

                               <StandardListItem title=”{Name}” />

                          </List>

                        </content>

                      </Panel>

                    </CustomListItem>

                  </items>

                </List>

      The nested list should just use the array name for the path without the slash to just keep appending to the entity’s path. Then you can just use the name of the attribute to display whatever content you want to see.

      I changed the Json slight to the following:

      {

              “ItemSet” :

              [

                  {

                    “Header” : “Apple”,

                    “Content” : [

                      {

                          “Name”: “Apple Juice”

                      },

                      {

                          “Name”: “Apple Pie”

                      }

                    ]

                  },

                  {

                    “Header” : “Blackberry”,

                    “Content” : [

                      {

                          “Name”: “Blackberry Pie”

                      }

                    ]

                  },

                  {

                    “Header” : “Blueberry”,

                    “Content” : [

                      {

                          “Name”: “Blueberry Pie”

                      }

                    ]

                  }

              ]

          };

      The output looks something like this:

      Capture.JPG

      I hope this answers your question.

      Cheers,

      Michael

      (0) 
  2. Fritz Jordan

    Hi,

    I’ve added a simple form with some Input fields inside the panel, and also applied the list grouping for a specific field; however, as soon as i finish editing one of the inputs within the form, the expanded panel collapses automatically. This is caused by the grouping since when deactivating the group, it works fine. Any ideas on how to prevent the panel to collapse when using the group on the parent List?

    Thank you,

    Fritz

    (0) 

Leave a Reply