UIComponent's Model can not be accessed in View-Controller

[dominik_auras]

Hi,

I got the following problem:

I've done the SAPUI5 walkthrough tutorial in which in Component.js a model has been set via following code where this is sap.ui.core.UIComponent

var oInvoiceModel = new JSONModel(jQuery.sap.getModulePath(sNamespace, oConfig.invoiceLocal));

this.setModel(oInvoiceModel, "invoice");

But in view controller I have no access. I have tested some ways like:

this.getView().getModel("invoice")

sap.ui.core.UIComponent.getModel("invoice")

...

But everytime the result is undefined or empty.

I thought when something is set in Component.js it is aviable everywhere...

What I want to do in the end is setting a model in Component.js and loop over some data in this model in the controller of the view to build a dynamic UI.

Any ideas how I can accomplish this?

Thank you,

Dominik

[saivellanki · Accepted solution]

Hi Dominik,

Try like this in your controller and check?

var oComponent = this.getOwnerComponent();          //Returns the Component
oComponent.getModel("invoice");

Regards,

Sai Vellanki.

[dominik_auras · Accepted solution]

Hi Sai,

ok I tested this directly by calling my view and then the model was empty.

But by normally navigating to my view the model is bound and contains the correct data 😃

Thanks for your help!

Regards,

Dominik

[dominik_auras · Accepted solution]

Ok, I'm still wondering why the model is empty when directly calling my view that wants to get the model...

Any ideas here?

[saivellanki · Accepted solution]

Hi Dominik,

I guess the application is behaving like this -

1. Since, the router is defined before the model creation, first it will hit the controller onInit function.

2. Then it hits the component.js where you're creating model and setting the model at component level.

3. At onInit lifecycle the component model will not be available.

I would recommend that, in order to read you're model, you can try the below code at onAfterRendering lifecycle of controller.

onAfterRendering: function(){
var oComponent = this.getOwnerComponent();
var oModel = oComponent.getModel("invoice");
alert(JSON.stringify(oModel));
}

Regards,

Sai Vellanki.

[dominik_auras · Accepted solution]

Ok, I will test some different moments getting the model.

Another weird thing I noticed:

Getting the model in my main views controller works (and it holds my models data as seen in the log!) but saying model.getData returns an empty object in log .... oO

I don't get it...

Please see my screenshots for more info.

oData is in my model as seen in the log.

But getting the odata is not possible...

[saivellanki · Accepted solution]

Dominik,

How are you setting the model? Consider, I am setting the model like this -

var oDataObject = [
  {Product: "Power Projector 4713", Weight: "1467"},
  {Product: "Gladiator MX", Weight: "321"},
  {Product: "Hurricane GX", Weight: "588"},
  {Product: "Webcam", Weight: "700"},
  {Product: "Monitor Locking Cable", Weight: "40"},
  {Product: "Laptop Case", Weight: "1289"}];
var oComponentModel = new JSONModel(oDataObject);
this.setModel(oComponentModel,"view");

Then I am able to call method .getData(), check the screenshot -

Regards,

Sai Vellanki.

[dominik_auras · Accepted solution]

Hi Sai,

I'm setting the model in the init method of my Component.js like this:

var oStoryModel = new JSONModel(jQuery.sap.getModulePath(sNamespace, oConfig.storiesLocal));

this.setModel(oStoryModel, "stories");

Should be the same like yours.

Regards,

Dominik

[dominik_auras · Accepted solution]

The same code works in my other views controller when navigating to it.

But in my main view controller it does not work in onInit, onBeforeRendering or onAfterRendering methods =/

[saivellanki · Accepted solution]

Dominik,

I guess your model is like this, Stories as the parent.

var oStoryModel = {Stories:[
  {},
  {},
  {},
  {}]};

While setting the model, try like this and check you will be able to read oModel.getData()

var oStoryModel = new JSONModel(jQuery.sap.getModulePath(sNamespace, oConfig.storiesLocal));
this.setModel(oStoryModel.oData.Stories, "stories");

(or) having the same existing model, you can try like this -

oModel.getData().Stories

Regards,

Sai Vellanki.

[dominik_auras · Accepted solution]

With data defined in the code like in your example it works fine!

But loading the data from a .json file like I do does not work....

[dominik_auras · Accepted solution]

Yes my model is exactly like this.

But oModel.getData().Stories is undefined.

oStoryModel.oData.Stories is undefined too.

[saivellanki · Accepted solution]

Dominik,

You mean to say you are getting oModel is undefined?

Regards,

Sai Vellanki.

[dominik_auras · Accepted solution]

Hi Sai,

no Stories is undefined.

After navigating from view to view it's there.

Now I'm reacting to routing and check if the data is there.

But same behaviour like before.

On initial call of my view the data is empty and when navigatig to a view and back its there.

[saivellanki · Accepted solution]

Dominik,

I am able to access it using the same. Just try checking different methods and see whether you can get something.

Regards,

Sai Vellanki.

[kedarT]

Hi Dominik,

How about using setting and getting the model from the core something like this:

sap.ui.getCore().setModel(oModel)

and

sap.ui.getCore().getModel(oModel)

[dominik_auras]

Hi Kedar,

yeah I know this method and it works.

But in case this was not mentioned in the tutorial I wanted to do it like they told in the walkthrough.

But it also works!

Thank you and kind regards,

Dominik