UI5 is a versatile framework with numerous possibilities, but sometimes I find myself struggling to implement ideas that would be easier in traditional HTML. Here's the scenario: I want to create a List with ListItems that display cities like Berlin, Los Angeles, Moscow, etc. Each ListItem should have an icon (or button) that, when clicked, reveals another ListItem displaying the address. Clicking on this address ListItem should then show a map - which is functional and would work if only a StandardListItem was used. The issue? It doesn't provide the desired layout for my needs!
For example:
- Berlin -> click -> 123456 Example Street
- Moscow
- Los Angeles
Or:
- Berlin
- Moscow
- Los Angeles -> click -> 654321 Example Address
Here's a snippet of the code I currently have:
view:
<List id="campusList"
items="{
path: '/',
sorter: {
path: 'city',
descending: false
}
}"
mode="SingleSelectMaster"
itemPress="handleListItemPress"
growing="true">
<InputListItem label="{city}" >
<core:Icon src="sap-icon://navigation-down-arrow" press="showDetails" />
<StandardListItem type="Navigation" title="{buildingName}" description="{buildingDesc}" />
</InputListItem>
</List>
controller:
jQuery.sap.require("www.adress.com.GeneralHelper");
sap.ui.controller("www.adress.com.LocationList", {
...
I also have a local-demo-data-json file that is loaded from an UpdateHelper.
Note: I aim to avoid using jQuery methods like $().hide and $().show, preferring UI5 solutions instead.