SAP Web IDE

How to bind nested OData($expand query option) in SAPUI5?

     In this tutorial we will see how to bind nested OData in SAPUI5. We have already seen how to implement nested OData($expand query) in SAP backend. Our aim is to bind the data from an expanded entityset to a control in our SAPUI5 application.Remember expanded entityset means one set of entities and each entity will have multiple associated expanded entities.We will use a sap.m.List control inside another sap.m.List control.

Pre-requisites
  1. Open our view and put below code inside.The OData protocol provides different url parameters.We will make use of Expand parameter.The expand parameter allows the application to read associated entities with their navigational properties.I have used two expand parameters here ToFlightSchedules and ToFlightBooking.

  2.  
    <mvc:View controllerName="odataaaa.controller.View1"
      xmlns:html="http://www.w3.org/1999/xhtml"
      xmlns:f="sap.ui.layout.form"
      xmlns:mvc="sap.ui.core.mvc"
      xmlns="sap.m">
      <App>
     <pages>
       <Page title="{i18n>title}">
      <content>
       <List items="{path : '/FlightSet' , parameters:{expand : 'ToFlightSchedules,ToFlightBooking'} }">
       <items>
        <CustomListItem>
        <content>
          <Title text="Carrier ID : {Carrid}"></Title>
          <List items="{ToFlightSchedules}">
         <items>
          <ObjectListItem title="City From : {Cityfrom}" intro="City To :{Cityto}">
          </ObjectListItem>
         </items>
          </List>
        </content>
         </CustomListItem>
        </items>
       </List>
      </content>
       </Page>
     </pages>
      </App>
    </mvc:View>
    
    

  3. No coding in controller.Run the application.I have pasted the screenshot of my application.


If you enjoyed this post, Please Share!!

10 comments :

  1. i have a question, {Cityfrom} and Cityto are part of ToFlightBooking ??? if they're not so where you use ToFlightBooking ?

    ReplyDelete
    Replies
    1. No ..{Cityfrom} and Cityto are part of ToFlightSchedules.If it was part of ToFlightBooking then the line of binding the inner list will change from items={ToFlightSchedules} to items="{ToFlightBooking}".Its called relative path in binding.

      Delete
  2. HI,

    Can you provide example for Overview Page using Navigate property($Expand)

    ReplyDelete
    Replies
    1. I want example for OVP card with $expand and i would see example in your blog without $expand example : http://www.techippo.com/2017/07/SAP-Fiori-Overview-Page-Application-ListCard.html

      Delete
  3. What if the entity is a __deferred uri link instead of NavigationProperty? Will expand still work?

    ReplyDelete
  4. what if it is 1:n association ?

    ReplyDelete
    Replies
    1. If association is 1:n try giving the index as '0' in binding. Ie only one record would be there. For 1:n we shouldnt need a list control.

      Delete

Powered by Blogger.