Skip to Content
Technical Articles
Author's profile photo Leon Li

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

run http://localhost:3000

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

Assigned Tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Jakob Marius Kjær
      Jakob Marius Kjær

      Great blog. Just asking myself why I didn't think of that. Can't wait to try this out.

      Author's profile photo Leon Li
      Leon Li
      Blog Post Author

      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?

      Author's profile photo Peter Volke
      Peter Volke

      Hello,

      is there a way to add Icons to the Tiles?