Programmatically_Instantiating_JS_Fragments_3cff5d0.md

loio
3cff5d0fa6754c0d9fdacd80653b81fb

view on: demo kit nightly build | demo kit latest release

Programmatically Instantiating JS Fragments

For each fragment type, OpenUI5 provides a method that can be used to programmatically instantiate a fragment.

---

To give an example of a programmatic instantiation of a JS fragment, you first have to define one. The following code presents an example definition:

// fragment is located in a file named: "my/useful/UiPartX.fragment.js"
sap.ui.define(["sap/m/Button"], function(Button) {
	return {
		createContent: function(oController) {
			var oButton  = new Button({
				text: "Hello World" ,
				press: oController.doSomething
			});
			return oButton;
		}
	};
});

This fragment can be instantiated from a controller as follows:

const oMyButton = await this.loadFragment({
	name: "my.useful.UiPartX",
	type: "JS"
});
// oMyButton is now usable

This button can now be used as if it had been created in a standard way.

Note:

The await operator can only be used inside an async function. Please be aware that there are certain limitations in OpenUI5 when using async functions as event handlers. For more information, see ECMAScript Support.

For fragments that are used several times, an ID for the fragment can be given optionally, see Unique IDs:

const oMyButton = await this.loadFragment({
	name: "my.useful.UiPartX",
	id: "someId",
	type: "JS"
});
// oMyButton is now usable

JS Fragments are capable of asynchronously creating their content. To do so, the createContent() function must return a Promise instead of just regular controls. This Promise then must resolve with the actual content controls.

// fragment is located in a file named: "reuse/SampleFragment.fragment.js"
sap.ui.define(["sap/ui/core/Fragment", "sap/m/Button", "heavy/work/SomeModule"], function(Fragment, Button, SomeModule) {
	return {
		createContent: async() => {
			return await SomeModule.doStuffAsync();
		}
	};
});