Skip to Content
Author's profile photo Irfan Gokak

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

  1. Open Command Prompt

    press Windows+R, type “cmd” press Enter

  2. Navigate to app directory

    Run command

    cd <path to root folder of your app>
    // Example 
    cd C:\XXX\XXX\ztest_emp_prfl
  3. 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.
  4. 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');
    });
    
  5. 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>
    
  6. 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.

  7. 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

  1. Open Command Prompt

    Press Windows+R, type “cmd” press Enter).

  2. Navigate to app directory

    Run command

    cd <path to root folder of your app>
    // Example 
    cd C:\XXX\XXX\ztest_emp_prfl​
  3. 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​
  4. 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

  5. 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"
      }
    }
  6. 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.

  1. 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  
      }
    });

  2. 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​
  3. 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!!! 🙂

Assigned Tags

      13 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Pierre Dominique
      Pierre Dominique

      Hi Irfan,

      Thanks for your blog, this is something I have been wanting to experiment with for a long time.

      Cheers,

      Pierre

      Author's profile photo Irfan Gokak
      Irfan Gokak
      Blog Post Author

      Hi Pierre,

      You're Welcome. I'll be posting more similar posts.

      Regards,

      Irfan G.

       

      Author's profile photo Former Member
      Former Member

      Excellent, Easy to understand.... Thanks

      Author's profile photo Irfan Gokak
      Irfan Gokak
      Blog Post Author

      You’re welcome.

      Regards,

      Irfan G.

       

      Author's profile photo Keshav H
      Keshav H

      Hi Irfan,

      Excellent blog !

      Thanks

      Keshav

      Author's profile photo Irfan Gokak
      Irfan Gokak
      Blog Post Author

       

      You’re welcome.

      Regards,

      Irfan G.

      Author's profile photo Paul Hardy
      Paul Hardy

      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

       

       

      Author's profile photo Irfan Gokak
      Irfan Gokak
      Blog Post Author

      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.

      Author's profile photo Paul Hardy
      Paul Hardy

      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

      Author's profile photo Irfan Gokak
      Irfan Gokak
      Blog Post Author

      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...

      Author's profile photo Sumanth Thunga
      Sumanth Thunga

      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

      Author's profile photo Irfan Gokak
      Irfan Gokak
      Blog Post Author

      Hi Sumanth,

       

      Thank You.

      Currently I'm working on it. Once I'm done i'll update you on the same.

       

      BR,

      Irfan

      Author's profile photo Sumanth Thunga
      Sumanth Thunga

      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