sapui5

Is there a way to get a callback as soon as the component is loaded inside the bootstrap implementation?


I'm using data-sap-ui-onInit="module:my/custom/bootstrap" who's implementation ends with sap.ui.require(['sap/ui/core/ComponentSupport'].

Is there a way to get a callback as soon as the component is loaded inside the bootstrap implementation? I would like get a reference to the component object once it's initialised.


Solution

  • Without touching the Component.js content, if you can control both the initial HTML document (here: index.html) and the JS file assigned to data-sap-ui-oninit (here: myBootstrap.js) you can attach a handler to the ComponentContainer's events such as componentCreated or componentFailed like this:

    In index.html:

    <head ...>
      <!-- ... -->
      <script id="sap-ui-bootstrap"
        src="<...>resources/sap-ui-core.js"
        data-sap-ui-async="true"
        data-sap-ui-resourceRoots='{ "my.demo": "./" }'
        data-sap-ui-oninit="module:my/demo/myBootstrap"
        data-sap-ui-...="..."
      ></script>
    </head>
    <body id="content" class="sapUiBody">
      <!-- Only in UI5 1.x as registering a global event handler in HTML 
      like below is deprecated since UI5 1.120 and removed in UI5 2.x -->
      <div data-sap-ui-component
        data-id="myRootComponentContainer"
        data-name="my.demo"
        data-component-created="onMyComponentCreated"
        data-height="100%"
        data-settings='{ "id": "myRootComponent" }'
        data-...="..."
      ></div>
    </body>

    In myBootstrap.js:

    // ...
    globalThis.onMyComponentCreated = function(event) {
      const myCreatedComponent = event.getParameter("component");
      // ...
    };
    
    // === With UI5 1.x ===
    sap.ui.require(["sap/ui/core/ComponentSupport"]); // will register onMyComponentCreated only in UI5 1.x
    // ====================
    
    // === With UI5 2.x ===
    sap.ui.require([
      "sap/ui/core/ComponentContainer", // has to be created manually for this case only in UI5 2.x
    ], ComponentContainer => new ComponentContainer({
      id: "myRootComponentContainer",
      name: "my.demo",
      componentCreated: globalThis.onMyComponentCreated, // or an anonymous function
      height: "100%",
      settings: { id: "myRootComponent" },
      // Settings that sap/ui/core/ComponentSupport applies by default:
      lifecycle: "Container", // enum sap.ui.core.ComponentLifecycle
      autoPrefixId: true,
      manifest: true,
    }).placeAt("content"));
    // =======================
    

    Here, the handler name "onMyComponentCreated" is just a sample name. Make sure to create a name that would not cause a name collision in the global scope, or assign an anonymous function when creating a ComponentContainer manually.


    Regarding the data-component-created syntax:

    As HTML is case-insensitive, in order to define a property with upper-case characters, you have to "escape" them with a dash character. (From the API reference: sap/ui/core/ComponentSupport)

    For more information, review the documentation topic "Declarative API for Initial Components".