CODEWITHSUNDEEP
sapui5
Chong Chin
Chong Chin

Reputation: 31

SAPUI5 - How to bind fields of child entity in same panel as fields of parent entity in SAP Friori Sample "Approve PO" app?

In the SAP Sample "Approve Purchase Order" application, that comes with the SAP Web IDE, how do I bind fields of "Supplier" entity (child) in the same "Simple Form" UI container control as the fields of "PurchaseOrder" (parent) entity. In this sample, there are 3 separate mock data files, one each for "Purchase Order", "Purchase Order Items" and "Supplier". The relationship between Purchase Order and Supplier is 1:1 defined in the metadata.xml using association.

a) PurchaseOrder (relevant portion only)

<EntityType Name="PurchaseOrder" sap:content-version="1" sap:is-thing-type="true">
    <Key>
        <PropertyRef Name="POId"/>
    </Key>
    <Property MaxLength="10" Name="POId" Nullable="false" Type="Edm.String" sap:creatable="false" sap:filterable="false"
        sap:label="Purchase Order ID" sap:updatable="false"/>
    <Property MaxLength="10" Name="OrderedById" Nullable="false" Type="Edm.String" sap:creatable="false" sap:filterable="false"
    <Property MaxLength="10" Name="SupplierId" Nullable="false" Type="Edm.String" sap:creatable="false" sap:filterable="false" sap:label="ID"
        sap:sortable="false" sap:updatable="false"/>

b) Supplier (relevant portion only)

<EntityType Name="Supplier" sap:content-version="1" sap:is-thing-type="true">
    <Key>
        <PropertyRef Name="Id"/>
    </Key>
    <Property MaxLength="10" Name="Id" Nullable="false" Type="Edm.String" sap:creatable="false" sap:filterable="false" sap:label="ID"
        sap:sortable="false" sap:updatable="false"/>
    <Property MaxLength="255" Name="Email" Nullable="false" Type="Edm.String" sap:creatable="false" sap:filterable="false" sap:label="E-Mail"
        sap:semantics="email" sap:sortable="false" sap:updatable="false"/>

c) Association

<Association Name="PurchaseOrderSupplier" sap:content-version="1" sap:label="Association: Supplier --&gt; Purchase Order">
    <End Multiplicity="1" Role="FromRole_PurchaseOrderSupplier" Type="EPM_REF_APPS_PO_APV_SRV.Supplier"/>
    <End Multiplicity="*" Role="ToRole_PurchaseOrderSupplier" Type="EPM_REF_APPS_PO_APV_SRV.PurchaseOrder"/>
    <ReferentialConstraint>
        <Principal Role="FromRole_PurchaseOrderSupplier">
            <PropertyRef Name="Id"/>
        </Principal>
        <Dependent Role="ToRole_PurchaseOrderSupplier">
            <PropertyRef Name="SupplierId"/>
        </Dependent>
    </ReferentialConstraint>
</Association>

The portion of the view (PurchaseOrderDetails.view.xml) is shown below. All the fields, except Email is from the parent, PurchaseOrder entity.

<form:SimpleForm class="sapUiForceWidthAuto sapUiResponsiveMargin" columnsL="1" columnsM="1" emptySpanL="5" emptySpanM="5" id="poHeaderForm"
    labelSpanL="3" labelSpanM="3" layout="ResponsiveGridLayout" maxContainerCols="2" minWidth="1024" title="{i18n>xtit.formTitle}">
    <Label id="poIdFormLabel" text="{/#PurchaseOrder/POId/@sap:label}"/>
    <Text id="poIdForm" text="{POId}"/>
    <Label id="addressFormLabel" text="{/#PurchaseOrder/DeliveryAddress/@sap:label}"/>
    <Text id="addressForm" text="{DeliveryAddress}"/>
    <Label id="supplierEmailLabel" text="{/#Supplier/Email/@sap:label}"/>
    <Text id="supplierEmail" text="{/PurchaseOrder/Id/Email}"/>
</form:SimpleForm>

I have tried many permutations to bind the field, Email, from the Supplier entity viz: a) {/Id/Email}, b) {path: 'Supplier' , parameters: {Select 'Email'}} but the result has been a blank space.

Please show the correct binding syntax for "Email".

Upvotes: 1

Views: 3880

Answers (1)

Nabi
Nabi

Reputation: 2566

Your metadata.xml snippet does not contain a NavigationProperty to the supplier. Therefore, your Association is not recognized... You have to fix your metadata.xml first. After this you can easily do the following:

<Text id="supplierEmail" binding="{Supplier}" text="{Email}"/>

This assumes that the navigation property of your you have named your NavigationProperty "Supplier" inside your PurchaseOrder Entity. In that case I also suggest you to use $expand=Supplier in the binding in order to get the Supplier data in the same request (the one for the PurchaseOrder), i.e. something like this:

items="{
    path: '/PurchaseOrderItems',
    parameters: {
        'expand': 'Supplier'
    }
}"

After this you could simply use this without the binding attribute because you have 'expanded':

<Text id="supplierEmail" text="{Supplier/Email}"/>

Upvotes: 2

Related Questions