Need to create a UI5 custom control which need some other AMD modules

Question

I need to create a UI5 coustom control where i need to load the ESRI Map.

sap.ui.define([
"sap/ui/core/Control"
], function (Control) {
"use strict";
return Control.extend("custom.map.ESRIMap", {
    init : function(){
        this._map = new Map('mapDiv',esriMapOptions);
    }
});
});

This is how i want to write my custom control.

Where i have loaded ESRI javascript API as

jQuery.sap.includeScript({
                     url : "https://js.arcgis.com/3.18/init.js",
                     id : 'esriApi' 
                 });

Problem i am facing is ESRI library loading, if i load as below,

sap.ui.define([
    "sap/ui/core/Control"
    "esri/map
    ], function (Control,Map) {

It will not load because its not ui5 Module

i have to do require as below

require(["esri/map"],function(Map){

i need help to write a UI5 Custom control or Module where i have to load UI5 module and ESRI AMD module together before return i the first code.

Answer 1

Generally speaking, most AMD module loaders don't support the Dojo AMD plugin syntax (ex: dojo/i18n) used by the ArcGIS API for JavaScript. Therefore the only reliable way to load those modules is to use Dojo's require() as you mention above.

When using other module loaders, we often use the "nested require" patterns. In your case it would look something like this:

sap.ui.define([
  "sap/ui/core/Control"
], function (Control) {
    "use strict";
    return Control.extend("custom.map.ESRIMap", {
      init : function() {
        require(["esri/map"],function(Map){
          // now you have access to Control and Map
          this._map = new Map('mapDiv',esriMapOptions);
        });
      }
    });
});

Keep in mind that require() is async and in all likelihood going to result in network requests to fetch module scripts. I know nothing about the UI5 framework and whether or not it's OK to make such async requests in a control's init(). If not, you may need to find another place for the require.

This pattern is described in more detail in this blog post which links out to other examples of how it is used in React and Angular applications. You may be able to use the esri-loader as well, which just provides an API to hide the use of the require() global.