SAPUI5 Binding Expanded Entities with different dropdown box

I have three different drop down boxes like customers, customer banks, and ship-to-party. I have expanded the above entity sets using following code but now I am confused that how to bind expanded entityset to these dropdowns.

oModel1.read("/CustomerData", {
urlParameters: {
    "$expand": "CustomerBank,ShipToParty"
} });

2 answers

  • answered 2018-01-14 20:22 Péter Cataño

    Use ComboBox.bindItems with NavigationProperties instead:

    customerBankComboBox.bindItems({path: '/CustomerData(' + customerId + ')/CustomerBank'});
    shipToPartyComboBox.bindItems({path: '/CustomerData(' + customerId + ')/ShipToParty'});
    

    You can bound customerData to view, then:

    oController.getView().setModel(customerModel);
    ...
    customerBankComboBox.bindItems({path: 'CustomerBank'});
    shipToPartyComboBox.bindItems({path: 'ShipToParty'});
    

    Depends on the use case

  • answered 2018-01-14 20:22 boghyon

    If you just want to bind expanded entities, there is no need for manual CRUD APIs such as read. You can define bindings directly in the view and UI5 will take care of handling data requests. Here is an example using Customers from Northwind leveraging Aggregation Binding and Element Binding:

    Given

    • Customers1----nOrders

    sap.ui.getCore().attachInit(() => sap.ui.xmlview({
      displayBlock: true,
      height: "100%",
      async: true,
    
      // VIEW
    
      viewContent: `<mvc:View
        xmlns:mvc="sap.ui.core.mvc"
        xmlns:core="sap.ui.core"
        xmlns="sap.m"
        controllerName="demo.MyController">
        <Select width="15rem"
          forceSelection="false"
          change=".onParentSelectionChange"
          items="{
            path: '/Customers',
            select: 'CustomerID, ContactName'
          }">
          <core:Item key="{CustomerID}" text="{ContactName}"/>
        </Select>
        <Select id="childSelect" items="{Orders}">
          <core:Item key="{OrderID}" text="{OrderID}"/>
        </Select>
      </mvc:View>`,
      
      // CONTROLLER
      
      controller: sap.ui.controller("demo.MyController", {
        onParentSelectionChange: function(event) {
          const path = event.getParameter("selectedItem").getBindingContext().getPath();
          this.byId("childSelect").bindElement(path, {
            expand: "Orders",
            select: "Orders/OrderID"
          });
        },
      }),
    
      // MODEL
      
    }).loaded().then(view => sap.ui.require([
      "sap/ui/model/odata/v2/ODataModel"
    ], ODataModel => view.setModel(new ODataModel({
      serviceUrl: "https://cors-anywhere.herokuapp.com/services.odata.org/V2/Northwind/Northwind.svc/",
      tokenHandling: false,
    })).placeAt("content"))));
    <script id="sap-ui-bootstrap"
      src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
      data-sap-ui-libs="sap.m"
      data-sap-ui-preload="async"
      data-sap-ui-theme="sap_belize"
      data-sap-ui-compatVersion="edge"
      data-sap-ui-resources='{demo: "./"}'
    ></script><body id="content" class="sapUiBody"></body>

    What Happens

    As you can see, there are two Select controls. The first one has the set of customers bound to the items aggregation. When we select an item, a change event is triggered which calls the handler onParentSelectionChange in the controller. In that, the binding path of the selected item is retrieved (e.g. "/Customers('ALFKI')") which is passed as an argument to the bindElement API. Since {Orders} was a relative path, it will be finally resolved with the given absolute path from bindElement, meaning the second control will contain only those items (Orders) which are associated to the selected customer.

    Optionally, we can also define the parameter expand in bindElement. The advantage of it is that selecting the same item gets the data from cache instead of from another round trip again.