Add button in sap.m.list row

Question

I want to add buttons to each row in my sap.m.List. On that button I want to open a popup to display further details without navigating to another page.

Any code snippet or examples out there how I can add buttons to each row and bind them to fetch data from another model.

Answer 1

Instead of the StandardListItem you need a CustomListItem. There you can add any control you like:

<List headerText="Custom Content" items="{path: '/ProductSet'}" >
    <CustomListItem>
        <HBox>
            <Label text="{ProductName}"/>
            <Button text="More Infos" click="onPressMoreInfos" />
        </HBox>
    </CustomListItem>
</List>

I think the tricky part here is the binding. One CustomListItem is bound to a single entity of your set. If you add a Button to your CustomListItem (or any other control) they are also automatically bound to the specific entity.

So in your click handler you can do the following:

onPressMoreInfos: function(oEvent) {
    var oButton = oEvent.getSource();

    // if your model has a name, don't forget to pass it as a parameter
    var oContext = oButton.getBindingContext();

    // create the popover, either here or in a new method
    var oPopover = this.getTheInfoPopover();
    // if your model has a name, don't forget to pass it as the second parameter
    oPopover.setBindingContext(oContext);
}

Then your Popover has the same binding information as the list item and you can access every property of the specific entity.