How to bind oData service to a SAPUI5 table when it has $expand parameter

[Former Member]

How to bind oData service to a SAPUI5 table when it uses an OData $expand parameter

<Table id="contactPickerTable" items="{path: 'modelPersons>/ContactSet', filters : [{path : 'Customer',operator : 'EQ',value1:'2035235403'}] parameters : {expand:'Address'}}" > ..... <ObjectIdentifier title="{modelPersons>Title}" text="{modelPersons>PersonId}" /> 

I know the above example of list binding data to a table works. But if there is $expand in my service then how can I display properties of the returned collection in ObjectIdentifier? I mean what will be context path?

[former_member184867]

Here is a sample code for Odata service http://services.odata.org/V2/(S(2gnigrzntntmxnrstu2nhci2))/OData

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons"   xmlns:Table="sap.ui.table">
             <Table:Table  rows="{path : 'modelPersons2>/Products'  , parameters:{expand : 'Supplier'} }">
             <Table:columns>
               <Table:Column>
                     <Table:label>
  <Label text="Product ID" />
  </Table:label>
  <Table:template>
  <Label text="{modelPersons2>ID}" />
  </Table:template>

               </Table:Column>

               <Table:Column>
                     <Table:label>
  <Label text="Supplier Name ( Expanded Property)" />
  </Table:label>
  <Table:template>
  <Label text="{modelPersons2>Supplier/Name}" />
  </Table:template>

               </Table:Column>

                </Table:columns>
             </Table:Table> 
           </core:View> 

you can see it working in JS Bin - Collaborative JavaScript Debugging</title>  <link rel="icon" href="...

[Former Member]

Hello Malliik,

Thanks for your response. Am unable to achieve it as you said above {modelPersons2>Supplier/Name}.

Here is my sample response:

<entry>
<id></id>
<title type="text">PartnerSet('2010002791')</title>
<updated>2014-05-24T08:05:58Z</updated>
...
<link href="PartnerSet('2010002791')" rel="self" title="Partner"/>
<link href="PartnerSet('2010002791')/Address" rel="http://schemas.microsoft.com/ado/2007/08/dataservices/related/Address" type="application/atom+xml;type=feed" title="Address">
<m:inline>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" >
<id>PartnerSet('2010002791')/Address</id>
<title type="text">AddressSet</title>
<updated>2014-05-24T08:05:58Z</updated>
<author>
<name/>
</author>
<link href="PartnerSet('2010002791')/Address" rel="self" title="AddressSet"/>
<entry>
<id></id>
<title type="text">AddressSet('')</title>
<updated>2014-05-24T08:05:58Z</updated>
...
<d:FirstName>DM LABO SARL</d:FirstName>
<d:Name>DIDIER MARTIN LABORATOIRE</d:Name>
<d:Name3/>
...
...

In this case how can I show 'FirstName' and 'Name'?

[former_member184867]

In your case the cardinality of the expanded entity probably 1:N or 1:M, and so you are getting an feed inside <inline> tag. In my example I am getting only one dependent entity , so I can bind it directly in the table.

If possible, change the cardinality between parent and child entity,  to 1:1 so that you do not get the feed and in that case you will be able to bind easily as I have shared in my example.

Or you bind some control that can hold multiple instances such as a drop down .

[Former Member]

I confirmed with backed developer, it is 1:M and we can not change it to 1:1. I have to show this in Table controller.

Please help me how can I achieve it now.

[former_member184867]

So that means for a single parent entity you have multiple Name and First Name ?? It sounds little strange..  Does that mean you really have  a possibility of getting multiple Name and First Name or is the OData service is developed with 1:M , but will always have only one dependent entity ?

If it is really 1:M and the use case is valid, then how do you plan to design the UI ?

[Former Member]

Am not sure as I am new to these technologies.

In a simple words,

* without $expand service gives a list of partners

* with $expand service will gives a list of partners along with their address entity

I can display value of all the properties of partner but I cant display value of any property of address.

