I've a custom control in my app. It runs as a standalone web application fine. But when I'm launching it from the Fiori Launchpad (FLP), it logs an error in the console. I've registered my control in my index.html file:
<script>
sap.ui.localResources("sap.custom");
sap.ui.localResources("sap.ui.codetools");
sap.ui.localResources("libs");
</script>
The structure of file directory is:
If I remove my custom control, then I can run my app in the launchpad. Do I need to add some settings in my manifest file? What could be the reason for this error?
The common configuration for a Fiori tile is to point to the Component file. So the index.html file is not deployed together with the app. If it's absolutely necessary to register additional module paths, do it in manifest.json instead.
{
"sap.ui5": {
"resourceRoots": {
"sap.ui.codetools": "sap/ui/codetools"
}
}
}
Documentation: Descriptor for Applications, Components, and Libraries (See resourceRoots).
The common configuration for a Fiori tile is to point to the Compopent.js file. So the index.html is not called. The FioriLaunchpad.html plays the role of the index.html and the ComponentContainer is defined there.
Try to register your custom control somewhere else within the app.
Activate the APP Node on SICF( node Name is same as App)
Related
Currently i am facing two problems:
I have two repos one for shell and another for MFE application
Here is the version o module federation
#angular-architects/module-federation": "^14.3.12
First Problem:
I have webcomponent created which is custom grid and it created separately in different repo. And this components is install via npm (added in package.json file) in MFE application project. And add the necessary files in script section of angular.json file. MFE application run properly when standalone. But when we use the MFE in shell application the shell application doesn't show the custom webcomponent. Only way to work is to install the same webcomponent in shell as well to work.
So anybody any idea how can share the webcomponents which used by MFE in shell application instead of installing in shell application project?
Second Problem:
Another problem I currently facing is sharing static files between MFE application and shell.
I have env.js file which has api call urls which is used by MFE application.With MFE application its works correctly.
But when I load the MFE application in shell application it doesn't recognizes the API url call because it tries to search in its asset folder instead of assets folder of MFE application?
Please let me know what i am missing here?
I tried with webconfig.js files in MFE application which angular module federation has created but didn't got any break through to these problems
I am linking to resources such as css or image files in the application made with UI5 but I am facing a problem.
Usually, the path are for example:
return "css/style1.css"; // for a stylesheet inside the folder css
return "img/image.jpg"; // for a image inside the folder img
And once the application deployed it works fine but when running with SAP Web IDE both are not found resulting in the 404-error.
So for running in SAP Web IDE, showing the style and image the path is:
return "../../../../../webapp/css/style1.css"; #for a stylesheet inside folder css
return "../../../../../webapp/img/image.jpg"; #for a image inside folder img
And that is working running with SAP Web IDE but it's not clean. And I'm not sure either if it can work once it's deployed.
Is it a possible configuration or trick to be able to use standard link and run the app with SAP Web IDE for seing the result before to deploy?
There is a solution to create a model for this:
In model.js:
createImageRoot: function() {
var oModel = new JSONModel({
path: sap.ui.require.toUrl("the.namespace") // available since 1.58. Otherwise, use jQuery.sap.getModulePath instead.
});
oModel.setDefaultBindingMode("OneWay");
return oModel;
},
In Component.js, add in the init method
this.setModel(models.createImageRoot(), "imageRoot");
And then for example :
return this.getView().getModel("imageRoot").getProperty("/path") + "img/image.jpg"
I am making a new Web application with Flutter web.
I want to add service workers to my app in order to make it a PWA.
What I need to use to achieve my goal ?
I have tried to do it with dart packages (service_worker or pwa), but they are deprecated for Dart 2.
Since a service worker is just javascript code you can write one in plain javascript (e.g. in a sw.js file), bundle it with your flutter web app and then register the service worker from the index.html file like this (source):
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js');
}
You currently need to switch to Flutter Channel Dev (at Feb 17th 2020, current Dev version 1.15.3)
For existing projects, use the terminal to hit the command:
flutter create .
For new projects, you would have a 2 files: manifest.json and index.html inside your web folder.
While checking index.html you would notice the following script:
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('/flutter_service_worker.js');
});
}
If the script is not there, added inside <body></body>
This script creates the PWA support for you and be able to "install" the app on a device (this also includes MacOS)
Follow this GUIDE to complete your PWA functionalities.
I have one SAPUI5 application.
I added one custom css file to it via manifest.json like this:
"resources": {
"css": [
{
"uri": "css/style.css"
}
]
},
While this file can be loaded correctly in WEB IDE when I deploy it to ABAP repository its address does not resolved correctly. Actually it try to load the CSS file with the same address that it uses in WEB IDE and obviously it will fail.
What can cause this issue?
I found the reason. I used the manifest version 4.0, and in this version the app id must be the same as the namespace otherwise it cannot resolved the addresses correctly. By making the appId and namespace equal everything going well.
I just put the build folder to the root folder of nginx server, e.g. /var/www/html, but nothing is visible.
When inspect from browser, the root content is empty?
enter image description here
Check your developer console for possible errors. You can also use React Developer Tools to debug your app. You can provide your non-sensitive code to make us understand it better.