Build SAP UI5 Desktop Apps With Electron
Introduction
In this lesson, you will learn how to build native desktop apps with SAP UI5 and Electron. You might be surprised how easy it is to start building high-quality desktop apps for any platform, or even port your existing SAP UI5 app to native desktop platforms.
About Electron
Electron is an open source library developed by GitHub for building cross-platform desktop applications with HTML, CSS, and JavaScript. Electron accomplishes this by combining Chromium and Node.js into a single runtime and apps can be packaged for Mac, Windows, and Linux.
Prerequisites
In this blog I would like to go with a Windows 10 machine, so I’m going to show you how to install all the needed tools for SAPUI5 Desktop application development. We will go through the installation of the following components:
Others
-
Windows 10
-
UI5 App: ztest_emp_prfl v1.48
Installation/Setup
-
Node.js Setup
Download Node.js version 8 or lower from the link https://nodejs.org/en/ and install.
Once installation is done. Open Command Prompt (Windows+R then type “cmd” press Enter) and type “npm –v“. It returns node version if the installation is successful.
-
SAP UI5 Runtime Libraries (Optional).
Note: This library setup is only required while developing offline application.
Download SAP UI5 Runtime libraries from the link Click here . Once download is finished open the zip file and extract “resources” folder into your application to “WebContent” folder.
Setting Up Electron Environment and Testing the app
-
Open Command Prompt
press Windows+R, type “cmd” press Enter
-
Navigate to app directory
Run command
cd <path to root folder of your app> // Example cd C:\XXX\XXX\ztest_emp_prfl
-
Initialize the npm and create “package.json”
Run command
npm init
It will ask few questions and creates package.json file. Enter following details.
description: Employee Profile entry point: (index.js) main.js author: Irfan G
at the end type “yes” and hit Enter.
A package.json file offers you a lot of great things:
- It serves as documentation for what packages your project depends on.
- It allows you to specify the versions of a package that your project can use using semantic versioning rules.
- It makes your build reproducible, which means that it’s much easier to share with other developers.
-
Create entry point – main.js
Open app folder ie. ztest_emp_prfl and create a file main.js
Create a new file named main.js in the root of your project – this is the Electron NodeJS backend. This is the entry point for Electron and defines how our desktop app will react to various events performed via the desktop operating system. Paste the following code.
const {app, BrowserWindow} = require('electron'); // Global reference of the window object. let mainWindow; // When Electron finish initialization, create window and load app index.html with size 800x600 app.on('ready', () => { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: false } }); // Path to your index.html mainWindow.loadURL('file://' + __dirname + '/WebContent/index.html'); });
-
Modify index.html
Open index.html file and replace resource path like below. Only change “src” property value.
<script id="sap-ui-bootstrap" src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-compatVersion="edge" data-sap-ui-resourceroots='{"com.empprfl": ""}'> </script>
Note: If you’re using SAP UI5 Runtime libraries do the following changes.
<script id="sap-ui-bootstrap" src="./resources/sap-ui-core.js" data-sap-ui-libs="sap.m" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-compatVersion="edge" data-sap-ui-resourceroots='{"com.empprfl": ""}'> </script>
-
Install Electron and modify package.json file
Open Command Prompt and Run
npm install electron --save-dev
Once finished. Open package.json and replace the line inside “script” node.
"start": "electron ."
this tells npm to run electron from root(“.”) folder. Now your package.json looks like this.
-
Testing your application by electron.
Open Command Prompt and Run
npm start
It will run your application in a window.
You can also open developer tools to check for errors. In menu select Window-> Toggle Developer Tools or press Ctrl+Shift+I.
Creating Build
-
Open Command Prompt
Press Windows+R, type “cmd” press Enter).
-
Navigate to app directory
Run command
cd <path to root folder of your app> // Example cd C:\XXX\XXX\ztest_emp_prfl
-
Install Electron Packager
Run below commands in sequence
// for use in npm scripts npm install electron-packager --save-dev // for use from cli (Command Line Interface) npm install electron-packager –g // for creating prebuild npm install --save-dev electron-prebuilt
-
Add Icon for the App
Create a folder in root directory to add icon(WinIcon.ico) to your application. I’ll create folder as below
Xxx/xxx/ztest_emp_prfl/assets Xxx/xxx/ztest_emp_prfl/icons Xxx/xxx/ztest_emp_prfl/WinIcon.ico
Please make sure your icon type. It varies from different platforms.
// For windows = XXX.ico // For Mac = XXX.icns // For Linux = XXX.png
Download all 3 types of icon from http://www.iconarchive.com
-
Setting productname and electron version
open up package.json and add a productname after the “name” node.
"productName": "Employee Profile App",
And use below command line to build the app for particular platform.
// For Mac electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/WinIcon.ico --prune=true --out=release-builds // For Windows electron-packager . ztest_emp_prfl --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/WinIcon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Employee Profile App\" // For Linux electron-packager . ztest_emp_prfl --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/WinIcon.ico --prune=true --out=release-builds
Note: In the command, change your application name, package name and path to the icon. And also it’s syntax is different for different platforms.
Now pick the windows command and you can execute this command directly from command line or we can place this command in package.json and execute it using npm. Open package.json and add this command as following inside “script” node. At the end package.json look like this.
{ "name": "ztest_emp_prfl", "productName": "Employee Profile App", "version": "1.0.0", "description": "Employee Profile", "main": "main.js", "scripts": { "start": "electron .", "package-win": "electron-packager . ztest_emp_prfl --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/WinIcon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Employee Profile App\"" }, "author": "Irfan G", "license": "ISC", "devDependencies": { "electron": "^1.7.9", "electron-packager": "^10.1.0", "electron-prebuilt": "^1.4.13" } }
-
Now run the build command.
npm run package-win
Here package-win is the property which is specified under “script” node of package.json. Like wise you can add particular name for other platforms, specify the particular command and execute it.
Once it’s success, Congrats!!! Your desktop application is ready. Go to your app folder inside that new folder will be created as “release-builds” under that look for file created with the app name with extension as “.app” as “ztest_emp_prfl.app”. Double click on it to run the application.
Final Desktop App
That’s it!!!
Debugging/Error Solving.
-
In Developer Tools – JQuery is not found.
Add webPreferences property inside main.js like below
mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: false } });
-
Command Options –verbose
Check for the what’s happening while executing any command by adding –verbose option at the end of every command. It will show all the background processes while running the command.
// Example npm start –verbose
-
Failed to parse json
Check for extra commas and braces in package.json
That’s it!!! Hope my concept is clear and easy to understand
Thank You!!! 🙂
Hi Irfan,
Thanks for your blog, this is something I have been wanting to experiment with for a long time.
Cheers,
Pierre
Hi Pierre,
You're Welcome. I'll be posting more similar posts.
Regards,
Irfan G.
Excellent, Easy to understand.... Thanks
You’re welcome.
Regards,
Irfan G.
Hi Irfan,
Excellent blog !
Thanks
Keshav
You’re welcome.
Regards,
Irfan G.
This is very good. I have a few - possibly stupid - questions,
A lot of blogs, or articles on the internet tell you how to do something without saying why you would want to do such a thing i.e. what benefit does it bring you. This is because the benefit is so obvious to the author it does not warrant even mentioning.
So I am going to guess what the benefit is here. If I totally wrong please tell me!
If you port your UI5 application to a desktop application then the client side code runs on your local PC (desktop) as opposed to on the internet, possibly on the other side of the world? And that then gives you a performance improvement? And it can work if you have access to your SAP system via your local area network but not the internet due to whatever reason causing a temporary internet outage?
If I am talking free energy crazy here please set me right and tell me what the actual benefit is, and stop reading this comment right here, as I am going off into la la land hereafter.
As I understand it the SAP GUI is installed on your local PC, and talks to SAP via the client-server architecture, and runs really fast, despite looking like a gray bulldog chewing wasps.
This is the same for Microsoft applications like outlook and word, they have seemingly instant response times because they are running on your actual machine. They look a million dollars when it comes to appearance, to my eyes at least,
When I asked I was always told you could not have, in SAP, something that looked as good as a Microsoft application, and ran as fast as it, as such a thing was impossible. When I asked what about the actual Microsoft applications, I was told to stop changing the subject.
It was impossible to make the SAP GUI look better apparently, it was physically impossible to have a good looking screen running on your local PC. Instead you had to make a trade off.
The first such trade off was Web Dynpro, which had had the dual feature of running much slower than the GUI (because it ran in the browser) and looking even worse than the SAP GUI which took some doing, but it managed that somehow with ease.
Next we have Ui5 which looks a lot better - though beautiful is a stretch - and runs a lot faster than the Web Dynpro due to a reduced number of round trips as I understand it, and possibly some other trickery.
So I go back to my question - if UI5 is running as a desktop application, with the internet down, does it run faster than a normal Ui5 application where the client side code runs "in the cloud" or does it not make a difference because the code is still running in the Chrome browser?
Put another way - is it in fact impossible to have an SAP application looking as good as an MS application and responding as fast as one, both at the same time?
Cheersy Cheers
Paul
Dear Paul,
Yes these applications are fast if it's developed using local UI5 Library and loading these libraries locally from the computer.
If internet is down and you're loading these apps using libraries stored on internet/server definitely it'll slows down the app at initial.
Hope you're clear with these answers.
So, major goal is to develop UI5 Desktop apps is to make applications offline in the places where internet is not stable.
That is good to here. In some ways this idea is quite revolutionary.
The most mission critical application at my company is our order taker custom transaction. At the call centre literally every second counts, you could say ever extra second spent taking an order costs one dollar.
Thus we have made the order entry screen as intuitive as possible (i.e. nothing like VA01) using a GUI DYNPRO custom transaction, which then calls the sales order BAPI.
We never went down the path of porting this to a browser based application, as the agents (who sit in front of computers) would then be slowed down during the order taking process due to a browser based application responding slower than a GUI based application.
If you could have the benefits of a UI5 application e.g. better look and feel, Google style search, dynamic pop up boxes when you hover your cursor over something (i.e. features you cannot do in the SAP GUI) and not sacrifice even one second of response time, then that would be wonderful.
Is this realistic?
Cheersy Cheers
Paul
Dear Paul,
Thank you for valuable information. I have understood your query and i'll look forward and come up with something better that you're trying to search for.
Thanks again...
Hi Irfan,
Thanks for Blog on how to use Electron for build desktop apps. I have a question on the execution of the application. Did you make any changes to manifest.json to provide server name where the application should fetch metadata and other ODATA Calls?
If possible, could you please share the example code used in this blog.
I am trying to build one of standard HCM App. After downloading the source code, created main.js, Index.html with local SAP UI5 runtime resources. While testing application, getting an error as there are no server details where ODATA calls should be routed.
Also, did you tried to add offline capabilities for ODATA calls?
Thanks
Sumanth
Hi Sumanth,
Thank You.
Currently I'm working on it. Once I'm done i'll update you on the same.
BR,
Irfan
Hi Irfan,
Could you please share some info on how authentication was handled when ODATA Service is called to fetch data. I have manifest.json updated to call right server where ODATA resides.
Thanks
Sumanth