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

Hi Experts,

1.      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 3separate 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>

2.  The portion of the view (PurchaseOrderDetails.view.xml) is shown below, in italics.

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

<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>

  3. There seems to be no need to add code in the controller, because in the same form, a list of purchase order items is shown in a table

<Table class="sapUiResponsiveMargin" headerText="{path:'viewProperties>/itemListCount', formatter: '.formatter.itemListTitle' }"

  id="poItemsTable"

items="{path: 'PurchaseOrderItems', parameters: {select: 'POId,POItemPos,Product,Price,PriceCurrency,GrossAmount,GrossAmountCurrency,Quantity,DeliveryDate'}}"

4. The complete sample app is in the attached zip.

  Thank you

  Chong Chin