How to add External Libraries to a SAP Fiori Elements App .

[Abhi9]

Hi,

I am trying to integrate third party libraries to SAP Fiori Element App.

App is launched via FLP. It's not loading the libraries properly when it is loaded via extended controller file or from Component.JS.

As of now I am trying to load it via onInit or onBeforeRendering to load let's say a google map via CDN.

UI Version: 1.108.23

jQuery.sap.includeScript("https://maps.googleapis.com/maps/api/js?key=""&loading=async&libraries=geometry", 'googleMaps', this.initializeMap.bind(this));

initializeMap: function () {
			var map = new google.maps.Map(this.getView().byId("idmap").getDomRef(), {
				center: { lat: -34.397, lng: 150.644 },
				zoom: 2
			});
		}

Also, in a different scenario when app to app navigation is enabled ...unless there is hard refresh on the second app's object page where a third-party library is loaded...it is not loading the library.

Wondering if it's a Bug or a known issue which is resolved. 

Any recommendations. @pmuessig 

Thanks,

Abhi

[pmuessig · Accepted solution]

I created a small demo project for that case: 

https://github.com/petermuessig/ui5demo.google.maps/tree/main

It consumes GoogleMaps via the URL inside a Custom UI5 Control. This control ensures that the script loading and the rendering is integrated into UI5's lifecycle: https://github.com/petermuessig/ui5demo.google.maps/blob/main/webapp/control/GMap.js

Now the GMap can be easily used in an XMLView: https://github.com/petermuessig/ui5demo.google.maps/blob/main/webapp/view/Main.view.xml#L16-L22 

There might be also other options to integrate Google Maps via the Loader or the suggested inline script - but this would be a bit more complicated than the URL way and especially the loader from NPM requires then the usage of ui5-tooling-modules - but this loader script would handle the loading implemented in the custom control above.

HTH