[jens_wachtel]

Hi Atanu,

maybe he wanted to achieve the same I'd like to do:

For the 1:M, I was looking to retrieve/select only the first expanded entity, but have no idea if that's possible. ( I can't find an example)

I thought of a binding like that:

<Label text="{modelPersons2>Supplier/Name[0]}" />  

In my domain, it would refer to a Restaurant and their expanded navigate to multiple Inspections. (1:M)

(I'll need to grab from the first Inspection entity an attribute called "Grade" which is part of the Inspection model)

Not sure, if I rather should re-model my Restaurant entity to include the latest Grade or if there's a way to do this in the front-end?

Thanks,

Jens

[Former Member]

Hi All,

I'm able to bind using expand . But only  fields from one entity and facing issue in displaying fields from second entity.

<Table items="{path: '/Category',parameters:{expand:'Supplier/Consumer'} />

<Text text="{supplier/Id}" /> // this way able to display data from expanded entity Supplier.

However,

<Text text="{Supplier/Consumer/Name}" /> // data from Consumer entity are no getting displayed.

Can you please suggest on this?

regards

Ramana

Message was edited by: Ramana Yellapu

[former_member103241]

I had same issue and was able to fix it by binding the table items to the child entity set using navigation name like this:

<Table items="{Consumer}">

I assume Consumer is your navigation name which links the parent with the child

[Former Member]

With reference to above post , in Table ->Items attribute -> Use items="{Items>/0/HeaderItemNP/results/}" . See the bold code in view.

In controller use expand keyword to fetch the items. In  backend expanded_entity_set is being implemented.

Here the navigation property id HeaderItemNP.

Data is coming in an array - Entityset

View

<mvc:View controllerName="cgiVendorReturn.view.Detail"

  xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"

  xmlns="sap.m">

  <Page showNavButton="{device>/isPhone}" navButtonPress="onNavBack"

    class="sapUiFioriObjectPage" title="{i18n>detailTitle}">

    <content>

      <ObjectHeader title="{Items>/0/Mblnr}" tooltip="{i18n>detailArticleDoc}">

        <attributes>

          <ObjectAttribute text="{Items>/0/Mjahr}" tooltip="{i18n>detailArticleDocYear}"/>

          <ObjectAttribute text="" />

        </attributes>

      </ObjectHeader>

      <IconTabBar select="" id="idIconTabBar">

        <items>

          <IconTabFilter key="category"

            text="{i18n>detailIconTabFilterCategory}" icon="sap-icon://hint">

            <content>

              <f:SimpleForm id="SimpleFormDisplay3541" minWidth="1024"

                maxContainerCols="2" editable="false" layout="ResponsiveGridLayout"

                title="" labelSpanL="3" labelSpanM="3" emptySpanL="4"

                emptySpanM="4" columnsL="1" columnsM="1">

                <f:content>

                  <Label text="{i18n>detailPostingDate}" />

                  <Text

                    text="{

                      path:'Items>/0/Budat',

                      formatter:'cgiVendorReturn.util.Formatter.dateFormat'}" />

                  <Label text="{i18n>detailDocumentDate}" />

                  <Text

                    text="{

                      path:'Items>/0/Bldat',

                      formatter:'cgiVendorReturn.util.Formatter.dateFormat'}" />

                  <Label text="{i18n>detailReferenceDoc}" />

                  <Text text="{Items>/0/Xblnr}" />

                  <Label text="{i18n>detailDocHeaderText}" />

                  <Text text="{Items>/0/Bktxt}" />

                </f:content>

              </f:SimpleForm>

            </content>

          </IconTabFilter>

          <IconTabFilter key="supplier"

            text="{i18n>detailIconTabFilterSupplier}" icon="sap-icon://supplier">

            <content>

              <f:SimpleForm id="SimpleFormDisplay354" minWidth="1024"

                maxContainerCols="2" editable="false" layout="ResponsiveGridLayout"

                title="" labelSpanL="3" labelSpanM="3" emptySpanL="4"

                emptySpanM="4" columnsL="1" columnsM="1">

                <f:content>

                  <Label text="{i18n>detailSupplierCode}" />

                  <Text text="{Items>/0/Lifnr}" />

                  <Label text="{i18n>detailSupplierName}" />

                  <Text text="{Items>/0/Name1}" />

                </f:content>

              </f:SimpleForm>

            </content>

          </IconTabFilter>

        </items>

      </IconTabBar>

      <Table id="idItemTable" inset="false" mode="MultiSelect"

        items="{Items>/0/HeaderItemNP/results/}">

        <headerToolbar>

          <Toolbar>

            <Label text="Item(s)"></Label>

          </Toolbar>

        </headerToolbar>

        <columns>

          <Column minScreenWidth="Tablet" hAlign="Left">

            <Text text="{i18n>detailArticle}" />

          </Column>

          <Column minScreenWidth="Tablet" hAlign="Center">

            <Text text="{i18n>detailPONo}" />

          </Column>

          <Column minScreenWidth="Tablet" hAlign="Right">

            <Text text="{i18n>detailQtyRec}" />

          </Column>

          <Column minScreenWidth="Tablet" hAlign="Center">

            <Text text="{i18n>detailUom}" />

          </Column>

          <Column minScreenWidth="Tablet" hAlign="Right">

            <Text text="{i18n>detailQtyReturn}" />

          </Column>

          <Column minScreenWidth="Tablet" hAlign="Right">

            <Text text="{i18n>detailReturnReason}" />

          </Column>

        </columns>

        <items>

          <ColumnListItem>

            <cells>

              <ObjectIdentifier title="{Items>Matnr}" text="{Items>Maktx}" />

              <ObjectIdentifier title="{Items>Ebeln}" text="{Items>Ebelp}" />

              <Text text="{Items>Menge}" />

              <ObjectNumber number="" unit="{Items>Meins}" />

              <Input xmlns="sap.m" visible="true" placeholder="Enter Qty..."

                textAlign="Right" value="{Items>Menge1}"/>

              <ComboBox xmlns="sap.m" value="" placeholder="Reason..."

                selectedKey="{Items>Grund}" selectedItemId="" selectedItem="" change=""

                selectionChange="">

                <items>

                  <Item xmlns="sap.ui.core" text="Poor Quality" enabled="true"

                    textDirection="Inherit" key="0001">

                  </Item>

                  <Item xmlns="sap.ui.core" text="Incomplete" enabled="true"

                    textDirection="Inherit" key="0002">

                  </Item>

                  <Item xmlns="sap.ui.core" text="Damaged" enabled="true"

                    textDirection="Inherit" key="0003">

                  </Item>

                </items>

              </ComboBox>

            </cells>

          </ColumnListItem>

        </items>

      </Table>

    </content>

    <footer>

      <Toolbar xmlns="sap.m" active="false" design="Auto">

        <ToolbarSpacer />

        <Button xmlns="sap.m" text="{i18n>detailPost}" type="Default"

          icon="sap-icon://save" id="idPost" press="onPost">

        </Button>

        <Button xmlns="sap.m" text="{i18n>detailReset}" type="Default"

          icon="sap-icon://redo" id="idReset" press="onReset">

        </Button>

      </Toolbar>

    </footer>

    <Dialog xmlns="sap.m" title="{i18n>detailPostTitle}" id="iddialogConfirmation"

      stretchOnPhone="true" visible="false">

      <content>

        <VerticalLayout xmlns="sap.ui.layout">

          <Label xmlns="sap.m" text="{i18n>detailPostText}" />

        </VerticalLayout>

      </content>

      <beginButton>

        <Button xmlns="sap.m" text="{i18n>detailYes}" type="Accept"

          icon="sap-icon://accept" press="onPostSubmitButton" />

      </beginButton>

      <endButton>

        <Button xmlns="sap.m" text="{i18n>detailNo}" type="Reject"

          icon="sap-icon://sys-cancel" press="onPostCancelButton" />

      </endButton>

    </Dialog>

    <Dialog xmlns="sap.m" title="{i18n>detailResetTitle}" id="idresetConfirmation"

      stretchOnPhone="true" visible="false">

      <content>

        <VerticalLayout xmlns="sap.ui.layout">

          <Label xmlns="sap.m" text="{i18n>detailResetText}" />

        </VerticalLayout>

      </content>

      <beginButton>

        <Button xmlns="sap.m" text="{i18n>detailYes}" type="Accept"

          icon="sap-icon://accept" press="onResetSubmitButton" />

      </beginButton>

      <endButton>

        <Button xmlns="sap.m" text="{i18n>detailNo}" type="Reject"

          icon="sap-icon://sys-cancel" press="onResetCancelButton" />

      </endButton>

    </Dialog>

  </Page>

