a question about CustomListItem

[raffinkira]

I have built an XML view as follow:

<List

id="people_list"

class="sapUiResponsiveMargin"

headerText="Custom Content"

items="{people>/People}">

<items>

<CustomListItem>

<Button text="{people>ProductName}"/>

</CustomListItem>

<CustomListItem>

<Label text="{people>ProductName}"/>

</CustomListItem>

</items>

</List>

"people" is JSON model in walkthrough sample.

I want to show a list of customizing item, which has two levels, a button above and a label below.

But what I get is only Labels, with Buttons disappearing as the attached picture shows.

I am wondering what's wrong with my code.

[saivellanki · Accepted solution]

Hi Ming,

You have to place both the controls in content Aggregation of CustomListItem like this -

<CustomListItem>
<content>
 <Label text="{people>ProductName}"/>
<Button text="{people>ProductName}"/>
</content>
</CustomListItem>

Check the API for reference - JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m.CustomListItem

Regards,

Sai Vellanki.

[raffinkira · Accepted solution]

Hi,

In this case, the Label and the Button is side-by-side.

What I want is to set the Button above the Label.

I have read a sample code, it uses two CustomListItem to hold the Label and Button separately, and then Label begins with a new line.

[raffinkira · Accepted solution]

I have worked it out, just use the CSS to make the Lable a block element instead of inline.

Thank you.

[santhu_gowdaz]

2nd Label is overrinding because of <items>, so <CustomListItem> add both else remove <items>.

try,

<List

id="people_list"

class="sapUiResponsiveMargin"

headerText="Custom Content"

items="{people>/People}">

<items>

<CustomListItem>

<Button text="{people>ProductName}"/>

<Label text="{people>ProductName}"/>

</CustomListItem>

</items>

</List>

or

<List

id="people_list"

class="sapUiResponsiveMargin"

headerText="Custom Content"

items="{people>/People}">

<CustomListItem>

<Button text="{people>ProductName}"/>

</CustomListItem>

<CustomListItem>

<Label text="{people>ProductName}"/>

</CustomListItem>

</List>

JS Bin - Collaborative JavaScript Debugging

OpenUI5 Explored

[raffinkira]

The second one is not working.

Anyway, I found this is enough.

<List>

<CustomListItem>

<Label text="{people>ProductName}" class = "label01"/>

<Label text="{people>ShipperName}" class = "label02"/>

</CustomListItem>

<List>

It seems we don't need <item> and <content>