docs

Content Creation in Components

OpenUI5 provides two methods for creating the content controls of a component.

You can use the following methods:

• init

  Override this method, for example, to connect the model between the control and the component. This method is not called by the application directly, but is called automatically when you create the instance of the component. The routing instance needs to be initialized here, see Initializing and Accessing a Routing Instance.

• createContent

  By default, the UI component creates the sap.ui5/rootView declared in the manifest as the root control, see Descriptor Dependencies to Libraries and Components.

  Alternatively, you can override this method and programmatically create the root control. You can either return the root control immediately or return a Promise resolving with the root control. For more information, see sap.ui.core.UIComponent#createContent. Using createContent in an asynchronous fashion requires the UI Component to implement the sap.ui.core.IAsyncContentCreation interface.

  Implementing this interface has the following additional effects:

  • The routing configuration and the root view will automatically be set to async=true.

  • Views (and Fragments) nested in asynchronous Views are now also created asynchronously if their owner component implements the mentioned interface (this of course includes the root view).

  • The loading and processing of nested Views will be contained in the factory Promise of sap.ui.core.Component.create. The same is true for nested asynchronous Views and Fragments. This means that once your Component.create factory call resolves, all inner controls are created.

  The following code snippet shows a sample of the createContent function returning the root control directly:

  sap.ui.define(["sap/ui/core/UIComponent", "sap/m/Label"], function(UIComponent, Label) {
      return UIComponent.extend("my.app.Component", {
          metadata: {
              manifest: "json"
          },
      
          createContent: function () {
              return new Label({ text: "Hello!" });
          }
      });
  });
  

  The following code snippet shows a UI Component that implements the sap.ui.core.IAsyncContentCreation interface. The createContent function returns the Promise of the XMLView.create factory:

  sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/core/mvc/XMLView"], function(UIComponent, XMLView) {
          return UIComponent.extend("my.app.Component", {
              metadata: {
                  manifest: "json",
                  interfaces: ["sap.ui.core.IAsyncContentCreation"]
              },
              createContent: function () {
                  return XMLView.create({ ... });
              }
          });
      });
  

Note:

The settings passed through the instantiation process of a component are not available in the init and createContent methods. Use componentData instead.

You can also override the getters and setters for component properties in the component controller.

Related Information

API Reference: sap.ui.core.IAsyncContentCreation

This site is open source. Improve this page.