Unable to update DetailPage list based on selection in MasterPage of SplitApp

[former_member213217]

manifest.txtproductslist.txtcategorieslist.txt

Hi,

I have developed a manifest based SplitApp application using the Northwind odata services wherein am displaying the categories on MasterPage & products on the DetailPage.

Upon click of a category, I retrieve the corresponding category ID, do an odata READ operation over products & then do a setModel for the products list on the DetailPage. However, my list always remains as empty. When I check in the console I can see that the product's model has successfully been updated but it doesn't reflect onto the list. I tried doing updateBindings(true), refresh(true) against the model but it didn't resolve the issue.

sap.ui.controller("uday.mypath.Controller.CategoriesList", {
	onCtgSel : function(oChosenCategory) {


		var iChosenCategory = oChosenCategory.getSource().mProperties.number;


		var sURL = "proxy/http/services.odata.org/OData/OData.svc";


		var sParams = "/Categories(" + iChosenCategory + ")/Products";


		var oModel = new sap.ui.model.odata.v2.ODataModel(sURL, {
			useBatch : false,
			maxDataServiceVersion : '3.0',
			defaultBindingMode : 'TwoWay'
		});


		oModel.read(sParams, {
			success : function(oData, response) {
				debugger;
				sap.ui.getCore().setModel(oData, "productsModel");
				oModel.updateBindings(true);
			},
			error : function(oData) {
				debugger;
			}
		})
	}


});

Alternatively, I wanted to see if I could directly access the list of my DetailPage but doing an sap.ui.getCore().byId() is returning back as undefined. Could someone please correct me as to where am going wrong.

Thanks

[former_member213217]

Hi experts can anyone please pitch in advise over what might be the issue behind the List on the detailPage not getting updated with the data from the model? Haven't yet managed to resolve the issue.

[Former Member]

Hi Sekhar Mr,

In the line sap.ui.getCore().setModel(oData,"productsModel"); oData is not a model, you should pass a JSON model here like below:

var oJSONModel = new new sap.ui.model.json.JSONModel({Products: oData.results});
sap.ui.getCore().setModel(oJSONModel,"productsModel");

[former_member213217]

Hi Rahul,

Thank you for pitching in & correcting my code. I have now altered my code to create a JSON model using the data being returned within the success function before eventually setting it onto my productsModel. I can see the entries existing in the model from within my console but however they are not reflecting onto my detailPage's list control.

Please advise as to what else might be going wrong. Also when from within my console when I try to access the list on my detailPage via sap.ui.getCore().byId("idProductsList") it gives me an error saying undefined. I cannot access the view using its id idProductsView either. Does using the manifest model way of design prevent me from being able to refer to the controls of another view in this fashion?

[Former Member]

Hi Sekhar,

Please try this:

Create the JSON Model in the onInit method of controller, and then within success function set the model data.

onInit : function(){
   var oJSONModel = new sap.ui.model.json.JSONModel({Products: []});
   sap.ui.getCore().setModel(oJSONModel,"productsModel");
}

Then inside success method write:

success : function(oData, response) {
	var oJSONModel = sap.ui.getCore().getModel("productsModel");
        oJSONModel.setData({Products: oData.results});
	oJSONModel.updateBindings(true);
}<br>

[Former Member]

And regarding control id problem:

The id which you mention in the view xml is a relative id to that view only, i.e. you can access the control using this id from view controller only as below:

var oList = this.getView().byId("idProductsList");

[former_member213217]

Hi Rahul,

I tried binding the model to an empty array within my init method before eventually trying to set the actual data within my success handler function. But it still exhibits the same behaviour as earlier: can see the data within the model but the list continues to remain empty 😞

[former_member213217]

So you mean to say that a control would be accessible with its id only from within its respective controller methods? I could access a control from a vew X from within a controller of a different view Y when I was not using the manifest.json & component.js mechanisms. Is this something which happens when using these? And just to doublecheck I tried to access the Categories list from within the CategoriesList view by saying sap.ui.getCore().byId("idCategList") but this too returns back as undefined. Why is this the case? On further digging I see that I can directly access a control of any view in the case of JavaScript views with this approach but that it fails in the case of XML views.

[Former Member]

Suppose we have one control with id "idList" in a view named "Master.view.xml", then this id is relative to the view. The actual id will have some prefix (based and component and view) added with this relative id. The actual id may look like this: "__component0---master--idList" . So when you use sap.ui.getCore().byId() to fetch control, you have to use absolute id i.e. "__component0---master--idList" and when you use this.getView().byId(), you have to use relative id i.e. "idList". It is always preferred to use relative id.

To get the absolute id of a control, you can do any of below:

var sId = oControl.getId();

or

var sId = this.getView().createId("<RELATIVE_ID>");

[former_member213217]

Hi Rahul,

Thank you for the clarification. I shall try to explore & read more about this. Suppose in certain scenarios I only have the "this" keyword giving me a window reference, then how would I get the actual controllers reference? I was searching around and trying to understand how I can get the desired reference. Few threads spoke about saving aside the reference onto another variable for later use in the controller functions but am not sure that this is a proper approach. Any pointers would be greatly appreciated. Am a newbie at UI5.