UI5 List: Expandable Panels with Search
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.
Hi Scott,
Great blog! Just happen to be doing this exact thing right now. Very helpful 🙂
Thanks!
Brad
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:
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:
I hope this answers your question.
Cheers,
Michael
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