</mvc:View>

Controller

getItems:function(oEvent){

        var fnSuccess = function(data) {

            var oModel = new sap.ui.model.json.JSONModel(data);

            detailView.getView().setModel(oModel, "Items");

        };

        var fnError = function(data) {

            console.log('Error');

        };

        var params = "$expand=HeaderItemNP&$filter=Mblnr eq '" + oEvent.Mblnr + "' and Mjahr eq '" +  oEvent.Mjahr + "'";

        util.PersistenceHelper.getInstance("oModel").read(

                "/HeaderSet",params    , fnSuccess, fnError);

    },

[Former Member]

Here the navigation property id HeaderItemNP.

Data is coming in an array - Entityset

View

<mvc:View controllerName="cgiVendorReturn.view.Detail"

  xmlns:f="sap.ui.layout.form" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core"

  xmlns="sap.m">

  <Page showNavButton="{device>/isPhone}" navButtonPress="onNavBack"

    class="sapUiFioriObjectPage" title="{i18n>detailTitle}">

    <content>

      <ObjectHeader title="{Items>/0/Mblnr}" tooltip="{i18n>detailArticleDoc}">

        <attributes>

          <ObjectAttribute text="{Items>/0/Mjahr}" tooltip="{i18n>detailArticleDocYear}"/>

          <ObjectAttribute text="" />

        </attributes>

      </ObjectHeader>

      <IconTabBar select="" id="idIconTabBar">

        <items>

          <IconTabFilter key="category"

            text="{i18n>detailIconTabFilterCategory}" icon="sap-icon://hint">

            <content>

              <f:SimpleForm id="SimpleFormDisplay3541" minWidth="1024"

                maxContainerCols="2" editable="false" layout="ResponsiveGridLayout"

                title="" labelSpanL="3" labelSpanM="3" emptySpanL="4"

                emptySpanM="4" columnsL="1" columnsM="1">

                <f:content>

                  <Label text="{i18n>detailPostingDate}" />

                  <Text

                    text="{

                      path:'Items>/0/Budat',

                      formatter:'cgiVendorReturn.util.Formatter.dateFormat'}" />

                  <Label text="{i18n>detailDocumentDate}" />

                  <Text

                    text="{

                      path:'Items>/0/Bldat',

                      formatter:'cgiVendorReturn.util.Formatter.dateFormat'}" />

                  <Label text="{i18n>detailReferenceDoc}" />

                  <Text text="{Items>/0/Xblnr}" />

                  <Label text="{i18n>detailDocHeaderText}" />

                  <Text text="{Items>/0/Bktxt}" />

                </f:content>

              </f:SimpleForm>

            </content>

          </IconTabFilter>

          <IconTabFilter key="supplier"

            text="{i18n>detailIconTabFilterSupplier}" icon="sap-icon://supplier">

            <content>

              <f:SimpleForm id="SimpleFormDisplay354" minWidth="1024"

                maxContainerCols="2" editable="false" layout="ResponsiveGridLayout"

                title="" labelSpanL="3" labelSpanM="3" emptySpanL="4"

                emptySpanM="4" columnsL="1" columnsM="1">

                <f:content>

                  <Label text="{i18n>detailSupplierCode}" />

                  <Text text="{Items>/0/Lifnr}" />

                  <Label text="{i18n>detailSupplierName}" />

                  <Text text="{Items>/0/Name1}" />

                </f:content>

              </f:SimpleForm>

            </content>

          </IconTabFilter>

        </items>

      </IconTabBar>

      <Table id="idItemTable" inset="false" mode="MultiSelect"

        items="{Items>/0/HeaderItemNP/results/}">

        <headerToolbar>

          <Toolbar>

            <Label text="Item(s)"></Label>

          </Toolbar>

        </headerToolbar>

        <columns>

          <Column minScreenWidth="Tablet" hAlign="Left">

            <Text text="{i18n>detailArticle}" />

          </Column>

          <Column minScreenWidth="Tablet" hAlign="Center">

            <Text text="{i18n>detailPONo}" />

          </Column>

          <Column minScreenWidth="Tablet" hAlign="Right">

            <Text text="{i18n>detailQtyRec}" />

          </Column>

          <Column minScreenWidth="Tablet" hAlign="Center">

            <Text text="{i18n>detailUom}" />

          </Column>

          <Column minScreenWidth="Tablet" hAlign="Right">

            <Text text="{i18n>detailQtyReturn}" />

          </Column>

          <Column minScreenWidth="Tablet" hAlign="Right">

            <Text text="{i18n>detailReturnReason}" />

          </Column>

        </columns>

        <items>

          <ColumnListItem>

            <cells>

              <ObjectIdentifier title="{Items>Matnr}" text="{Items>Maktx}" />

              <ObjectIdentifier title="{Items>Ebeln}" text="{Items>Ebelp}" />

              <Text text="{Items>Menge}" />

              <ObjectNumber number="" unit="{Items>Meins}" />

              <Input xmlns="sap.m" visible="true" placeholder="Enter Qty..."

                textAlign="Right" value="{Items>Menge1}"/>

              <ComboBox xmlns="sap.m" value="" placeholder="Reason..."

                selectedKey="{Items>Grund}" selectedItemId="" selectedItem="" change=""

                selectionChange="">

                <items>

                  <Item xmlns="sap.ui.core" text="Poor Quality" enabled="true"

                    textDirection="Inherit" key="0001">

                  </Item>

                  <Item xmlns="sap.ui.core" text="Incomplete" enabled="true"

                    textDirection="Inherit" key="0002">

                  </Item>

                  <Item xmlns="sap.ui.core" text="Damaged" enabled="true"

                    textDirection="Inherit" key="0003">

                  </Item>

                </items>

              </ComboBox>

            </cells>

          </ColumnListItem>

        </items>

      </Table>

    </content>

    <footer>

      <Toolbar xmlns="sap.m" active="false" design="Auto">

        <ToolbarSpacer />

        <Button xmlns="sap.m" text="{i18n>detailPost}" type="Default"

          icon="sap-icon://save" id="idPost" press="onPost">

        </Button>

        <Button xmlns="sap.m" text="{i18n>detailReset}" type="Default"

          icon="sap-icon://redo" id="idReset" press="onReset">

        </Button>

      </Toolbar>

    </footer>

    <Dialog xmlns="sap.m" title="{i18n>detailPostTitle}" id="iddialogConfirmation"

      stretchOnPhone="true" visible="false">

      <content>

        <VerticalLayout xmlns="sap.ui.layout">

          <Label xmlns="sap.m" text="{i18n>detailPostText}" />

        </VerticalLayout>

      </content>

      <beginButton>

        <Button xmlns="sap.m" text="{i18n>detailYes}" type="Accept"

          icon="sap-icon://accept" press="onPostSubmitButton" />

      </beginButton>

      <endButton>

        <Button xmlns="sap.m" text="{i18n>detailNo}" type="Reject"

          icon="sap-icon://sys-cancel" press="onPostCancelButton" />

      </endButton>

    </Dialog>

    <Dialog xmlns="sap.m" title="{i18n>detailResetTitle}" id="idresetConfirmation"

      stretchOnPhone="true" visible="false">

      <content>

        <VerticalLayout xmlns="sap.ui.layout">

          <Label xmlns="sap.m" text="{i18n>detailResetText}" />

        </VerticalLayout>

      </content>

      <beginButton>

        <Button xmlns="sap.m" text="{i18n>detailYes}" type="Accept"

          icon="sap-icon://accept" press="onResetSubmitButton" />

      </beginButton>

      <endButton>

        <Button xmlns="sap.m" text="{i18n>detailNo}" type="Reject"

          icon="sap-icon://sys-cancel" press="onResetCancelButton" />

      </endButton>

    </Dialog>

  </Page>

