SAPUI5 - loading source library in component.js
Question
I am trying to use mobx (to use the observable pattern) inside my SAPUI5 fiori webapplication.
For that purpose I have made a simple test project with the following example: mobx example this works fine.
Now my problem is, that my application will run in the fiori launchpad. Since I know, the index.html file will not be loaded, when the application runs in the launchpad.
So the following parts should somehow be loaded in the component.js file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/3.0.2/mobx.umd.js" type="application/javascript"></script>
and
data-sap-ui-resourceroots='{
"sap.ui.mobx": "test.project/libs/mobx/src",
"test.project": "./"
}'
I have so far searched for solutions, but I could not find a clear instruction.
So does anyone know how I can load and define the mobx library in the component.js file, like i do it in the index.html?
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>project</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mobx/3.0.2/mobx.umd.js" type="application/javascript"></script>
<script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize"
data-sap-ui-resourceroots='{
"sap.ui.mobx": "test.project/libs/mobx/src",
"test.project": "./"
}'
data-sap-ui-compatVersion="edge"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-async="true"
data-sap-ui-frameOptions="trusted">
</script>
</head>
<body class="sapUiBody">
<div data-sap-ui-component data-name="test.project" data-id="container" data-settings='{"id" : "project"}'></div>
</body>
</html>
component.js:
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"test/project/model/models"
], function (UIComponent, Device, models) {
"use strict";
return UIComponent.extend("test.project.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* @public
* @override
*/
init: function () {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// enable routing
this.getRouter().initialize();
// set the device model
this.setModel(models.createDeviceModel(), "device");
}
});
});
I don't know how the component.js file should look like, where do I have to include the libraries and define the namespace sap.ui.mobx ?
Any help is appreciated, thanks.
1 answers
solution1
0 2019-08-05 13:39:46
Does it work if you modify the define-section in your component.js like this:
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"sap/ui/mobx",
"test/project/model/models"
], function (UIComponent, Device, models) {
"use strict";
The following link might also be helpful: Moving SRC from Index.html to Component ui5 There are multiple ways to include an external js library:
1) Include in the UI5 controller where you use the library.
sap.ui.define([ "sap/ui/core/mvc/Controller", "//moment.js" ], function(Controller){ .... Use moment() here.... }
2) Include in the Component.js, as in 1. By this "moment" will be available through the app. Though the next option is preferred.
3) Mention in the manifest.json in your application (in manifest.json --> sap.ui5 --> resources). This option also allows you to use "moment" throughout your app. "sap.ui5": { "resources": { "js": [{ "uri": "/moment.js" }] } }
4) manifest.json
5) jQuery.sap.require('namespace.folder.fileName')
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.