Skip to Content
Author's profile photo Former Member

What is the difference between sap.ui.require and jQuery.sap.require

There are two similar APIs in UI5, jQuery.sap.require and sap.ui.require. These two APIs is a little confused, especially for beginners from experienced with RequireJS.

jQuery.sap.require

The detailed API explanation in developer guide. Unfortunately You can not search in API REFERENCE.

This api will (synchronously) load the specified js file and do execution. The js file is not need to be a module. It could be a plain object, or just a piece of code.

synchronously is confirmed. Please refer to requireModule function in jQuery.sap.global.js

  1.   jQuery.ajax({
  2.   url : oModule.url,
  3.   dataType : 'text',
  4.   async : false,
  5.   success : function(response, textStatus, xhr) {
  6.   oModule.state = LOADED;
  7.   oModule.data = response;
  8.    },
  9.   error : function(xhr, textStatus, error) {
  10.   oModule.state = FAILED;
  11.   oModule.errorMessage = xhr ? xhr.status + " - " + xhr.statusText : textStatus;
  12.   oModule.errorStack = error && error.stack;
  13.    }
  14.    });

For example, if there is an UI5 app and MessageBox is not loaded. There will be a error, when you try to access it with sap.ui.commons.MessageBox .

  1. > sap.ui.commons.MessageBox
  2. Uncaught TypeError: Cannot read property 'MessageBox' of undefined(…)
  3. (anonymous function) @ VM265:2
  4. InjectedScript._evaluateOn @ VM41:878
  5. InjectedScript._evaluateAndWrap @ VM41:811
  6. InjectedScript.evaluate @ VM41:667

As MessageBox will be exported to global, so once it is be loaded, we could use it. So we usejQuery.sap.requier to load and execute the script.

  1. > var returnObject = jQuery.sap.require('sap.ui.commons.MessageBox');
  2. <. undefined
  3. > sap.ui.commons.MessageBox
  4. <. Object {Action: Object, Icon: Object}
  5. > returnObject
  6. <. Object {log: B, measure: G, _mIEStyleSheets: Object, interaction: Object, fesr: Object…}

There is an ajax call for MessageBox:

  1. Request URL:https://sapui5.hana.ondemand.com/resources/sap/ui/commons/MessageBox.js
  2. Request Method:GET
  3. Status Code:200 OK

After the MessageBox is loaded via jQuery.sap.require, we could use it.

Note:
jQuery.sap.require will return a wired object. I guess this api applies for chain pattern, then it will return the context this. But for this scenario, I don’t think it is a good idea. Since there are some property should be explored to API consumer and it will confuse. And the second parameter fnCallback is never be used.

  1.   jQuery.sap.require = function(vModuleName, fnCallback) {
  2.    return this;
  3.    }

sap.ui.require

Quote documentation in UI5 API REFERENCE

  1. Synchronous Retrieval of a Single Module Value 2.Asynchronous Loading of Multiple Modules

For item 1, it is very similar with jQuery.sap.require. Except two:

  • url pattern: it use slash (/)
  • return object is module object

For example:

  1. > var oMessageBox = sap.ui.require('sap/ui/commons/MessageBox');
  2. <. undefined
  3. > oMessageBox
  4. <. Object {Action: Object, Icon: Object}

For item 2, it is used to load dependency module:

  1. > sap.ui.commons.MessageBox
  2. <. Uncaught TypeError: Cannot read property 'MessageBox' of undefined(…)
  3. > (function() {
  4.   'use strict';
  5.   sap.ui.require(['sap/ui/commons/MessageBox'], function(MessageBox) {
  6.   console.log('MessageBox:', MessageBox)
  7.   })
  8. }());
  9. <. undefined
  10. <. MessageBox: Object {Action: Object, Icon: Object}

Actually load modules is not async, since it is also use requireModule to load file. But documentation is marked as async. : (

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Boghyon Hoffmann
      Boghyon Hoffmann

      We should just avoid jQuery.sap.require and sap.ui.require("moduleName") altogether since they are using synchronous XHR. Not only does it block the UI thread, thus resulting poor UX, but also browser vendors won’t support it anymore which can happen at anytime.

      Related to this topic: https://stackoverflow.com/a/45277948/5846045.

      About the synchronous behavior of sap.ui.require([], fn) that is supposed to be async..:

      [...] not async, since it is also using requireModule to load file. But documentation is marked as async. : (

      The API Reference also mentions it but also adds that it won't use async: false anymore:

      (sap.ui.require or) sap.ui.define currently loads modules with synchronous XHR calls. This is basically a tribute to the synchronous history of UI5. BUT: synchronous dependency loading and factory execution explicitly is not part of contract of sap.ui.define. To the contrary, it is already clear and planned that asynchronous loading will be implemented.

      Author's profile photo Mike B.
      Mike B.

      Thanks for the clarification, the fact is that the XHR calls will be deprecated and should be avoided is clear.

      But what can I use instead? When I generate Component-preload.js it still uses sap.ui.require.preload({"…","…"}).

      Author's profile photo Boghyon Hoffmann
      Boghyon Hoffmann

      XHR in general won't be deprecated. It's just the synchronous invocation of xhr.open (or jQuery.sjax) that should be avoided. Please, keep using the asynchronous variant of sap.ui.require to load modules on-demand.