</mvc:View>

Controller

getItems:function(oEvent){

        var fnSuccess = function(data) {

            var oModel = new sap.ui.model.json.JSONModel(data);

            detailView.getView().setModel(oModel, "Items");

        };

        var fnError = function(data) {

            console.log('Error');

        };

        var params = "$expand=HeaderItemNP&$filter=Mblnr eq '" + oEvent.Mblnr + "' and Mjahr eq '" +  oEvent.Mjahr + "'";

        util.PersistenceHelper.getInstance("oModel").read(

                "/HeaderSet",params    , fnSuccess, fnError);

    },

I

[Former Member]

Did you come up with a solution to this problem?

I have an many to many relationship where I want to display a list, with a nested sub-list of the dependent entity:

e.g.

Booking 1

----Item on Booking 1

----Item on Booking 2

Booking 2

----Item on Booking 3

----Item on Booking 4

I can acess the header entity (booking) attributes in the normal way : text="{BookingId}" etc, but for the Items I cannot access them. The Navigation property is called "ItemNav" and this is being called on the header list in the expand property:

<List id="bookingsList"
  items="{
     path: '/Bookings',
     sorter: {
      path: 'Customer',
      descending: true,
      group: true
     },
     groupHeaderFactory: '.getBookingGroupHeader',
     parameters : {expand:'ItemsNav'}
     }">

