Dynamic binding of items in sap.m.Table using JS views

[Former Member]

HI,

I am developing a master detail page for a Purchase Order application. In master page, i display the list of Purchase Orders & on clicking the PO, i should display the detail page.

We use different ODATA models for Master & detail page. I am able to successfully list the POs in master page & i am struggling on the part where i have to pass the selected PO number to the new ODATA service URL & then display the details in a table.

Below is the code i use on TAP of Purchase order from master page:

tap: function(oEvent)

      {

      sap.ui.getCore().byId("PODetailstable_nodata_id").setVisible(false);

      var oContext=oEvent.getSource().getBindingContext();

      var odataModel_PO_detail = new sap.ui.model.odata.ODataModel(detailServiceUrl,false,  "dev_sde", "28aug@2013");

      odataModel_PO_detail.setCountSupported(false);

      var tappedPONumber= oContext.getProperty("PONumber");

      var path = "/POHeaderSet('"+tappedPONumber+"')/HDRtoITM";

      PO_DetailsPage.setBindingContext(oContext);

      sap.ui.getCore().byId("po_details_table_id").setModel(odataModel_PO_detail);

      sap.ui.getCore().byId("po_details_table_id").bindContext(path);

      sap.ui.getCore().byId("po_details_table_id").setVisible(true);

      },

And below is the code of my Detail page & the table: I set the bindcontext with new path at "tap" function in master page, i also do bindaggregation for the table with the new path.

The issue is i am able to HIT the new service URL, but no data is displayed. There is also a demo application on the same, but w/o source code it doesnt help me much in resolving this issue.

var PODetailstable_nodata = new sap.m.Table("PODetailstable_nodata_id",{title : "No Data"});

  var po_details_table =  new sap.m.Table("po_details_table_id", {

  inset: true,

         headerText: "table for Detail page",

         columns: [

                   new sap.m.Column({

                       header: new sap.m.Label({ text: "PO Number" })       }),

                   new sap.m.Column({ header: new sap.m.Label({ text: "Vendor" }) }),

                   new sap.m.Column({

                       header: new sap.m.Label({ text: "Vendor Name" })  }),

               ],

  });

  var oTemplate = new sap.m.ColumnListItem({

            cells: [

                    new sap.m.Text({ text: "{PoNumber}" }),

                    new sap.m.Text({ text: "{Vendor}" }),

                    new sap.m.Text({ text: "{VendorName}"})

            ]

        });

  po_details_table.bindAggregation("items", {

         path:"/POHeaderSet('"+"{PONumber}"+"')/HDRtoITM",

         template: oTemplate

     });

  var PO_DetailsPage = new sap.m.Page("PO_DetailsPage_id",

  {

  // title : "Purchase Order Details",

  title :  "{PoNumber}",

  content : [

           PODetailstable_nodata,

           po_details_table,

           ],

    footer : new sap.m.Bar

     ({

       contentRight: [

                      new sap.m.Button({

                      text : "Approve",

                      //press: oController.approve_pr,

                      }

                      )

                     ],

     }

     ),

  });

[Former Member]

If  you look at my code i would have set the path in two places:

1. at tap of PO number from master page:

     sap.ui.getCore().byId("po_details_table_id").bindContext(path);

2. at bindaggregation of sap.m.table at details page.

po_details_table.bindAggregation("items", {

         path:"/POHeaderSet('"+"{PONumber}"+"')/HDRtoITM",

         template: oTemplate

     });

I am not sure if this is the right way of passing parameters dynamically to the ODATA URL? Appreciate any answers regarding to this. There is a demo application on Purchase order similar to my scenario, but i couldnt find any source code related to it.

[Former Member]

I have modified my code by referring another forum,

on Tap, i now invoke a method from controller to update the binding i.e to pass the clicked PO number to the context.

updateBinding: function(oEvent)

  {

  alert("updatebinding");

  var detailServiceUrl = "http://incas1054.ind.cldsvc.accenture.com:8000/sap/opu/odata/sap/ZPURCHASE_PAY_SRV";

  var odataModel_PO_detail = new sap.ui.model.odata.ODataModel(detailServiceUrl,false,  "dev_sde", "28aug@2013");

  odataModel_PO_detail.setCountSupported(false);

  var tableView=sap.ui.getCore().byId("po_details_table_id");

  tableView.setModel(odataModel_PO_detail);

  alert(tableView.getModel());

  var oContext = tableView.getBindingContext();

  //tableView.bindContext("/POHeaderSet");

  alert(oContext);

  var path=  oContext.sPath + "/HDRtoITM";

  var oTemplate = new sap.m.ColumnListItem({

            cells: [

                    new sap.m.Text({ text: "{PoNumber}" }),

                    new sap.m.Text({ text: "{Vendor}" }),

                    new sap.m.Text({ text: "{VendorName}"})

            ]

        });

  tableView.bindItems(path, oTemplate);

  },

Now, i see the PO number is set in the context, but i want to set a different context for details page as i hit different URL, Can anyone suggest on how to set a different context for details page & then pass the PO number from master to detail page?

[monalisa_biswal]

hi,

Create two different model variables : one for master view, another for detail view.

Bind individual view's table elements to their respective models.

You can pass selected value to the second view's table binding as filter.

  oTable2.bindItems

          ({path: "/Resultset",

               filters: [new  sap.ui.model.odata.Filter('FIELDNAMETOFILTER',

                 [{operator:"EQ",value1:SELECTEDVALUE}]),

template:oTemplate });

Thanks,

Monalisa

[Former Member]

Hi Monalisa,

Thanks much for your reply. The issue was fixed. Earlier, i was getting bindingcontext from master page  & was trying to set the same in the detail page as well. Now, if you see i am actually setting the new path required for detail page & appending the clicked PO number to it.This worked fine.

updateBinding: function(oEvent)

  {

  var detailServiceUrl = "proxy/http/incas1054.ind.cldsvc.accenture.com:8000/sap/opu/odata/sap/ZPURCHASE_PAY_SRV";

  var odataModel_PO_detail = new sap.ui.model.odata.ODataModel(detailServiceUrl,false,  "dev_sde", "28aug@2013");

  odataModel_PO_detail.setCountSupported(false);

  var tableView=sap.ui.getCore().byId("po_details_table_id");

  tableView.setModel(odataModel_PO_detail);

  //alert(tableView.getModel());

  var oContext = tableView.getBindingContext();

  /*tableView.bindElement("/POHeaderSet");

  alert(oContext);*/

  var tappedPONumber= oContext.getProperty("PONumber");

  var path=  "/POHeaderSet('"+tappedPONumber+"')/HDRtoITM";

  var oTemplate = new sap.m.ColumnListItem({

            cells: [

                    new sap.m.Text({ text: "{PoItem}"}),

                    new sap.m.Text({ text: "{MaterialDesc}" }),

                    new sap.m.Text({ text: "{DeliveryDate}" }),

                    new sap.m.Text({ text: "{Quantity}"}),

                    new sap.m.Text({ text: "{NetPrice}"}),

            ]

        });

  tableView.bindItems(path, oTemplate);

},