UI5
1 Comment

How to Get a Model in the onInit Method in a Controller in SAP UI5?

Two hands that match two puzzle pieces.

The usual way to get a model in a controller is not going to work in a controller’s onInit method:

// in your controller

onInit: function() {
  
  // this does not work - oModel is undefined     
  var oModel = this.getView().getModel("yourModelName"); 

}

To break it down: this.getView().getModel() returns undefined in an controller’s onInit method. It returns undefined in a controller’s onInit method because this.getView().getParent() returns null in a controller’s onInit method.

And this.getView().getParent() returns null because the parent of the controller’s view is in the onInit method not known yet. But the not known yet parent holds the model for the view and therefore for the controller.

The model gets passed from the view’s parent to the view to the view’s controller – but in a controller’s onInit method the parent has not yet passed the model to the view.

For the sake of clarification, that is how an SAP UI5 application executes:

  • start of the application (index.html)
  • load UI5 resources
  • index’s bootstrap loads component (component.js)
  • component loads descriptor (manifest.json)
  • # component creates models defined in the descriptor <<< models are instantiated
  • execute component’s init function
  • component’s init function executes parent UIComponent’s init function
  • parent UIComponent’s init function creates manifest’s router
  • parent UIComponent’s init function creates manifest’s root view (view1.view.*)
  • root view creates root control
  • component’s init function initializes router
  • router create other necessary views
  • each view loads corresponding controller (view1.controller.*)
  • # each controller executes init function <<< each controller’s init function is executed
  • # router places views in root control <<< each view knows its parent
  • # models are available in the views <<< each view and its controller are able to access the models
  • evaluate view’s bindings
  • retrieve model data

The component instantiates in the descriptor defined models. Then the component passes down the models within the application. But a model cannot be passed down to a view until the view is indirectly connected to the component.

The connection takes place when a view gets connected to its parent. But this connections happens after the onInit function of a controller as you can see above in the execution stages of an SAP UI5 application.

Hence, this.getView().getParent() returns null. And this.getView().getModel() returns undefined in a controller’s onInit method.

Actually, this is kind of a flaw in the SAP UI5 architecture.

However, there is a workaround to get a model in the controller’s onInit method. It is possible through the application’s component directly:

// in your controller

onInit: function() {   

  var oModel = this.getOwnerComponent().getModel("yourModelName"); 

}

Because this.getOwnerComponent() returns the owner component of the controller’s view; the application’s component. this.getOwnerComponent() gets the model directly from the component. And not indirectly from the view’s parent control which is at the time of the execution of a controller’s onInit method not connected to the view yet.

Most Recent Articles

Will SAP UI5 replace the SAP Web UI?

SAP Full Forms

More Similar Articles

1 Comment. Leave new

It is avery good post, thank you very much!

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Fill out this field
Fill out this field
Please enter a valid email address.

Menu