In this List I have a custom list item, which will hold another sub-list of TILES.

Did you resolve your one to many issue? how did you sepcify the property binding?

Thank you

[Former Member]

Did you find any solution to your specific use case?

[Former Member]

Yes, see below - it all revolves around controls with have an "items" aggregation.

The list binding looks like this (as above):

<List id="bookingsList"

  items="{

     path: '/Bookings',

     sorter: {

      path: 'FormattedCustomer',   

      descending: true,

      group: true

     },

     groupHeaderFactory: '.getBookingGroupHeader',

     parameters : {expand:'Items'}

     }">

Then within the list I have custom list item, which has normal binding to Bookings attributes using the {bookingId} notation.

Then, as part of the content of the custom list item I have another control with an "items" aggregation, to which you can bind items="{Items}", and then attributes of these items are bound to the items of the booking:

<HeaderContainer id="tileContainer"

    showDividers="false"

    items="{Items}"

    width="100%">

    <items>

          <StandardTile

                       icon="{

                            path: 'ItemType',

                            formatter : 'ccc.util.Formatter.itemTypeIcon'

                       }"

                        number="{

                             path : 'Date',

                             formatter : 'ccc.util.Formatter.formatDate'

                        }"

                        numberUnit="ID: {ItemId}"

                        title="{Type} : {Description}"

                        info="{ItemStatus}"/>

....etc

I hope this helps. Basically, if you want dynamic binding to an entityset you need to find a control which suits your purpose which has an items aggregation. Therefore if you are doing an expand on a binding, to bind to the expanded set you need a sub-control with items aggregation, like HeaderContainer above.

I hope this helps?