Binding problem with Master/Detail in SAP UI 5 and OData

[Former Member]

Dear colleagues,

we've just started with SAP UI 5, OData and Fiori. So we created an OData service for testing. This one should show us a collection of different accounts. With the Navigation Property "DueAmountsSet" we want to show the details (due dates) for one account.

Here you can find our metadata of our OData service called ZDUEITEMS_SRV:

<edmx:Edmx xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:sap="http://www.sap.com/Protocols/SAPData" Version="1.0">
<edmx:DataServices m:DataServiceVersion="2.0">
<Schema xmlns="http://schemas.microsoft.com/ado/2008/09/edm" Namespace="ZDUEITEMS_SRV" xml:lang="en">
<EntityType Name="Balance" sap:content-version="1">
<Key>
<PropertyRef Name="ID"/>
</Key>
<Property Name="BalCurrency" Type="Edm.String" Nullable="false" MaxLength="5" sap:label="Currency" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false" sap:semantics="currency-code"/>
<Property Name="BalAmount" Type="Edm.Decimal" Nullable="false" Precision="13" Scale="13" sap:unit="BalCurrency" sap:label="Amount" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false"/>
<Property Name="ID" Type="Edm.String" Nullable="false" MaxLength="12" sap:label="Contract Acct" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false"/>
<NavigationProperty Name="DueAmountsSet" Relationship="ZDUEITEMS_SRV.DueItemAssociation" FromRole="FromRole_DueItemAssociation" ToRole="ToRole_DueItemAssociation"/>
</EntityType>
<EntityType Name="DueAmounts" sap:content-version="1">
<Key>
<PropertyRef Name="DueID"/>
</Key>
<Property Name="DueAmount" Type="Edm.Decimal" Nullable="false" Precision="13" Scale="13" sap:unit="DueCurrency" sap:label="Amount" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false"/>
<Property Name="NoOfDays" Type="Edm.String" Nullable="false" MaxLength="3" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false"/>
<Property Name="DueCurrency" Type="Edm.String" Nullable="false" MaxLength="5" sap:label="Currency" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false" sap:semantics="currency-code"/>
<Property Name="DueID" Type="Edm.String" Nullable="false" MaxLength="12" sap:label="Contract Acct" sap:creatable="false" sap:updatable="false" sap:sortable="false" sap:filterable="false"/>
</EntityType>
<Association Name="DueItemAssociation" sap:content-version="1">
<End Type="ZDUEITEMS_SRV.Balance" Multiplicity="1" Role="FromRole_DueItemAssociation"/>
<End Type="ZDUEITEMS_SRV.DueAmounts" Multiplicity="*" Role="ToRole_DueItemAssociation"/>
<ReferentialConstraint>
<Principal Role="FromRole_DueItemAssociation">
<PropertyRef Name="ID"/>
</Principal>
<Dependent Role="ToRole_DueItemAssociation">
<PropertyRef Name="DueID"/>
</Dependent>
</ReferentialConstraint>
</Association>
<EntityContainer Name="ZDUEITEMS_SRV_Entities" m:IsDefaultEntityContainer="true">
<EntitySet Name="DueAmountColllection" EntityType="ZDUEITEMS_SRV.DueAmounts" sap:creatable="false" sap:updatable="false" sap:deletable="false" sap:pageable="false" sap:addressable="false" sap:content-version="1"/>
<EntitySet Name="BalanceCollection" EntityType="ZDUEITEMS_SRV.Balance" sap:creatable="false" sap:updatable="false" sap:deletable="false" sap:pageable="false" sap:addressable="false" sap:content-version="1"/>
<AssociationSet Name="DueItemAssociationSet" Association="ZDUEITEMS_SRV.DueItemAssociation" sap:creatable="false" sap:updatable="false" sap:deletable="false" sap:content-version="1">
<End EntitySet="BalanceCollection" Role="FromRole_DueItemAssociation"/>
<End EntitySet="DueAmountColllection" Role="ToRole_DueItemAssociation"/>
</AssociationSet>
</EntityContainer>
<atom:link xmlns:atom="http://www.w3.org/2005/Atom" rel="self" href="https://ldciemi.wdf.sap.corp:44357/sap/opu/odata/sap/ZDUEITEMS_SRV/$metadata"/>
<atom:link xmlns:atom="http://www.w3.org/2005/Atom" rel="latest-version" href="https://ldciemi.wdf.sap.corp:44357/sap/opu/odata/sap/ZDUEITEMS_SRV/$metadata"/>
</Schema>
</edmx:DataServices>
</edmx:Edmx>

So, if you call our serivce wiht "BalanceCollection" you get the collection of all accounts. With the ID as key (e.g. /BalanceCollection('KD2')) you get one entity. If you add the navigation path (/BalanceCollection('KD2')/DueAmountsSet) you can see the Due Date-entity set. In the browser everything looks fine. We hope that we did everything right until here.

To implement a first SAP UI 5 Fiori application we followed the guide:

We now have our master/detail views:

The next step is to show more details in a chart or as text. Therefore we have to get addition information from our OData. So we want to call the NavigationPath (see above).

There seems to be an issue. We don't know how to do this.

