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.
Related
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"
There are enough tutorials on how to create a PWA using ionic 4 but all the solutions I found are focused on deploying the application in the root.
What I need is to deploy my entire application in a subfolder:
https://my-domain.com/my-app/
I explained in detail what's my problem in this repository:
https://github.com/Viterbo/ionic-4-PWA
Thanks
This doesn't address the Ionic 4 aspect of this, but I figured it out how to get a PWA to install from a subfolder, the answer is here: https://www.w3.org/TR/appmanifest/#navigation-scope:
"If the scope member is not present in the manifest, it defaults to the parent path of the start_url member. For example, if start_url is /pages/welcome.html, and scope is missing, the navigation scope will be /pages/ on the same origin. If start_url is /pages/ (the trailing slash is important!), the navigation scope will be /pages/.
So, to run by itself (root folder), the start_url looks like this:
"start_url": "/index.html?utm_source=homescreen",
but when serving the PWA from a subfolder, it looks like this:
"start_url": "/app-folder/index.html?utm_source=homescreen",
"scope": "/app-folder/",
I tested this on the latest Chrome on Windows 10 and the latest Android 9 release.
Here's ewhat worked for me, First scope and start url should be same
manifest.json
"scope": "/admin/",
"start_url": "/admin/?u=what-ever"
service worker path should be same as scope
index.html
function onLoad() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/admin/sw.js')
.then(function (reg) {
console.log("Yes");
}).catch(function (err) {
console.log("No", err)
});
}
}
window.addEventListener('load', onLoad);
I'm trying out some very basic Ionic tutorials from Ionic website (Ionic Tutorial), and i want to be able to view and modify scss from dev tools.
The app functions correctly, css classes i've added in scss files work correctly as well but i see a main.css file instead of the foo.css from which it was compiled. I can even view typescript files on dev tools and debug, which means source map for js->ts is working. It's the css-> scss that's not working.
I can see these files on www/build
main.js
main.map.js
main.css
main.map.css
Which means the source map is generated correctly.
I have also enabled css source maps in chrome from
- DevTools -> Settings ->Sources -> Enable CSS source maps
I would mark this as duplicate but it seems like i cannot. Answer can be found on this SO postenter link description here. Basically,
You'll need to extend your sass.config.js file, by default source mapping for sass is disabled.
config/sass.config.js:
module.exports = {
sourceMap: true,
}
package.json:
"config": {
"ionic_sass": "./config/sass.config.js",
}
I can verify that this works.
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)
I've created a Chrome app which, when I load locally works fine. However, when I publish it to the Chrome App store and install I get a 404 that it couldn't find index.html. Really lost at this point. Here's the app section of my manifest.json:
"app": {
"launch": {
"local_path": "index.html"
}
},
Check the unpacked version of the Chrome app in the Extensions directory
[User Data Directory]/[Profile Dir (likely named 'Default')]/Extensions/aaaaaaaaaaaahashkeyzzzzzzzzzz
Try
Loading an unpackaged app from that installed directory.
Examining the files, is index.html missing, or file permissions set incorrectly?