Technical Articles
Simple fiori launchpad sandbox on Node.js
Beginning
For a long time I have been using WEBIDE to develop fiori apps. Although I benifit a lot from webide, it is really powerful, but because of slow network, I often came across some problems to launch workbench, to save code, to test run apps on fiori launchpad, and even sometimes I lost codes.
And also I use eclipse with tomcat to write js code and deploy apps locally.
until some days ago, tomcat suddenly did not work any more, after spending a lot of time investigation I gave up finally… And i start to find out another way to test my apps locally.
after research, I found there are also some approach working with fiori and node.js together. However, some details still not very clear like proxy.
in this article i will show my practice , including following achivement:
- run app on fiori launchpad sandbox
- route request like ‘../resource/..’ to CDN resource
- route odata request to real backend system
- configure launchpad applications through configuration file
all these key files can be found on github.
Main steps
1. Init project
navi to ui5 project parent folder, new a package json file, use following command:
npm init
input infomation as you want, and also you can modify the package.json afterword. finnally you will see a json file like this:
package.json
{
"name": "ui5_server",
"version": "1.0.0",
"description": "node server host ui5 apps",
"main": "static_server_https.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"express": "~4.16.4",
"express-http-proxy": "~1.5.0",
"http-proxy": "~1.17.0"
},
"author": "leon li",
"license": "ISC"
}2. Index html
create index.html which is the entry point for ui5. in the index/html it requires sap-ui-core.js and sandbox.js they are both can be found on cdn launchpad,for path ‘../resources/’ it can be route to ‘/https://sapui5.hana.ondemand.com/resources/”by ‘http-proxy’ but for ‘/test-resources/” the proxy not work, i don’t know why…
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Financial Validation Result</title>
<script>
window["sap-ushell-config"] = {
defaultRenderer: "fiori2",
renderers: {
fiori2: {
componentData: {
config: {
search: "hidden"
}
}
}
}
};
</script>
<script src="sandbox.js" id="sap-ushell-bootstrap"></script>
<!-- Bootstrap the UI5 core library -->
<script id="sap-ui-bootstrap" src="../resources/sap-ui-core.js" data-sap-ui-libs="sap.ushell, sap.collaboration, sap.m, sap.ui.layout"
data-sap-ui-theme="sap_belize" data-sap-ui-compatVersion="edge" data-sap-ui-resourceroots='{"fin.cons.vecresult": "fin.cons.vecresult/webapp/"}'
data-sap-ui-frameOptions='allow'> // NON-SECURE setting for testing environment
</script>
<script>
sap.ui.getCore().attachInit(function () {
// initialize the ushell sandbox component
sap.ushell.Container.createRenderer().placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content">
</body>
</html>3. Static_server_https.js
use express, very simple to create a sever and plus ‘express-http-proxy’ and ‘http-proxy’ http request can be converted to https, and odata request can also sent to real backend server. by default request to system er9 will be sent to client 001, for our case client 500 is needed, so can write proxyReq header in the event ‘proxyReq’.
const express = require('express')
const app = express()
const proxy = require('express-http-proxy');
const httpProxy = require('http-proxy');
const odataProxy = httpProxy.createProxyServer({
target: 'https://ldai4er9.wdf.sap.corp:44300', secure: false
});
odataProxy.on('proxyReq', function (proxyReq, req, res, options) {
proxyReq.setHeader('sap-client', '500');
});
app.route('/sap/opu/odata/*$').all(function (req, res) {
odataProxy.web(req, res);
});
app.use(express.static(__dirname));
app.use('/resources/', proxy('sapui5.hana.ondemand.com/resources/', {
https: true
}));
/* app.use('/test-resources/', proxy('sapui5.hana.ondemand.com/sdk/test-resources/', {
https: true
})); */
app.listen(3000, () => console.log('Example app listening on port 3000!'))4. Fiori launchpad configuraition
in the folder ‘appconfig’ new a json file named ‘fioriSandboxConfig.json’
{
"applications" : {
"FinancialValidationResult-runValidationResultforReportedData": {
"additionalInformation": "SAPUI5.Component=fin.cons.vecresult",
"applicationType": "URL",
"url": "fin.cons.vecresult/webapp/",
"description": "Financial Validation Result",
"title": "Financial Validation Result"
},
"MySecondFioriObject-display" : {
"additionalInformation" : "SAPUI5.Component=com.mycompany.MySecondFioriApplication",
"applicationType" : "URL",
"url" : "/MySecondFioriApplication",
"title" : "My Second Fiori Application",
"description" : "My second Fiori application"
}
}
}5. Install dependencies
using command:
npm install
after that your project folder will look like this:
6. Run server
node static_server_https.js
7. Test in browser
everything works fine
Conclusion
With this simple practice you can develop apps from local workspace. although there are some limitations like cross navigation, run unit test… I am also look forward if someone can find way to solve these issues.
thank you
Great blog. Just asking myself why I didn't think of that. Can't wait to try this out.
Thanks for your encouraging. Besides i have a question which you can help to answer. For a real Fiori Launchpad tile, we can add url parameters when creating the tile. But how can this be done through fioriSandboxConfig.json. For example, the app i created in this article its real url is like 'localhost:3000/#FinancialValidationResult-runValidationResultforReportedData?&/S=FINCS&01', is it possible to add parameters '?&/S=FINCS&01' infioriSandboxConfig.json?
Hello,
is there a way to add Icons to the Tiles?