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