Overview of the replacement of global functions with the factory functions
The AMD module syntax already avoids Globals and enforces the strict dependency declaration. The following table shows how APIs which use synchronous requests to fetch modules or resources internally, can be replaced with asynchronous alternatives. The WHATWG has already deprecated the use of synchronous requests in the browser main thread, so this replacement prepares your applications for the removal of synchronous requests.
The OpenUI5 framework by default uses synchronous requests internally in several places. Most have already been replaced by asynchronous alternatives, or prepared to exchange the synchronous behaviour shown below. The asynchronous adoption starts from the beginning with the bootstrap script tag, where the async configuration parameter should be set to true. The examples below show only the most frequently used synchronous APIs. There are more of these APIs, and most often the asynchronous alternatives return a Promise that can be used to retrieve the former return value.
| Legacy, synchronous API | Modern API |
|---|---|
| Components | |
| ``` var oComponentInstance = sap.ui.component({ name: "my.comp" }); ``` | ``` sap.ui.require(["sap/ui/core/Component"], (Component)=> { Component.create({ name: "my.comp" }).then((oComp) => {/*...*/}); }); ``` Alternatively, migrate to `componentUsages` with an additional adaption in the `manifest.json` file: ``` createContent: function() { var oReuseComponentPromise = this.createComponent({ "usage": "reuse" }).then((oComp) => {/*...*/}); } ``` |
| ``` var oComponentClass = sap.ui.component.load({ name: "my.comp" }); ``` | ``` sap.ui.require(["sap/ui/core/Component"], (Component) => { Component.load({ name: "my.comp" }).then((oClass) => { var oComponentInstance = new oClass({/*...*/}); }); }); ``` |
| ``` var oComponentInstance = sap.ui.component("my-comp-id"); ``` | ``` sap.ui.require(["sap/ui/core/Component"], (Component) => { var oComponentInstance = Component.getComponentById("my-comp-id"); }); ``` |
| i18n texts | |
| ``` jQuery.sap.resources({ url: "mybundle.properties" }); ``` | ``` // jquery.sap.resources -> sap/base/i18n/ResourceBundle sap.ui.require(["sap/base/i18n/ResourceBundle"], (Resource) => { ResourceBundle.create({ url: "mybundle.properties", async: true }).then((oResource) => {/*...*/}); }); ``` |
| Views | |
| ``` var oView = sap.ui.view({ viewName: "my.View", type: "XML" }); ``` | ``` sap.ui.require(["sap/ui/core/mvc/View"], (View) => { View.create({ viewName: "my.View", type: "XML" }).then((oView) => {/*...*/}); }); ``` |
| ``` var oView = sap.ui.xmlview({ viewName: "my.View" }); ``` | ``` sap.ui.require(["sap/ui/core/mvc/XMLView"], (XMLView) => { XMLView.create({ viewName: "my.View" }).then((oView) => {/*...*/}); }); ``` |
| ``` var oView = sap.ui.jsview({ viewName: "my.View" }); ``` | For defining views, use `View.extend`. For loading and creating a view instance, use `View.create`. Refer also to the dedicated [Typed View](/docs/04_Essentials/typed-view-e6bb33d.html) documentation and the [code sample](https://ui5.sap.com/#/entity/sap.ui.core.mvc.View/sample/sap.ui.core.sample.View.navigationTypedView). ``` sap.ui.define(["sap/ui/core/mvc/View", "sap/m/Panel"], function(View, Panel){ return View.extend("my.View", { // define, which controller to use getControllerName: function() { return "my.Controller"; }, // whether the ID of content controls should be prefixed automatically with the view ID getAutoPrefixId: function() { return true; // default is false }, // create view content and return the root control(s) createContent: async function() { const someControl = await somethingAsync(); return new Panel({ content: [someControl, /*...*/] }); } }); }); ``` ``` sap.ui.require(["sap/ui/core/mvc/View"], (View) => { View.create({ viewName: "module:my/View" }).then((oView) => {/*...*/}); }); ``` |
| Controllers | |
| ``` var oController = sap.ui.controller({/*...*/}); ``` | To define an `sap/ui/core/mvc/Controller` subclass, you can simply extend it: ``` sap.ui.require(["sap/ui/core/mvc/Controller"], (Controller) => { return Controller.extend("my.sample.ControllerClass", { /* lifecycle hooks, controller methods etc. */ onInit: function() {/*...*/} }); }); ``` To manually instantiate a Controller class, you can use the `Controller.create()` factory function: ``` sap.ui.require(["sap/ui/core/mvc/Controller"], (Controller) => { Controller.create({ // ... }).then((oController) => {/*...*/}); }); ``` |
| Extension Points | |
| ``` var aControls = sap.ui.extensionpoint(/*...*/); ``` | ``` sap.ui.require(["sap/ui/core/ExtensionPoint"], (ExtensionPoint) => { ExtensionPoint.load({ async: true; // ... }).then((aControls) => {/*...*/}); }); ``` |
| Fragments | |
| ``` // generic factory function var aControls = sap.ui.fragment({ name: "my.fragment", type: "XML" }); ``` ``` // JS fragments var aControls = sap.ui.jsfragment({ name: "my.fragment" }); ``` ``` // XML Fragments var aControls = sap.ui.xmlfragment({ name: "my.fragment" }); ``` | If you're instantiating your fragment inside a controller which extends `sap.ui.core.mvc.Controller`, you can use the `loadFragment` function: ``` sap.ui.define(["sap/ui/core/mvc/Controller"], (Controller) => { return Controller.extend("my.MyController", { onInit: function() { // Beware: The controller's "onInit" lifecycle hook is NOT an async function; // returning a Promise is not supported by the framework. // Any asynchronous behavior must be handled manually. this.loadFragment({ name: "my.fragment", // ... }).then((oControl) => {/*...*/}); } }); }); ``` If you're instantiating your fragment outside a controller, you can use the static `Fragment.load` function: ``` sap.ui.require([ "sap/ui/core/Component", "sap/ui/core/Fragment" ], (Component, Fragment) => { // ... // "oPage" is an exemplary sap.m.Page control const oComponent = Component.getOwnerComponentFor(oPage); oComponent.runAsOwner(function() { Fragment.load({ name: "my.fragment", type: "XML" // or type: "JS" }).then((oControl) => {/*...*/}); }); }); ``` > ### Caution: > - Make sure you assign the correct owner component by running the `runAsOwner()` call on the Component instance. See [The Owner Component](/docs/04_Essentials/the-owner-component-a7a3138.html) for more information. > > - Make sure that you are correctly chaining to the `loadFragment` or `Fragment.load` Promise! Calling `oController.byId("...")` will result in `undefined` if called before the`loadFragment` or `Fragment.load` Promise is resolved. |
| Version Info | |
| ``` var oVersionInfo = sap.ui.getVersionInfo(); ``` | ``` sap.ui.require(["sap/ui/core/VersionInfo"], (VersionInfo) => { VersionInfo.load({ // ... }).then((oVersionInfo) => {/*...*/}); }); ``` |