SAP/ui5-tooling

How to integrate External Librairies in SAPUI5/UI5/Fiori

christophelannoyadeo opened this issue · 7 comments

christophelannoyadeo commented

Hi everyone,
I want to use and external library @datadog/browser-rum

It works perfectly if I follow tte tips n this blog https://blogs.sap.com/2017/04/30/how-to-include-third-party-libraries-modules-in-sapui5/. From this lastest, we on upload the js file in the project.

But I don't really want to do that.

I tried to follow this blog also https://blogs.sap.com/2021/11/15/using-npm-packages-in-ui5-without-shims/ so without using shims (I tried also with shims but I nether succed).
So I would like to use npm packages as proposed in the blog.

So to test it I am working with BAS based on a demo project Walkthrough demo.

I have set the dependancy in package.json
2023-03-15_18h20_45

Then I use in define in my controller
image

But when i want to test, it fails. The file is not found despite it exist in te dist folder
image

You can see that this file exists in the folder after building it
image

I think i have not set something wrong but I don't know where (in ui5.yaml ??)

May I ask you a clue or tips or example that could help ?

Thanks in advance
Kind Regards
Christophe Lannoy

flovogt commented

Hi @christophelannoyadeo,
thanks for opening this issue.
When you wanna use shims, please have a look at https://sap.github.io/ui5-tooling/stable/pages/extensibility/ProjectShims/
If your external library is already deployed on a CDN, you might go with https://github.com/flovogt/ui5-external-library.
Hope this information helps. If not feel free to re-open this issue.

christophelannoyadeo commented

Hi @flovogt ,
thanks a lot for your help and links.

  • for shims, I have found that I have an issue. In BAS, i can only use spec 2.6 and I need to be in 3.0 to be able to use "@" in the name definition. If I want to use shims, in ui5.yaml, in " configurations" section the name as to be the same as package.json. But in dependancy, I am obliged to use @datadog/browser-rum so I think just right now

  • so I have tried to use your example but I still ecnounter a probleme when strating my application
    In controler I have put this code
    `sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/model/json/JSONModel",
    "sap/ui/Device",
    "sap/ui/demo/walkthrough/thirdparty/datadog-rum-v4"
    ], function (UIComponent, JSONModel, Device, _DD_RUM) {

    "use strict";

// Provides a shim for the datadog-rum library
sap.ui.loader.config({
paths: {
"sap/ui/demo/walkthrough/thirdparty/datadog-rum-v4": "https://www.datadoghq-browser-agent.com/datadog-rum-v4.js"
},
shim: {
"sap/ui/demo/walkthrough/thirdparty/datadog-rum-v4": {
amd: true,
exports: "_DD_RUM"
}
}
});

return UIComponent.extend("sap.ui.demo.walkthrough.Component", {

	metadata: {
		interfaces: ["sap.ui.core.IAsyncContentCreation"],
		manifest: "json"
	},

	init: function () {
		// call the init function of the parent
		UIComponent.prototype.init.apply(this, arguments);
		
		// set data model
		var oData = {
			recipient: {
				name: "World"
			}
		};
		var oModel = new JSONModel(oData);
		this.setModel(oModel);

		// set device model
		var oDeviceModel = new JSONModel(Device);
		oDeviceModel.setDefaultBindingMode("OneWay");
		this.setModel(oDeviceModel, "device");

		// create the views based on the url/hash	
		this.getRouter().initialize();
		

		 
	},

	getContentDensityClass : function () {
		if (!this._sContentDensityClass) {
			if (!Device.support.touch) {
				this._sContentDensityClass = "sapUiSizeCompact";
			} else {
				this._sContentDensityClass = "sapUiSizeCozy";
			}
		}
		return this._sContentDensityClass;
	}

});

});I launch npm run build and launch the application, but it generates a probleme when loading 'sap/ui/demo/walkthrough/thirdparty/datadog-rum-v4.js': failed to load 'sap/ui/demo/walkthrough/thirdparty/datadog-rum-v4.js' from ../thirdparty/datadog-rum-v4.js: script load error`

2023-03-20_09h55_26

As It works for you application, I don't understand why I am stuck on mine..

Any clue?

best Regards

flovogt commented

Hi @christophelannoyadeo,
would be awesome if you could share the app via a github repository or as an zip file in the issue here.
Its quite hard to judge on the reason here.