Show TOC

Instantiating ViewsLocate this document in the navigation structure

To instantiate views, SAPUI5 provides the factory method sap.ui.view.

To pass the required information for the instantiation, use an object with the following properties:

  • type: The type can be JSON, JS, XML or HTML. All possible types are declared in the enumeration sap.ui.core.mvc.ViewType.

  • viewName: View name corresponding to the module concept

  • viewContent: Only relevant for XML views and JSON views. Defines the XML or JSON string representation of the view definition. If viewName and viewContent are given, the viewName property is used to load the view definition.

  • Controller: Any controller instance; the given controller instance overrides the controller defined in the view definition

  • viewData: Only used for JS views; this property contains user-specific data that is available during the whole lifecycle of the view and the controller

All regular properties of a view (control) can be passed to the object as usual.

Loading Views

The default mode is synchronous loading of the view: The view source is requested with a synchronous XHR, which enables the factory function to return a view instance. However, the UI freezes for the duration of the loading process and this may block the use of certain functionalities during view initialization. To avoid this, use the asynchronous loading of views, which is available for all view types. The following examples use XML views.

Sync mode (default)

This code snippet creates a view instance, loads the view source, places the instance to the uiArea, and renders it later on.

var oController = sap.ui.controller("my.own.controller");
var oView = sap.ui.view({ 
    viewName: "my.own.view",
    controller: " my.own.controller",
    type: sap.ui.core.mvc.ViewType.XML
});

// the instance is available now
oView.placeAt("uiArea");
...

Async Mode

With the asynchronous loading of views, the initialization can be handeled differently. The instance is not fully available at the moment of creation, instead you may receive a Promise via the View.prototype.loaded method. The following code snippet shows how the view instance is available in the resolve function of the promise.

Note

If you access the view in the controller's onInit callback, the view instance is available in any case. The behavior does not change.

var oController = sap.ui.controller("my.own.controller");
sap.ui.view({ 
    viewName: "my.own.view",
    controller: "my.own.controller",
    type: sap.ui.core.mvc.ViewType.XML, 
    async: true
}).loaded().then(function(oView) {
    // the instance is available in the callback function
    oView.placeAt("uiArea");
});

For an example, see sap.ui.core.sample.View.asynch/preview in the Explored app.