Running a native UI5 desktop application

Photo of Stijn Mertens

Written by Stijn Mertens in Technology

 

Having a dedicated desktop application can improve the user experience. To achieve this, we want to use the Electron framework. This framework is used by some popular dektop applications: Teams, Visual Studio Code, Discord, WhatsApp, ... It allows a developer to wrap a HTML application into a native application for different platforms. In the example below, we'll use Cordova to simplify the wrapping of our UI5 application. The Cordova framework allows us to not only create a native desktop application, but also mobile Android and IOS applications.

The objective for the example below is to make a native desktop UI5 application as simple as possible.

Prequisites

Install:

  1. Nodejs/NPM
  2. Cordova: npm install -g cordova
  3. UI5 tooling: npm install -g @ui5/cli
  4. Yeoman: npm install -g yo
  5. Easy-ui5 generator: npm install -g generator-easy-ui5

Configure development project

Cordova

Create a cordova project:

Running a native UI5 desktop application1

This creates the demo-cordova directory:

Running a native UI5 desktop application2

Add Electron as a platform:

Running a native UI5 desktop application3

Output:

Running a native UI5 desktop application4

Time for our first test!

Running a native UI5 desktop application5

This will start the electon builder and finally launch the application:

Running a native UI5 desktop application6

The default Cordova Hello World application is now shown. Where does it come from? Take a look in the www folder! You'll recognize what is shown on screen when inspecting the code from index.html. Next step is replacing this code with our own UI5 application!

UI5

Back in the root folder of our cordova application, we'll want to create a folder for our UI5 application:

Running a native UI5 desktop application7

Follow the yeoman generator to select the wanted development template:

Running a native UI5 desktop application8
Running a native UI5 desktop application9
Running a native UI5 desktop application10

The generator will now create a project template and install already the dependent node modules. Start the UI5 app as described in package.json:

Running a native UI5 desktop application11

This will launch the app in your browser:

Running a native UI5 desktop application12

Glue everything together

We have now:

  • a cordova project in the root folder
  • a UI5 project in the app sub folder

Time to overwrite the default cordova app with our UI5 project. First we`ll build a distributable version of our UI5 application:

Running a native UI5 desktop application13

Check the package.json file for the correct build script (this command can vary depending on the generator version) and run it:

Running a native UI5 desktop application14

This generates a dist folder inside the app folder structure:

Running a native UI5 desktop application15

Return to the project root:

Running a native UI5 desktop application16

Delete the contents from the www folder:

Running a native UI5 desktop application17

Copy the content of the dist folder to www:

Running a native UI5 desktop application 18

Run

Running a native UI5 desktop application19

Our UI5 app is now running as a local native application!

Running a native UI5 desktop application20

About the author

Photo of Stijn Mertens
Stijn Mertens

Community Lead SAP Development at Expertum Belgium.

Read more articles by Stijn Mertens