on 2022 Mar 08 8:49 AM
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";
});
});
}
});
});
Request clarification before answering.
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>
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
34 | |
22 | |
16 | |
8 | |
5 | |
5 | |
4 | |
4 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.