当我从SAPUI5中的列表中选择对象时，如何显示有关该对象的信息？

Question

我想确保当我在列表中选择一个元素时，所有详细信息都会显示给我，我编写了一个函数，但我可能做错了什么，因为我是 SAPUi5 的新手，所以我想了解如何我可以做到以及我做错了什么。我用它作为数据源

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

这是我的主页 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>

这是我的js控制器

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

最好的方法是在列表中选择所需的对象后导航到详细信息页面。 这可以通过两个单独的屏幕或灵活的列布局来完成。 UI5 文档中有相关教程。看看： 工作列表应用程序教程或灵活的列布局应用程序教程