how to show information about the object when I select it from a list in SAPUI5?

Question

I would like to ensure that when I select an element in my list all the details are shown to me, I wrote a function but I'm probably doing something wrong and since I'm new to SAPUi5 I would like to understand how I can do it and what I'm doing wrong. I'm using this as a data source

https://services.odata.org/V2/Northwind/Northwind.svc/Products/?$format=json

this is my Home xml

<mvc:View
    xmlns:core="sap.ui.core"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:main="sap.ui.webc.main"
    controller="com.ntditalia.prodotti.controller.Home"
>
    <ScrollContainer
        height="100%"
        width="100%"
        vertical="true"
        focusable="true"
    >
        <List
            headerText="BIO Products"
            items="{/Products}"
        >
            <CustomListItem type="Active">
                <HBox>
                    <core:Icon
                        size="2rem"
                        src="sap-icon://e-care"
                        color="green"
                        class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom"
                    />
                    <VBox
                        class="sapUiSmallMarginBegin sapUiSmallMarginTopBottom"
                    >
                        <Label text="ID : {ProductID}" />
                        <Link
                            text="Product Name : {ProductName}"
                            press=".onDetailPress"
                        />
                    </VBox>
                </HBox>
            </CustomListItem>
        </List>
    </ScrollContainer>
    <!-- <StandardListItem id="slist" type="Active" title="{ProductName},{ProductID}" /> -->
</mvc:View>

this is my js controller

sap.ui.define(
  ["sap/ui/core/mvc/Controller"],
  /**
   * @param {typeof sap.ui.core.mvc.Controller} Controller
   */
  function (Controller) {
    "use strict";

    return Controller.extend("com.ntditalia.prodotti.controller.Home", {
      onInit: function () {},

      onDetailPress: function (oEvent) {
        var oObject = oEvent
          .getSource()
          .getBindingContext("/Products")
          .getObject("ProductName");
        // from this bject, you can do oObject.CustomerID
      },
    });
  }
);

Answer 1

You are currently calling the onDetailPress function when clicking the link inside your CustomListItem, but not from the whole ListItem itself. You can assign the function onto the item with <CustomListItem press="onDetailPress">, and then inside your function the following:

onDetailPress: function (oEvent){
   const oObject = oEvent.getSource().getBindingContext().getObject();
   //Do whatever you want with your Object, navigate to a DetailView, bind it to a dialogue etc.
}

Since you are using the unnamed default Datamodel from SAPUI5 for your entity you have no BindingContext as e.g. "viewModel" or so.