Fiori getContext Detail page SAPUI5

[Former Member]

Hello all

I am currently  workign on Fiori like App using SAPUI5. I have successfully built the Master page, and on item click I set the context and navigate to Detail page.

The context path from Master page is something like "/SUPPLIER("NAME")". The function in App.controller.js is as follows:

handleListItemPress : function (evt) {
var context = evt.getSource().getBindingContext();
this.nav.to("Detail", context);}

But I would like to know how can I access this context in the deatil page. I need this because I need to use $expand to build the url and bind the items to a table.

Here is my Detail.view.js

sap.ui.jsview("sap.ui.demo.myFiori.view.Detail", {
getControllerName: function () {
return "sap.ui.demo.myFiori.view.Detail";
},

createContent: function (oController) {
var page2 = new sap.m.Page({
     title:"Supplier",
     class:"sapUiFioriObjectPage",
     showNavButton:true,
     navButtonPress: [oController.handleNavButtonPress,oController],
       content:[list]});

var list = new sap.m.List("list2");
var itemTemplate = new sap.m.ObjectListItem({
            title : "{NAME}",
            type: sap.m.ListType.Active,
            number : "{LIFNR}",
            numberUnit : "ID",
            attributes : new sap.m.ObjectAttribute("attr2",{text:"{CITY}"}),
            press: [oController.handleListItemPress, oController],});
var test = this.getBindingContext();

list.bindItems(test.getPath()+"/MASTERDATA",itemTemplate);

Any suggestions would be highly appreciated.

Thanks

[Former Member]

Can you try attachChange on your List this should notify you when any property of List has changed its bindingContext and then get the changed bindingContext.

[Former Member]

Hey Sagar,

Many thanks for your response.

I did find a possible solution here and tried it.
I have post my code above. Would be glad if you can help me out with that.

Thanks

Sangamesh

[kedarT]

Hi Sangamesh,

Were you able to resolve this, i am in the kind of situation.

Appreciate if you could share your solution.

[kedarT]

Resolved the issue which i had.

Did the binding for the all controls in the controller of the Detail Page in the method - _handleRouteMatched, which handles the routing.

[agentry_src]

Hi Kedar,

Please mark this Discussion with a Correct Answer and Helpful Answer where appropriate.  See http://scn.sap.com/community/support/blog/2013/04/03/how-to-close-a-discussion-and-why   Even if you discovered the solution without any outside contributions, it helps others to understand what the solution turned out to be.

Regards, Mike
SAP Customer Experience Group - CEG

[Former Member]

How are you implementing navigation ? Are you using Routing ? Could you post the code of navigation part ? ie the code of nav.to function ?

[Former Member]

Hello Sakthivel,

I have done some modifications to my code since I post this question.

Onto my  Deatil.controller.js I added:

onBeforeRendering:function(){

          this.byId("test2").bindElement("MASTERDATA");

          }

     });

Thge navigation "to" page function looks like this on my App.controller.js:

to : function (pageId, context) {

     var app = this.getView().app;

     var master = ("Master" === pageId);

     if (app.getPage(pageId, master) === null) {

          var page = sap.ui.view({

                                                 id : pageId,

                                                 viewName : "sap.ui.demo.myFiori.view." + pageId,

                                                  type : "XML"

                                             });

     page.getController().nav = this;

     app.addPage(page, master);

jQuery.sap.log.info("app controller > loaded page: " + pageId);

}

// show the page

app.to(pageId);

// set data context on the page

if (context) {

               var page = app.getPage(pageId);

               page.setBindingContext(context);

if(pageId=="Detail") { 

                    var oModelDetail = new sap.ui.model.odata.ODataModel("../TEST_ODATA4.xsodata", true);

                    oModelDetail.read(context.getPath(), null, {"$expand":"MASTERDATA"},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);

                    console.log(oData);

                     // store the model 

                    sap.ui.getCore().setModel(oODataJSONModel, "MyJSONModel");

                     console.log("page is"+page);

                     var list2 = page.byId("test2");

                    list2.setModel(oODataJSONModel);

                    console.log(list2);

}, function(){

alert("Read failed");

});

}}

},

