Workzone javascript undefined when navigating after loading arcgis widget

[sander_star2]

We developed a geocard widget for workzone. We used the arcgis library to show a map. The widget is shown correctly but when we navigate to another tab page of the workspace a javascript error occurs. Looks like the workzone (sap jam) libaries interfere with the arcgis library. Is there anyone who can help with a certain solution?

Details are below.

Tabpage showing the geocard widget

Switch to another tabpage

Javascript error

Uncaught Error: undefinedModule

at p (init.js:8:46)

at aa (init.js:15:194)

at h (init.js:8:145)

at Object.e.core.modifyUniversalSearchForContextOptions (jam_1-dcb89e92b5087066fb495babe5bdeb93dd1d96a48420d2105f5a3ff827831f52.js:112:10350)

at HTMLDocument.<anonymous> (jam_1-dcb89e92b5087066fb495babe5bdeb93dd1d96a48420d2105f5a3ff827831f52.js:113:116)

at HTMLDocument.dispatch (jquery-9fa10aac19270ed292eba66175d1f8eb72ae0b2969d0e618f879874a0377ae34.js:3:16693)

at HTMLDocument.y.handle (jquery-9fa10aac19270ed292eba66175d1f8eb72ae0b2969d0e618f879874a0377ae34.js:3:14669)

at Object.trigger (jquery-9fa10aac19270ed292eba66175d1f8eb72ae0b2969d0e618f879874a0377ae34.js:4:7201)

at HTMLDocument.<anonymous> (jquery-9fa10aac19270ed292eba66175d1f8eb72ae0b2969d0e618f879874a0377ae34.js:4:7807)

at Function.each (jquery-9fa10aac19270ed292eba66175d1f8eb72ae0b2969d0e618f879874a0377ae34.js:2:13304)

Sources

file: ArcGis.jsIn the code below the arcgis library will be initialized.

jQuery.sap.registerModulePath("arcgis_server", "https://js.arcgis.com/4.20/");

sap.ui.define([

"arcgis_server/init"

], () => ({

require: require

}));

file: Main.controller.js

In the code below the map of the arcgis will be 'shown'.

sap.ui.define([

"sap/ui/core/mvc/Controller",

"nl/xxxxx/workzone/geocard/libs/test",

"nl/xxxxx/workzone/geocard/util/ArcGis"

], (Controller, test, ArcGis) => {

"use strict";

return Controller.extend("nl.xxxxx.workzone.geocard.Main", {

onInit: function() {

test.helloworld();

this.initializeMap("arcgis-navigation", "geomap", [-122.3321, 47.6062], 12);

},

initializeMap(baseMapName, mapDivId, centerPoint, zoomLevel) {

ArcGis.require([

"esri/config",

"esri/Map",

"esri/views/MapView",

"esri/widgets/Search",

"dojo/domReady"

], (Config, Map, MapView, Search, ready) => {

ready(() => {

Config.apiKey = "<fill your own>";

// basemap acrgis-navigation => // API-key needed!

// streets => no API-key needed

const map = new Map({

basemap: baseMapName

});

const view = new MapView({

container: mapDivId,

map: map,

center: centerPoint,

zoom: zoomLevel

});

// Create search widget

const search = new Search({

view: view

});

// Add search to the map

//view.ui.add(search, "top-right");

// Find places

const locatorUrl = "http://geocode-api.arcgis.com/arcgis/rest/services/World/GeocodeServer";

});

});

}

});

});

[sander_star2]

We solved it by doing an ugly trick.

In the Component.js we added some code like below.

const sUrl = sap.ui.require.toUrl("nl/company/gen/esri/fiorimodule/esri/EsriImports.txt");

const sImport = await $.ajax(sUrl);

const sImportVersion = sImport.replace(new RegExp("{esriVersionNumber}", "g"), sVersion);

$("head").append(sImportVersion);

In the EsriImport.txt the esri modules are loaded and set in a global variable. Like below. You have to write some code if the imports are loaded (variabele importsLoaded is true).

<script>

const sapbtpgenesri = {

imports : {},

importsLoaded : false

};

</script>

<script type ='module'>

import WebMap from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/WebMap.js';

import MapView from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/views/MapView.js';

import ScaleBar from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/widgets/ScaleBar.js';

import Expand from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/widgets/Expand.js';

import Home from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/widgets/Home.js';

import Search from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/widgets/Search.js';

import Locator from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/tasks/Locator.js';

import Basemap from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/Basemap.js';

import BasemapGallery from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/widgets/BasemapGallery.js';

import LayerList from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/widgets/LayerList.js';

import FeatureLayer from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/layers/FeatureLayer.js';

import MapImageLayer from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/layers/MapImageLayer.js';

import TileLayer from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/layers/TileLayer.js';

import VectorTileLayer from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/layers/VectorTileLayer.js';

import GraphicsLayer from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/layers/GraphicsLayer.js';

import Graphic from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/Graphic.js';

import Extent from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/geometry/Extent.js';

import Point from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/geometry/Point.js';

import Polyline from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/geometry/Polyline.js';

import ViewPoint from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/Viewpoint.js';

import Track from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/widgets/Track.js';

import Sketch from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/widgets/Sketch.js';

import Editor from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/widgets/Editor.js';

import Measurement from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/widgets/Measurement.js';

import CoordinateConversion from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/widgets/CoordinateConversion.js';

import Query from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/rest/support/Query.js';

import * as watchUtils from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/core/watchUtils.js';

import * as geometryEngine from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/geometry/geometryEngine.js';

import esriConfig from 'https://js.arcgis.com/{esriVersionNumber}/@arcgis/core/config.js';

sapbtpgenesri.imports = {

WebMap,

MapView,

ScaleBar,

Expand,

Home,

Search,

Locator,

Basemap,

BasemapGallery,

LayerList,

FeatureLayer,

MapImageLayer,

TileLayer,

VectorTileLayer,

GraphicsLayer,

Graphic,

Extent,

Point,

Polyline,

ViewPoint,

Track,

Sketch,

Editor,

Measurement,

CoordinateConversion,

Query,

watchUtils,

geometryEngine,

esriConfig

};

sapbtpgenesri.importsLoaded = true;

</script>

[sander_star2]

SAP workzone and the ESRI library both use the window.require to put there some javascript functions. So they overwrite each others code. Causing the issue desribed.