1

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.

Pieter
  • 1,751
  • 3
  • 30
  • 65
  • I guess you could publish an event from the `Component.js` content and subscribe to that event in your `bootstrap.js` using [`EventBus` from the core](https://stackoverflow.com/a/46186706/5846045). Would that be an acceptable solution? – Boghyon Hoffmann Jun 30 '23 at 10:39
  • Acceptable for sure, but the ideal solution wouldn't require adding specific code in `Component.js`. Are there any events published by default in the lifecycle of the UI5 component? – Pieter Jun 30 '23 at 11:01
  • The `sap.ui.core.ComponentContainer` does provide the [event `componentCreated`](https://sdk.openui5.org/api/sap.ui.core.ComponentContainer#events/Summary) but then, same as `Component`, you'd have to get a reference to the created `ComponentContainer` instance which is not given in `bootstrap.js` - unless you access the container or component via `byId` or [`sap/ui/core/Component.registry.*`](https://sdk.openui5.org/api/sap.ui.core.Component.registry). – Boghyon Hoffmann Jun 30 '23 at 11:08
  • I looked at `componentCreated` before, but couldn't figure out how to attach that from the ` – Pieter Jun 30 '23 at 11:47
  • 1
    Documentation is now enhanced with a sample of event registration in the `div` element: https://github.com/SAP/openui5-docs/pull/87 – Boghyon Hoffmann Jul 20 '23 at 08:15

1 Answers1

1

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 componentCreated event 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">
  <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>
</html>

In myBootstrap.js:

// ...
globalThis.onMyComponentCreated = function(event) {
  const myCreatedComponent = event.getParameter("component");
  // ...
};
sap.ui.require(["sap/ui/core/ComponentSupport"]);

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.

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".

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170