For our chart we have created a dataset in the "onBeforeRendering" function of our Detail.controller.js:

var dataset = new sap.viz.ui5.data.FlattenedDataset({


            dimensions : [ {
              axis : 1,
              name : 'NoOfDays',
              value : "{NoOfDays}"
            } ],


            measures : [ {
              name : 'DueAmount',
              value : '{DueAmount}'
            }],


            data : {
              path : "/DueAmountsSet"
            }


          });


  var chart = this.getView().byId("dueDateChart");
  chart.setDataset(dataset);

In additon we insert in the "to" function of our App.controller.js:

// set data context on the page
  if (context) {
  var page = app.getPage(pageId);
  page.setBindingContext(context);

  if(pageId=="Detail") {
// // Using OData model to connect against a real service
  var url = "/sap/opu/odata/sap/ZDUEITEMS_SRV";
  var path = context.getPath() + "/DueAmountsSet";
  //myPath = path;
  //var oModelDetail = new sap.ui.model.odata.ODataModel(url + path ", true);
  var chart = page.byId("dueDateChart");
  //chart.setModel(oModelDetail);
  //chart.setBindingContext(context.getPath() + "/DueAmountsSet");
  myChart = chart;
  myPage = page;
  myPath = path;
  //oView.setModel(oModel);
  }
  }

And in pageId=="Detail" we first want to set the new binding context. As you can see with the out-commented stuff we have tried a lot of things, but don't know how we can bind our details to the chart. May you can help us?

Thank you,

Kevin

P.S.:

We read the following, but these links didn't help us. Or may we don't understand them right:

SAPUI5 SDK - Demo Kit

Documentation/Tools/TutorialEPMExample – SAPUI5 Wiki (TIP CORE User Interface)

[Former Member · Accepted solution]

We find our solution here: https://help.sap.com/saphelp_nw73ehp1/helpdata/en/b3/ff46354c31484d8fe908f744e95b23/content.htm

We changed our call in the detail view to the following:

if(pageId=="Detail") {
// // Using OData model to connect against a real service
  var url = "/sap/opu/odata/sap/ZDUEITEMS_SRV";
  //myPath = path;
  var oModelDetail = new sap.ui.model.odata.ODataModel(url, true);
  oModelDetail.read(context.getPath(), null, {"$expand":"DueAmountsSet"}, false, function(oData, oResponse){
        // create JSON model
        var oODataJSONModel =  new sap.ui.model.json.JSONModel();


        // set the odata JSON as data of JSON model
        oODataJSONModel.setData(oData);

        // store the model 
        sap.ui.getCore().setModel(oODataJSONModel, "MyJSONModel");

        var chart = page.byId("dueDateChart");
        chart.setModel(oODataJSONModel);

   }, function(){
        alert("Read failed");
   }
  );
  }

In addition we changed our dataset:

var dataset = new sap.viz.ui5.data.FlattenedDataset({


            dimensions : [ {
              axis : 1,
              name : 'NoOfDays',
              value : "{NoOfDays}"
            } ],


            measures : [ {
              name : 'DueAmount',
              value : '{DueAmount}',
            }],


            data : {
              path : "/DueAmountsSet/results"
            }


          });

[former_member275875 · Accepted solution]

Hi,

Could you please explain how to use expand in the below two scenarios:

1> Incase the same entity set has multiple assiciations, how can the oData be retreived?

2> In case the entity Set(Request) is associated to anotehr entity set (Accounts) which in turn is associated to a third entity Set(Signatory)?

Thanks & Regards

Leena

[Former Member]

Dear Kevin,

Can you please give more details.

I have developed my code based on those 10 exercises to create an app.

I have added the chart in my XML Detail view.

My Chart code is:

<content>

  <viz:ui5.Column width="100%" height="350px">

    <viz:title>

    <viz:ui5.types.Title text='Expense Breakdown'>

    </viz:ui5.types.Title>

    </viz:title>

    <viz:legendGroup>

  <viz:ui5.types.Legend>

  <viz:layout>

  <viz:ui5.types.Legend_layout position="right" />

  </viz:layout>

  </viz:ui5.types.Legend>

  </viz:legendGroup>

    <viz:dataset>

    <viz:ui5.data.FlattenedDataset data="{/PROJECTSSet}">

    <viz:dimensions>

   <viz:ui5.data.DimensionDefinition

   axis="1" name="Project" value="{ExtProjNo}">

   </viz:ui5.data.DimensionDefinition>

    </viz:dimensions>

    <viz:measures>

   <viz:ui5.data.MeasureDefinition

   name='Labour Cost' value='{CostLabor}'>

   </viz:ui5.data.MeasureDefinition>

   <viz:ui5.data.MeasureDefinition

   name='Material Cost' value='{CostMaterial}'>

   </viz:ui5.data.MeasureDefinition>

   <viz:ui5.data.MeasureDefinition

   name='Equipment Cost' value='{CostEquipment}'>

   </viz:ui5.data.MeasureDefinition>

   <viz:ui5.data.MeasureDefinition

   name='Other Cost' value='{CostOther}'>

   </viz:ui5.data.MeasureDefinition>

    </viz:measures>

    </viz:ui5.data.FlattenedDataset>

    </viz:dataset>

  </viz:ui5.Column>

  </content>

