Question 266964 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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
      },
    });
  }
);
Tags:

2

Answers


  1. 0

    The best way would be to navigate to a Detail Page after selecting the desired object in your list.
    This could be done with two separate screens or with a flexible column layout. There is a tutorial for this on the UI5 documentation. Just take a look at:
    Worklist App Tutorial or Flexible Column Layout App Tutorial

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search