Detail.view.xml looks like:

<List id="test2" title="{NAME}">

  <ObjectListItem id="STOREINFO" type="{device>/listItemType}" title="{NAME}" number="{LIFNR}" numberUnit="{STOREID}">

  <attributes>

  <ObjectAttribute id="ATTR1" text="{CITY}" />

  </attributes>

  </ObjectListItem>

  </List>

I have used the expand parameter to expand my query to get masterdata during page navigation. Now I have to bind the items to the list. I tried several ways, but no result. I referred to the following link for my solution :

Please suggest a fix.

Many Thanks

Sangamesh

[Former Member]

Hi Sangamesh,

Did you check if your oODataJSONModel has data ? If yes, can you post the data ? & when you set the model to the list in the to method, why do you need this.byId("test2").bindElement("MASTERDATA"); in before Rendering() ?

Regards

Sakthivel

[Former Member]

Hello Sakthivel,

You are absolutely right. Logically thinking, I could just bind the items to the list in the "to" function. Better said, I may not have understood the concept behind beforerendering. BUt, as you mentioned earlier, I paste the

console.log(oODataJSONModel); result here below:

F {mEventRegistry: Object, oData: Object, aBindings: Array[0], mContexts: Object, iSizeLimit: 100…}

1. aBindings: Array[1]
   1. 0: f
   2. length: 1
   3. __proto__: Array[0]
2. bCache: true
3. bLegacySyntax: false
4. iSizeLimit: 100
5. mContexts: Object
6. mEventRegistry: Object
7. mSupportedBindingModes: Object
8. oData: Object
   1. CITY: "HAAKSBERGEN"
   2. LIFNR: "0003100082"
   3. MASTERDATA: Object
   4. NAME: "CONCEPT In Flames B.V"
   5. POSTZAHL: "5600 JZ"
   6. STREET: "METAALSTRAAT 3A/C"
   7. __metadata: Object
   8. __proto__: Object
9. sDefaultBindingMode: "TwoWay"
10. __proto__: F
11. 
    
12. I also tried adding this line in the "to" function

var template = page.byId("STOREINFO");

         list2.setModel(oODataJSONModel); 

         list2.bindItems("/d/MASTERDATA/results",template);

But, this time I  get an error saying "Uncaught Error: Missing template or factory function for aggregation items of Element sap.m.List#Detail--test2 ! . Any ideas.

1. 
   
2. 
   

[Former Member]

can you also comment this this.byId("test2").bindElement("MASTERDATA");  & try ? I guess this line is overriding your binding!

[Former Member]

I have removed the function "onBeforeRendering" from Detail.controller.js file. Still not working.

[Former Member]

Hi sangamesh,

I've found some changes to be done,

1. Json model's should have data as Array of Objects. So while setting JSON model, set data as

          oODataJSONModel.setData([oData]); // enclosing oData into [ ]

2. In the Detail View, do the binding as

           list2.bindItems('/',itemTemplate);

3. Uncomment this line in the view, Not required as you're model contains only the value of context. 

          var test = this.getBindingContext(); 

4, Uncomment the before rendering in the controller

5. In the itemTemplate, which is an objectListItem bind title as

          title:{MASTERDATA/NAME}

I hope it's fixed now

Regards

Sakthivel

[Former Member]

Hello Sakthivel,

Many thanks for your response. Unfortunately it still doesnt work. I have a small doubt and would like to clarify.

In the Detail View, do the binding as

list2.bindItems('/',itemTemplate);

I think this has to be done in the "to" fúnction inside the detail.controller.js isnt it? Because, I tried to do the above and ended up with an error as Uncaught TypeError: Cannot set property 'entityType' of undefined.

Now, I am trying this in the controller but still do not work. Do you need any more information where you could actually find out what would have been the mistake. If so, I would be glad to provide you with,

Kindly help. Thanks

Sangamesh