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}

Answer 2

If you are using sap.m.Table, you need to set the data binding of the table on the property "items". In your case is the entity "Subscription". The filter must be setted as a parameter in the property "items".

    <mvc:View
        controllerName="sap.m.sample.Table.Table"
        xmlns:l="sap.ui.layout"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns="sap.m">
        <Table id="idProductsTable"
            inset="false"

          items="{ path: '/ProductCollection',
                   filters: [{path: 'Product', operator: 'StartsWith', value1: 'B'}">

            <headerToolbar>
                <Toolbar>
                    <Title text="Products" level="H2"/>
                </Toolbar>
            </headerToolbar>
            <columns>
                <Column
                    width="12em">
                    <Text text="Product" />
                </Column>
                <Column
                    minScreenWidth="Tablet"
                    demandPopin="true">
                    <Text text="Supplier" />
                </Column>
                <Column
                    minScreenWidth="Tablet"
                    demandPopin="true"
                    hAlign="Right">
                    <Text text="Dimensions" />
                </Column>
                <Column
                    minScreenWidth="Tablet"
                    demandPopin="true"
                    hAlign="Center">
                    <Text text="Weight" />
                </Column>
                <Column
                    hAlign="Right">
                    <Text text="Price" />
                </Column>
            </columns>
            <items>
                <ColumnListItem>
                    <cells>
                        <ObjectIdentifier
                            title="{Name}"
                            text="{ProductId}"/>
                        <Text
                            text="{SupplierName}" />
                        <Text
                            text="{Width} x {Depth} x {Height} {DimUnit}" />
                        <ObjectNumber
                            number="{WeightMeasure}"
                            unit="{WeightUnit}"
                            state="{
                                path: 'WeightMeasure',
                                formatter: 'sap.m.sample.Table.Formatter.weightState'
                            }" />
                        <ObjectNumber
                                number="{
                                    parts:[{path:'Price'},{path:'CurrencyCode'}],
                                    type: 'sap.ui.model.type.Currency',
                                    formatOptions: {showMeasure: false}
                                }"
                                unit="{CurrencyCode}" />
                    </cells>
                </ColumnListItem>
            </items>
        </Table>
    </mvc:View>