How to Get the Data from Navigation Property of OData Service

We are creating the Master Details UI5 app. I am calling the OData service and able to display the data from an entity set in Master list. On detail section, we are creating a form and I want to display the data which is coming from Navigation entity set. As I came to know that we can not call navigation entity set in a single call, how can it be done?

<EntityType Name="Product" sap:content-version="1">
    <Key>
        <PropertyRef Name="ProductID"/>
    </Key>
    <Property Name="ProductID" Type="Edm.String" Nullable="false" MaxLength="10" sap:label="Product ID" sap:updatable="false"/>
    <Property Name="TypeCode" Type="Edm.String" Nullable="false" MaxLength="2" sap:label="Type Code"/>
    <NavigationProperty Name="ToSalesOrderLineItems" Relationship="GWSAMPLE_BASIC.Assoc_Product_SalesOrderLineItems" FromRole="FromRole_Assoc_Product_SalesOrderLineItems" ToRole="ToRole_Assoc_Product_SalesOrderLineItems"/>
    <NavigationProperty Name="ToSupplier" Relationship="GWSAMPLE_BASIC.Assoc_BusinessPartner_Products" FromRole="ToRole_Assoc_BusinessPartner_Products" ToRole="FromRole_Assoc_BusinessPartner_Products"/>
</EntityType>

I would like to show the data of ToSupplier.

Solution

Well, you can get it in a single request actually.

Lets say that your "BusinessPartner" entity has a name field and you want to display something like this:

<Panel>
   <Text id="txtProductID" text="Product ID Comes Here"/>
   <Text id="txtSupplierName" text="Supplier BP Name Comes Here"/>
</Panel>

What you can do, is to use regular binding syntax (with relative bindings), as it is usually done in details views:

<Panel>
   <Text id="txtProductID" text="{ProductID}"/>
   <Text id="txtSupplierName" text="{ToSupplier/Name}"/>
</Panel>

If you would try this directly, you would not get anything in the "Supplier Name" text control. This is because, by default you are not requesting the ToSupplier navigation to be expanded (check out chapter 4.6 from the OData Spec).

You should do this where you are calling bindElement on the detail view (in the default template, this is done in a method called _bindView of the detail controller). The expand can be passed as a parameter to the binding itself like so:

oView.bindElement({
    path: sMyPathToAProduct,
    parameters: {
        expand: "ToSupplier"
    }
});

You can expand as many navigations as you like and as deep as you like (you can pass the navigations as a comma separated list in that parameter). The only constraint here is that your backend should support expands / might have some limitations on how deep you can go with expands.