How use a nested OData object on table component in SAPUI?

Question

I have following OData objects:

<?xml version="1.0" encoding="UTF-8"?>
<EntityType Name="Subscription">
   <Key>
      <PropertyRef Name="IdSuscription" />
   </Key>
   <Property Name="Amount" Type="Edm.Decimal" Nullable="false" Precision="10" Scale="2" />
   <Property Name="AutomaticRenewal" Type="Edm.String" Nullable="false" MaxLength="1" />
   <Property Name="Created" Type="Edm.DateTime" Nullable="false" />
   <Property Name="CreatedBy" Type="Edm.Int32" Nullable="false" />
   <Property Name="ExpirationDate" Type="Edm.DateTime" Nullable="true" />
   <Property Name="IdSuscription" Type="Edm.Int32" Nullable="false" />
   <Property Name="LastUpdate" Type="Edm.DateTime" Nullable="true" />
   <Property Name="Plan" Type="Edm.Int32" Nullable="false" />
   <Property Name="StartDate" Type="Edm.DateTime" Nullable="true" />
   <Property Name="Status" Type="Edm.String" Nullable="false" MaxLength="1" />
   <Property Name="UpdatedBy" Type="Edm.Int32" Nullable="true" />
   <Property Name="UserSystem" Type="Edm.Int64" Nullable="true" />
   <NavigationProperty Name="PlanDetails" Relationship="Model.Subscription_Plan_Many_One0" FromRole="Subscription" ToRole="Plan" />
   <NavigationProperty Name="UserSystemDetails" Relationship="Model.Subscription_UserSystem_Many_One0" FromRole="Subscription" ToRole="UserSystem" />
</EntityType>

<?xml version="1.0" encoding="UTF-8"?>
<EntityType Name="Plan">
   <Key>
      <PropertyRef Name="IdPlan" />
   </Key>
   <Property Name="Amount" Type="Edm.Decimal" Nullable="false" Precision="12" Scale="2" />
   <Property Name="Description" Type="Edm.String" Nullable="false" MaxLength="50" />
   <Property Name="ExpirateDate" Type="Edm.DateTime" Nullable="true" />
   <Property Name="FeaturesDescription" Type="Edm.String" Nullable="false" MaxLength="2147483647" />
   <Property Name="FreeAccount" Type="Edm.String" Nullable="true" MaxLength="1" />
   <Property Name="IdPlan" Type="Edm.Int32" Nullable="false" />
   <Property Name="Status" Type="Edm.String" Nullable="false" MaxLength="1" />
</EntityType>

I'm creating a table where I will show subscriptions and their respective plan. Plan description will show on column "Plan". But I don't get show it:

<t:Table
                        rows="{/Subscriptions?$filter=Plan eq 1}"
                        selectionMode="None">
                        <t:toolbar>
                            <Toolbar>
                                <content>
                                    <Title id="title" text="Listado de Suscripciones" />
                                    <ToolbarSpacer/>                        
                                    <Button
                                        icon="sap-icon://add"
                                        tooltip="Agregar Suscripciones"
                                        press="addSuscription"/>

                                    <Switch
                                        state="true"
                                        customTextOn="on"
                                        customTextOff="off"
                                        tooltip="enable select all items"
                                        change="onSwitchChange"/>
                                </content>
                            </Toolbar>
                        </t:toolbar>

                        <t:columns>
                            <t:Column width="10rem">
                                <Label text="Plan" />
                                <t:template>
                                    <Text text="{/PlanDetails/Description}"/>
                                </t:template>
                            </t:Column>

                            <t:Column width="6rem">
                                <Label text="Precio" />
                                <t:template>
                                    <Text text="{Amount}"/>
                                </t:template>
                            </t:Column>

                            <t:Column width="6rem">
                                <Label text="F. Inicio" />
                                <t:template>
                                    <Text text="{StartDate}"/>
                                </t:template>
                            </t:Column>

                            <t:Column width="6rem">
                                <Label text="F. Exp." />
                                <t:template>
                                    <Text text="{ExpirationDate}"/>
                                </t:template>
                            </t:Column>

                            <t:Column width="3rem">
                                <Label text="" />
                                <t:template>
                                    <Button icon="sap-icon://delete" width="38px" press="deleteSuscription"/>
                                </t:template>
                            </t:Column>
                        </t:columns>
                    </t:Table>

I tested these ways and neither of them works:

• {/PlanDetails/Description}
• {PlanDetails/Description}
• {/Plan/Description}
• {Plan/Description}

Please, I need your support.

Thanks!

Answer 1

Try the following row binding on your table. You have to expand the nested OData property "PlanDetails" as it is a navigation property.

rows="{
   path: '/Subscriptions',
   parameters: {
       expand: 'PlanDetails'
   },
   filters: [{path: 'Plan', operator: 'EQ', value1: 1}]
}"

Within your column you can use the relative path: {PlanDetails/Description}