The deprecation of the jQuery.sap
APIs and some native jQuery APIs requires that usages of them are replaced in favor of new
APIs. The following lists provide an overview of the required replacements.
For the deprecated native jQuery APIs, we only provide replacements for the most important and most frequently used ones. If you cannot find such a native jQuery API in any of the tables below, refer to the jQuery documentation.
To migrate the simple replacements, add the new module dependency and replace the call with the added argument name as shown in the following example:
Old API |
New API |
---|---|
sap.ui.define([], function() { jQuery.sap.log.info("My log message"); }); |
sap.ui.define(['sap/base/Log'], function(Log) { Log.info("My log message"); }); |
Old API Call |
New Module |
Replacement Type |
Replace with |
---|---|---|---|
|
|
Simple replacement |
|
|
sap/base/i18n/ResourceBundle |
Method changed |
ResourceBundle.create |
|
sap/base/Log |
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
Log.debug |
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Method changed |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Method changed |
|
|
|
Method changed |
|
|
|
Method changed |
|
|
|
Complex replacement |
|
|
|
Method changed |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
escapeRegExp |
|
|
Simple replacement |
|
|
|
Simple replacement |
hash |
|
|
Simple replacement |
|
|
|
Simple replacement |
NormalizePolyfill |
- |
sap/base/strings/toHex |
- |
- |
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
- |
|
- |
- |
|
|
Simple replacement |
|
|
|
Simple replacement |
|
- |
|
- |
- |
|
|
Simple replacement |
|
|
|
Simple Replacement |
|
|
|
Complex Replacement |
Old: // Shallow jQuery.sap.extend({}, sContent); // Deep jQuery.sap.extend(true, {}, sContent) New: // Shallow // // No actual replacement for shallow copies available, see the note below for more info. // Deep merge({}, sContent);
The use of
The Considering this,
|
|
|
Simple Replacement |
|
|
|
Complex Replacement |
ObjectPath.get("some.object.path", "someProperty"); If the object path does not exist, the method doesn't create it anymore. If the path needs to be create it has do be done separately: ObjectPath.create("some.object.path", window.myLib);
|
|
|
Complex Replacement |
ObjectPath.set("some.object.path", "myValue", window.myLib); The object path is created if it does not exist. |
|
|
Method changed |
|
|
|
Simple Replacement |
|
|
|
Use URL web standard classes |
Caveats The APIs have already been designed to be drop-in replacements, but there are some important caveats to
consider when switching to
var oUrlParams = new URLSearchParams(window.location.search); oUrlParams.get("my-param"); var oUrlParams = new URL(sUrl).searchParams; oUrlParams.get("my-param"); |
- |
|
Simple Replacement |
- |
|
|
Simple Replacement |
|
- |
|
- |
- |
|
|
Simple Replacement |
|
|
|
Complex Replacement |
Device.os.android && Device.system.phone |
|
|
Complex Replacement |
Device.os.android && Device.system.tablet |
|
|
Complex Replacement |
Device.system.desktop |
|
|
Complex Replacement |
Device.os.ios && Device.system.ipad |
|
|
Complex Replacement |
Device.os.ios && Device.system.phone |
|
|
Complex Replacement |
Device.orientation.landscape |
|
|
Complex Replacement |
Device.system.phone |
|
|
Complex Replacement |
Device.orientation.portrait |
|
|
Complex Replacement |
Device.system.tablet |
|
|
Complex Replacement |
Device.os.name === "Android" |
|
|
Complex Replacement |
Device.os.name === "bb" |
|
|
Complex Replacement |
Device.os.version |
|
|
Complex Replacement |
Device.os.name === "iOS" |
|
|
Complex Replacement |
Device.os.name === "linux" |
|
|
Complex Replacement |
Device.os.name === "mac" |
|
|
Complex Replacement |
Device.os.name |
|
|
Complex Replacement |
Device.os.versionStr |
|
|
Complex Replacement |
Device.os.name === "win" |
|
|
Complex Replacement |
Device.os.name === "winphone" |
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
- |
Complex Replacement |
Apps Used Within the SAP Fiori launchpad Register your local UI5 reuse components and UI5 libraries in the manifest.json under Standalone Apps
To load resources from a third-party server, use sap.ui.loader.config({paths:{"myPath": "some/path"}}); |
|
- |
Complex Replacement |
Apps Used Within the SAP Fiori launchpad Register your local UI5 reuse components and UI5 libraries in the manifest.json under Standalone Apps
To load resources from a third-party server, use sap.ui.loader.config({paths:{"myPath": "some/path"}}); |
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Simple Replacement |
|
|
|
Method changed |
|
|
|
Method changed |
|
|
|
Method changed |
|
|
|
Method changed |
|
|
|
Method changed |
|
|
|
Method changed |
|
|
|
Method changed |
|
|
|
Method changed |
|
|
|
Method changed |
|
|
|
Simple replacement |
|
|
- |
Complex replacement |
sap.ui.require.toUrl("some/path/to/module.js"); |
|
- |
Complex replacement |
sap.ui.require.toUrl("some/path/to/resource.json"); |
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Method changed |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Method changed |
|
|
|
Simple replacement |
|
|
|
Simple replacement |
|
|
|
Method changed |
|
|
|
Method changed |
|
Old API Call |
New Native Replacement |
---|---|
jQuery.device.is.standalone |
window.navigator.standalone |
jQuery.inArray |
var b = (aElements ? Array.prototype.indexOf.call(aElements, 4) : -1); |
jQuery.isArray |
Array.isArray |
jQuery.sap.clearDelayedCall |
window.clearTimout |
jQuery.sap.clearIntervalCall |
window.clearInterval |
jQuery.sap.delayedCall |
window.setTimeout |
jQuery.sap.domById |
window.document.getElementById |
jQuery.sap.endsWith |
sMyString.endsWith("abc") |
jQuery.sap.endsWithIgnoreCase |
sMyString.toLowerCase().endsWith(sMyOtherString.toLowerCase()) |
jQuery.sap.getter |
function(value) { return function() { return value; }; }(myValue); |
|
window.setInterval |
|
Node.isEqualNode |
|
Object.create |
|
"a".padStart(110, "0"); |
|
"a".padEnd(110, "0"); |
|
instanceof |
|
sMyString.startsWith("abc"); |
|
sMyString.toLowerCase().startsWith(sMyOtherString.toLowerCase()) |
|
window.devicePixelRatio >= 2 |
jQuery extensions have been extracted into different modules. If the jQuery extension is required, it needs to be added to the module dependencies.
Change from the global dependencies to adding the module dependencies to the jQuery extensions:
Previously the dependency was global |
Dependencies should be added |
---|---|
sap.ui.define([], function() { var oDomRef = jQuery("#myElement").firstFocusableDomRef(); }); |
sap.ui.define(["sap/ui/thirdparty/jquery", "sap/ui/dom/jquery/Focusable"], function(jQuery) { var oDomRef = jQuery("#myElement").firstFocusableDomRef(); }); |
jQuery Call |
Old Module |
New Module |
---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|