The bold line specifies the line where I have defined my Dataset which is the same from which Details view.

The Chart lies below the Details and yet doesn't get filtered.

Please guide as to where did you edit.

--

Regards

Saurabha J

[Former Member]

Hi ,

Use this.

• if(pageId=="Detail") { 
• // // Using OData model to connect against a real service 
•   var url = "/sap/opu/odata/sap/ZDUEITEMS_SRV"; 
•   //myPath = path; 
•   var oModelDetail = new sap.ui.model.odata.ODataModel(url, true); 
•   oModelDetail.read(context.getPath(), null, {"$expand":"DueAmountsSet"}, false, function(oData, oResponse){ 
•         // create JSON model 
•         var oODataJSONModel =  new sap.ui.model.json.JSONModel(); 
•         // set the odata JSON as data of JSON model 
•         oODataJSONModel.setData(oData); 
•    
•         // store the model  
•         sap.ui.getCore().setModel(oODataJSONModel, "MyJSONModel"); 
•         
•         var chart = page.byId("dueDateChart"); 
•         chart.setModel(oODataJSONModel); 
•         
•    }, function(){ 
•         alert("Read failed"); 
•    } 
•   ); 
•   } 
• In addition we changed our dataset:

• var dataset = new sap.viz.ui5.data.FlattenedDataset({ 

              dimensions : [ { 

                axis : 1, 

                name : 'NoOfDays', 

                value : "{NoOfDays}" 

             } ], 

              measures : [ { 

                name : 'DueAmount', 

                value : '{DueAmount}', 

              }], 

              data : { 

                path : "/DueAmountsSet/results" 

              } 

            }); 

• this may helpflu to you.

[jmoors]

Is you service ZDUEITEMS_SRV activated? Might be worth checking via ICF

Regards,

Jason

[Former Member]

Yes, it is activated. I think it's more an problem in our JavaScript.

For example we can see our data for ZDUEITEMS_SRV/BalanceCollection('KD2')/DueAmountsSet correct in the browser:

<feed xmlns="http://www.w3.org/2005/Atom" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xml:base="https://ldciemi.wdf.sap.corp:44357/sap/opu/odata/sap/ZDUEITEMS_SRV/">
<id>
https://ldciemi.wdf.sap.corp:44357/sap/opu/odata/sap/ZDUEITEMS_SRV/BalanceCollection('KD2')/DueAmoun...
</id>
<title type="text">DueAmountColllection</title>
<updated>2014-02-05T14:11:21Z</updated>
<author>
<name/>
</author>
<link href="BalanceCollection('KD2')/DueAmountsSet" rel="self" title="DueAmountColllection"/>
<entry>
<id>
https://ldciemi.wdf.sap.corp:44357/sap/opu/odata/sap/ZDUEITEMS_SRV/DueAmountColllection('KD2')
</id>
<title type="text">DueAmountColllection('KD2')</title>
<updated>2014-02-05T14:11:21Z</updated>
<category term="ZDUEITEMS_SRV.DueAmounts" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme"/>
<link href="DueAmountColllection('KD2')" rel="self" title="DueAmounts"/>
<content type="application/xml">
<m:properties xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices">
<d:DueAmount>120.00</d:DueAmount>
<d:NoOfDays>60</d:NoOfDays>
<d:DueCurrency>EUR</d:DueCurrency>
<d:DueID>KD2</d:DueID>
</m:properties>
</content>
</entry>
<entry>
<id>
https://ldciemi.wdf.sap.corp:44357/sap/opu/odata/sap/ZDUEITEMS_SRV/DueAmountColllection('KD2')
</id>
<title type="text">DueAmountColllection('KD2')</title>
<updated>2014-02-05T14:11:21Z</updated>
<category term="ZDUEITEMS_SRV.DueAmounts" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme"/>
<link href="DueAmountColllection('KD2')" rel="self" title="DueAmounts"/>
<content type="application/xml">
<m:properties xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices">
<d:DueAmount>180.00</d:DueAmount>
<d:NoOfDays>90</d:NoOfDays>
<d:DueCurrency>EUR</d:DueCurrency>
<d:DueID>KD2</d:DueID>
</m:properties>
</content>
</entry>
<entry>
<id>
https://ldciemi.wdf.sap.corp:44357/sap/opu/odata/sap/ZDUEITEMS_SRV/DueAmountColllection('KD2')
</id>
<title type="text">DueAmountColllection('KD2')</title>
<updated>2014-02-05T14:11:21Z</updated>
<category term="ZDUEITEMS_SRV.DueAmounts" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme"/>
<link href="DueAmountColllection('KD2')" rel="self" title="DueAmounts"/>
<content type="application/xml">
<m:properties xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices">
<d:DueAmount>60.00</d:DueAmount>
<d:NoOfDays>30</d:NoOfDays>
<d:DueCurrency>EUR</d:DueCurrency>
<d:DueID>KD2</d:DueID>
</m:properties>
</content>
</entry>
</feed>