With the upgrade there is an easy way to improve memory usage of various XSA components to make development more stable and get ride of WebIDE crashes like the ones described in my question „WebIDE for SAP HANA 2.0 (SPS02) crashes frequently on Git Push“ posted at the SAP Community. As you can see the solution goes back on a recommendation of Lucia Subatin, which is working in SAP Developer Relations Team and is very active on HANA Express and HANA XSA topics.

Memory Usage before Optimization

Memory is a rare asset in the context of SAP HANA as you need plenty of it. Especially when you want to have HANA on your laptop and all the goodness from HANA XSA. So SAP tried to optimize memory consumption where ever possible to lower the entry barrier to run HANA Express Edition. They did a good job, at some point too good! As result at least with default settings in SPS 02 you had regular crashes in WebIDE and productive development was almost impossible.

Let’s have a look on memory consumption before the optimization with the Application Monitor of the XS Advanced Administration (following screenshot was taken, after using WebIDE and deploying and starting some Node and HTML5 XSA applications):

You can see that especially di-core was sized too poor with 256MB as it actually already uses almost the double (504MB).

Memory Usage after Upgrade & Optimization

After the upgrade with optimizations (let’s call it Upgrade „Plus“) the situation looks better and WebIDE crashes were gone (probably also because the updated version of WebIDE got many bugfixes). I was still somehow thrifty but from my experience 768MB for di-core, 144MB for devx-ui5 and 512MB for di-runner are doing well.

Upgrade „Plus“ of HANA Express (here from SPS02 to SPS03 rev30)

The upgrade is a time consuming tasks. On my environment (IntelNUC with i7 core, 32 GB RAM, fast SSD) it’s not a matter of minutes but of two hours. The normal upgrade process is shortly described in the tutorial „Updating SAP HANA, express edition (Virtual Machine)“ (Link). I follow these procedure with few addons the change the memory setting for the components. So let’s go step by step.

First you need to download the installation files for the binary installation  (despite you have the HANA Express running as VM!) with the HANA Express Download Manager. Transfer both archive files hxe.tgz and hxexsa.tgz on the VM’s file system (I use as target  /usr/sap/HXE/home/Downloads):

Login as hxeadm user (e.g. with Putty) and extract both files. We got a new folder HANA_EXPRESS_20, which contains the software components, and a setup script for initially setting up HANA Express, which we will not use here as we assume you have HANA Express already installed:

The Plus – modify memory settings for some services of the WebIDE component

Now we come to the „Plus“ by changing some memory settings for the WebIDE component services. Therefore we open the MTA deployment  extension descriptor (mtaext file extension) of the WebIDE component. For SPS03 (revision 30)  this file is located in folder XSAC_SAP_WEB_IDE_20 and is called sap-xsac-devx-4.3.23-hxe.mtaext. The version number will be different for newer revision:

With the extension descriptor you can define runtime properties/values for the services at deployment time. Such values are for example proxy information, user provided service credentials, URL’s and also memory settings. So lets open this file with the vi editor by typing:

vi HANA_EXPRESS_20/DATA_UNITS/XSAC_SAP_WEB_IDE_20/sap-xsac-devx-4.3.23-hxe.mtaext

press I to go into edit modus and change the memory settings for services di-core to 768M, for service di-runner to 512MB and for service devx-ui5 to 144MB. I also change setting DI_BUILDER_MEMORY for resource di-builder-configuration to 312MB:

To save the changes press ESC to leave the edit modus and then :wq to write the changes and quit vi editor. Now we good to run the upgrade with the changed memory settings.

Run HANA Express Edition upgrade

Let's move in the HANA_EXPRESS_20 folder. Before we start the upgrade we  first run a garbage collection to free up memory. Run as sudo the script hxe_gc.sh:

sudo ./hxe_gc.sh

To start the upgrade run the script hxe_upgrade.sh:

sudo ./hxe_upgrade.sh

Enter all the necessary information and the passwords for hxeadm, SYSTEM and XSA_ADMIN. Be very carefully when entering the passwords, if you making this wrong, you could mess up you complete HANA installation.

Now cross fingers and after around 2 hours later you should finally see the success message "HDB is successfully upgraded."

Congratulations!! You have now a SAP HANA Express system with improved memory settings for productive XSA development.

Besides many bugfixes you presented also with new features. For example with SPS03 there is now the new SAP HANA XS Advanced Cockpit available which is basically the same as the Cockpit which is used in SAP Cloud for SAP Cloud Foundry:

With this new optimised environment you are now ready to develop full-stack HANA XSA applications. Have fun.

As JavaScript Developer I’m interested in fullstack development so we dealing here with the XSA version (server + applications) of HANA Express Edition with the so called Extended Application Services Advanced Model (or shortly XSA). This comes with SAP Web IDE for SAP HANA, with HANA Cockpit, with SAPUI5 Frontend Server and with the Fiori Launchpad.

What do you need to start!

• Good hardware with enough RAM! I use a IntelNUC with 32 GB RAM and a fast SSD (with min. 80 GB free disk space).
• A Hyperviser like VMware Workstation or the „free“ VMware Player.
• Go to HANA Express Landing Page and register for a free download.

After the registration you can use the Java based Download Manager to retrieve the necessary files to setup your HANA XSA system.
The steps to download the files are straightforward so I skip any details. Basically you only need the file „hxexsa.ova“ (with around 12 GB size).  More details can be found in the Tutorial „Installing SAP HANA 2.0, express edition (Virtual Machine Method)“ or in this video.

Step 1: Setup and configure VMware Image

So start VMware Workstation or Player, select File -> Open in then menu:

and import the ova file hxexsa.ova:

Press Import

And 5 minutes later (on the IntetlNUC) the import is finished successfully. You „lost“ now 30 GB disc space and have a new VMware image available:

But stop! Before you start the image the first time you should adjust the virtual machine settings.

The initial settings of the VM are a bit to optimistic from my point of view. Especially the default setting for Memory with 12 GB did not work out for me. This was in an earlier revision, but as I see many issues in the context of memory and installation on SAP Community, I do not want to give this another try.

So my best practices her are:

• Memory 24 GB (instead of 12 GB)!
• Processors 4 (instead of 2)
• Network Adapter: NAT (instead of Bridged, so you can use your HANA in different networks)

This is now a reasonable setup to work and develop with HANA Express Edition:

Step 2: Startup VMware Image and run HXE setup

So let’s start up the VMware Image, which is based on SuSE Linux Enterprise Server (SLES) 12 SP2. Since revision 23 the HXE team provided two convenient functions while the setup phase of HXE. You can change the keyboard layout and the time zone. Especially the first setting is very important in the context of the necessary password change at the beginning of HXE setup.

You now need to login with the SID Admin: hxeadm. The initial password is HXEHana1. The first step is now changing the password of this hxeadm user:

• You have to reenter the current password. So type again HXEHana1
• then carefully enter the new password (2 times).

Additionally you have to change the password of HANA database master password. For running finally the setup script of HXE you have to provide some more informations:

• information about a corporate proxy
• if you want to wait for XSA configuration to finish: Select here Y to wait

Confirm entered configuration and start the HXE setup by typing again Y.  After less then 15 minutes the HANA setup is finished and HANA HXE is ready:

HANA Express Edition is now ready . So first let’s see what is in the box (here SAP HANA 2.0 SPS02 Revision 23) and type xs mtas, which list all installed multi-target applications with their versions:

So we have the XSA Administration (com.sap.xsa.admin), the Portal Service, SAPUI5 Frontend server with SAPUI5 v1.44.26, the SAP WebIDE for SAP HANA, the auditlog, the job scheduler, HANA Runtime tools (com.sap.xsa.hrtt) and the HANA Cockpit.

You are ready, start your HANA XSA discovery journey!

The event took place 30th June 2017 in St. Leon-Rot at SAP itself (UI5con@SAP) and this time it felt like a real big conference (with more than 50 sessions and 400 participants), reflecting the importance and also maturity of the UI5 topic itself. Location at SAP and running the event on a working day allows the presence of all of the core UI5 people. Which was a great opportunity for everybody to meet personally with the people, you mainly know only from GitHub commits. Fantastic! It makes a big difference to meet in real life and face to face. The majority of the presentation was also held by SAP UI5 team, which did open up many insides, what we can expect in the bright SAPUI5/OpenUI5 future. But still there was plenty of space for sessions from non-SAP community members.

Right in the OPENING session we were presented with the new OpenUI5 Logo, a modernised Phoenix, which made me, proudly dressed with the „old“ Phoenix t-shirt, instantly looking outdated as almost all the SAP UI5 folks did run around with the new shirts and new logo. Btw a updated ui5 shirt would have been also a perfect speaker gift. 🙂

After the OPENING and traditional „NEWS AROUND UI5 THAT YOU ABSOLUTELY HAVE TO KNOW“ (Recording) sessions, the most important session „UI5 EVOLUTION“ (Recording) from UI5 Lead Architect Peter Müssig, took place.

Evolution instead of Revolution, the right way?

Peter Müssig (despite his colleges also dressed in an outdated UI5 shirt!) did explain, how decision-based on an internal innovation project named „Cheetah“ (happened Q3/2016) and to which extend UI5 will be going to a next state of development. One buzzword was „modularize“.

The size of UI5 is one mayor issue, perhaps the ultimate issue at all for UI5. This point seems so obvious if you watch Chrome dev tools or simply start to explore the current version 1.48.5 of the OpenUI5 runtime with a size of 191 MB (yes, it is Megabytes) and more than 11.000 files (ok, half of them are debug files). Normal caching mechanisms of the web are not enough for UI5, it has it’s own AppCacheBuster in the core, another evident that UI5 is somehow „handicapped“. On the other hand, it is not only „hot air“ which makes up the size of UI5, it is a brillant set of hundreds of great ui controls and a core library, which has all and more within to build enterprise grade applications. But the UI5 core, which is mandatory for each application, is grown too big, which results especially on mobile devices to bad performance as all the code is loaded and interpreted needed or not! Splitting the core up in modular parts and combining it with a new build process generating tailer-made UI5 runtime (self-contained applications) for each application should bring ease. This process reminds me heavily of the jQuery Download Builder. I completely agree with this approach.

Peter Müssig already showed first code snippets (in VS Code 🙂  ) and a demo in which the loaded code was reduced by more than 60 percent. Very promising:

It’s Time for Revolution

But, but …….. another main requirement of UI5 Evolution was compatibility. I understand this requirement from a medium-term SAP point of view. I guess this prevents the overdue and so necessary UI5 Revolution. After almost 9 years, almost 25 stable minor release and hundreds of patch releases, we need now a condign successor version of SAPUI5/OpenUI5, which is a real V2 and not a v1.80.15! A version which fully can leverage current trends (Typescript, ES6,…) and is freed from burden of the past. The UI5 team has the potential, the people and spirit to do something great again. If they only allowed to! Cut of old tails! Free UI5 from Fiori Launchpad slavery, where all of the thousands of UI5 apps need to run with the same UI5 version, preventing real quantum jump at least for single progressive apps. Perhaps we need both: UI5 Evolution for the old soup but also UI5 Revolution for the future. Otherwise „lost“ ground (iOS, Android) will never be conquered.

SAPUI5 on SAP HANA XSA

I had the honour to speak directly after Peter Müssig about „UI5 on SAP HANA XSA – SAP Full-stack JavaScript Development“ also in the huge audimax (Room A). This session is not so important for UI5 itself, but perhaps will influence the future of some UI5 developers.

My session introduced the new Runtime- and Development-Platform „SAP HANA XSA“, which allows JavaScript Development both for frontend and backend. In my opinion HANA XSA provides a great new opportunity for us UI5 developer to extend our JavaScript knowledge also to backend development. XSA („The Beast“) is founded by SAP on proven, outside SAP widely used components/concepts like: Git, npm, node.js. SAP provides his functionality also as npm packages, currently not via the public npm registry. This finally bundled with the in-memory database HANA and all his opportunities. All in all a great couple with a great future.

Slides of this session can be found on Slideshare:

Many Topics, many Sessions

Besides these sessions there was much more valuable to see and to explore. Slides, Recording and Links are available on the OpenUI5 website. Enough stuff for the next months.

Many thanks to all the participants for this perfect UI5con. Keep going!

UI5con – the first ever conference focusing on SAPUI5/OpenUI5 took place on 11th March 2016 in Frankfurt. UI5con is driven by the community and not solely by SAP folks.

I was pleased that my proposal for a session was accepted and hence got one of the eligible 80 seats. The demand was so high, that the UI5con was sold out within less than an hour and more than 150 people put themselves on the waiting list.

There were several top-class sessions, have a look at the agenda of the UI5con. All in all a fantastic community event and it was great to meet people personally, which you so far only did known virtually or perhaps as author of important UI5 git commits.

Title of my talk was „Full-Stack JavaScript mit OpenUI5“. Below you find the slides of this talk.

NEMO – Full-Stack JavaScript with OpenUI5

Inspired by the well-kown MEAN stack (MongoDB – Express – Angular  – Node.js) this session introduced the NEMO stack using OpenUI5 instead of Angular to prototype a full-stack JavaScript application.

To view the slides lease click into the below iFrame and press Space to scroll through it. Important remark: this will not work for Smartphones and Tablets as impress.js the library I used to make this presentation is not supporting this kind of devices:

The most interesting part of the session are not the slides, but the live coding I did to develop this most basic application from ground including database access with Mongoose, backend with express.js/Node.js and frontend with OpenUI5. With the help of tools like WebStorm, npm, gulp and bower:

Most of the session have been recorded, you can watch all the great session via the dedicated YouTube Playlist:

• UI5con 2016 Frankfurt Session Recordings on YouTube

A nice recap of the UI5con was done by Kimmo Jokinen.

So the idea behind is to have a UI5 MVC template with which you can quickly try or test something with UI5 MVC concept. Everything (Bootstrap, View, Model and Controller) in one single page/file, but still a full-grown ui5 mvc app.

To add something useful to the existing code, let’s provide the UI5 One Pager as File Template for JetBrains WebStorm (my favorite Web IDE) and also use the new UI5 module concept (AMD – Asyncronous Module Definition), which is propagated since v1.28/v1.30 of OpenUI5/SAPUI5.

So here is the template for WebStorm:

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta charset="UTF-8">

    <title>UI5 One Pager</title>

    <script id="sap-ui-bootstrap"
            src="https://openui5.hana.ondemand.com/1.28.15/resources/sap-ui-core.js"
            data-sap-ui-libs="sap.m"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-preload="async"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-frameOptions='allow'>    // NON-SECURE setting for test environment
    </script>

    <script id="${NAME}" type="ui5/xmlview">
        <mvc:View
            controllerName="${UI5_Namespace}.controller.${NAME}"
            displayBlock="true"
            xmlns="sap.m"
            xmlns:l="sap.ui.layout"
            xmlns:core="sap.ui.core"
            xmlns:mvc="sap.ui.core.mvc">
            <Page title="${NAME}">
                <content>
                    <Button press="pressBtn" text="Press me"/>
                </content>
            </Page>
        </mvc:View>
    </script>
    <script>
        sap.ui.getCore().attachInit(function () {
            "use strict";

            sap.ui.define([
                "sap/ui/core/mvc/Controller"
            ], function (Controller) {
                return Controller.extend("${UI5_Namespace}.controller.${NAME}", {
                    pressBtn: function (oEvent) {
                        sap.m.MessageToast.show("Hello UI5 DevLife!");
                    }
                });
            });

            sap.ui.require([
                "jquery.sap.global"
            ], function (jQuery) {
                sap.ui.xmlview({
                    viewContent: jQuery("#${NAME}").html()
                }).placeAt('root');
            });

        });
    </script>
</head>
<body class="sapUiBody" id="root"/>
</html>

Using this template with WebStorm (NAME is „Test1“) and running the UI5 One Pager in Chrome should result in something like this:

For more details on how to use File Templates in WebStorm have a look at the previous post UI5 File Templates for WebStorm.

With some dedicated UI5 file templates it is quite handy to start with UI5 development. I will also introduce AMD module definition concept which has found his way in OpenUI5/SAPUI5.

AMD concept in UI5

With version 1.28 of OpenUI5 a new module concept is propagated. In the core classes of UI5 it is already used much longer. The code templates which will be introduced below will already be based in this concept.

AMD stands for Asynchronous Module Definition and is designed to allow asynchronous loading of JavaScript modules (not very surprisingly). It is also the API which is supported by RequireJS. So SAP is following a well-established and accepted standard in the web, good!

In UI5 this is realised with sap.ui.define to define new modules and with sap.ui.require to resolve module dependencies. To understand usage, let’s have a look at some file template examples:

WebStorm UI5 File Template

File templates can be created in WebStorm via Preferences->Editor->File and Code Templates (in WebStorm 10 with a open project):

Via + (Plus sign) you can create a new Template. Specifiy a name and a extension and use placeholders with ${} syntax. As placeholder we will use ${UI5_Namespace} for the UI5 component namespace and ${NAME} for file name.

Let’s start with controller file:

UI5 Controller Template

use extension: controller.js

sap.ui.define([
    "sap/ui/core/mvc/Controller"
], function (Controller) {
    "use strict";

    return Controller.extend("${UI5_Namespace}.controller.${NAME}", {
        onInit: function () {
            this.component = this.getOwnerComponent();
            this.bus = this.component.getEventBus();
        }
    });
});

So what structure do we see, when using new AMD concept:

• The first parameter of sap.ui.define is an array of strings. Each string represents a dependency. In the example we need sap.ui.core.mvc.Controller class to define our own controller by extending this class. We have to replace all dots with forward slashes. So instead of sap.ui.core.mvc.Controller you need to use „sap/ui/core/mvc/Controller“.
• Second parameter is the factory function, which get each dependency as parameter (here Controller) . This parameter can then be used within the factory function.

UI5 XML View Template

use extension: view.xml

<mvc:View
        controllerName="${UI5_Namespace}.controller.${NAME}"
        xmlns="sap.m"
        xmlns:l="sap.ui.layout"
        xmlns:core="sap.ui.core"
        xmlns:mvc="sap.ui.core.mvc">
    <Page title="${NAME}"
          navButtonPress="onNavBack"
          showNavButton="true">
        <content>
        </content>
        <footer>
            <Bar>
            </Bar>
        </footer>
    </Page>
</mvc:View>

UI5 Component Template

use extension: js

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/model/resource/ResourceModel"
], function (UIComponent, ResourceModel) {
    "use strict";

    return UIComponent.extend("${UI5_Namespace}.Component", {

        metadata: {
            "rootView": "${UI5_Namespace}.view.App",
            "dependencies": {
                "minUI5Version": "1.28.0",
                "libs": ["sap.ui.core", "sap.m", "sap.ui.layout"]
            },

            "config": {
                "i18nBundle": "${UI5_Namespace}.i18n.i18n",
                "serviceUrl": "here/goes/your/serviceUrl/"
            },

            "routing": {
                "config": {
                    "routerClass": "sap.m.routing.Router",
                    "viewType": "XML",
                    "viewPath": "${UI5_Namespace}.view",
                    "controlId": "idAppControl",
                    "controlAggregation": "detailPages",
                    "bypassed": {
                        "target": ["master", "notFound"]
                    }
                },
                "routes": [
                    {
                        "pattern": "",
                        "name": "master",
                        "target": ["detail", "master"]
                    },
                    {
                        "pattern": "detail/{detailId}",
                        "name": "detail",
                        "target": ["master", "detail"]
                    }
                ],
                "targets": {
                    "master": {
                        "viewName": "Master",
                        "viewLevel": 1,
                        "viewId": "master",
                        "controlAggregation": "masterPages"
                    },
                    "detail": {
                        "viewName": "Detail",
                        "viewId": "detail",
                        "viewLevel": 2
                    },
                    "notFound": {
                        "viewName": "NotFound",
                        "viewId": "notFound",
                        "viewLevel": 3
                    }
                }
            }
        },

        init: function () {

            var mConfig = this.getMetadata().getConfig();

            // set the internationalization model
            this.setModel(new ResourceModel({
                bundleName: mConfig.i18nBundle
            }), "i18n");

            // call the base component's init function and create the App view
            UIComponent.prototype.init.apply(this, arguments);

            // create the views based on the url/hash
            this.getRouter().initialize();
        },

        destroy: function () {
            // call the base component's destroy function
            UIComponent.prototype.destroy.apply(this, arguments);
        }

    });

});

The is a component file template for a master-detail application.

In the Component the App View is referenced as rootView. For master-detail application the SplitApp is used, let’s create another File Template „UI5 SplitApp“ (extension: view.xml) for this:

<mvc:View
 controllerName="${UI5_Namespace}.controller.${NAME}"
 xmlns="sap.m"
 xmlns:mvc="sap.ui.core.mvc">
 <SplitApp id="idAppControl" displayBlock="true" />
</mvc:View>

And finally we create a index.html file for local testing:

UI5 index.html Template

use extension: html

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta charset="UTF-8">

    <title>UI5 App</title>

    <script id="sap-ui-bootstrap"
            src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-libs="sap.m"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-preload="async"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-resourceroots='{"${UI5_Namespace}": "./"}'
            data-sap-ui-frameOptions='allow'>    // NON-SECURE setting for testing environment
    </script>

    <script>
        sap.ui.getCore().attachInit(function () {
            sap.ui.require([
                "sap/ui/core/ComponentContainer",
                "${UI5_Namespace}/Component"
            ], function (ComponentContainer, Component) {
                new sap.ui.core.ComponentContainer({
                    name: "${UI5_Namespace}"
                }).placeAt('root');
            });
        });
    </script>
</head>
<body class="sapUiBody" id="root">
</body>
</html>

This is an example how to use sap.ui.require and load necessary dependencies. The structure is somehow identically to the sap.ui.require usage. In the first parameter (array of strings) the necessary dependencies are listed, which are passed as parameters to the callback function.

And Action – Create App with Templates

Now we want to use the new file templates within WebStorm (of course you can use these templates also without WebStorm)

Create an empty project and two folders (the given templates assume this kind of directory structure):

• controller – for controller files
• view – for view files

We want to create a master view and a detail view.

Therefore select the view folder and right-click and select New and select the UI5 XML View template:

Enter as File name „Master“ and as UI5 namespace „ui5v128“ (you can also use your own namespace):

For the controller select controller folder and and right-click and select New and select the UI5 Controller template. Enter again as File name „Master“ and as UI5 namespace „ui5v128“:

repeat this for the Detail view/controller (File Name „Detail“,UI5 namespace „ui5v128“).

Additionally we will need the SplitApp View. Please name it „App“ and select the „UI5 SplitApp“ Template (again UI5 namespace „ui5v128“).

If you follow this convention the given UI5 Component template will fit, this is is our last step.

Create a UI5 Component (file name: Component) and index.html file (file name index) in the project root folder, both with the same UI5 namespace „ui5v128“. The result should look like this:

Within WebStorm you can directly run the App via the index.html file. Right-click the index.html and select Run ‚index.html‘:

The working app is more or less empty, but uses the new module structure. So you prepared for the future (v1.30) and now it is up to you to fill it with more content.

Have fun with UI5 and AMD concept.

The Component-preload.js file can easily be generated with the help of Gulp and the very handy gulpui5-preload package from Christian Theilemann (Thx geekflyer!).

Component-preload.js for UI5 Boilerplate Fiori

The gulp-ui5-preload package is integrated in the current version of the Fiori Edition of UI5 Boilerplate. If you have gulp and the gulp-ui5-preload package installed  (see prerequisites section at the bottom for details) you simply need the run the following command in the terminal to generate the Component-preload.js file:

gulp ui5preload

the gulp task is executed:

and there it is and you can see the component and all views, controllers utilities are now part of this single file Component-preload.js:

Be aware that you always have to rebuild the Component-preload if you made changes to one of the included files! So it makes sense to build it, if you deploy on QA or PRODUCTION and remove it when you developing locally.

Performance can improve by factors, but it depends

The performance impact of this change depends on the tradeoff between loading one huge file at startup and loading multiple small files on demand. What is the better approach depends on:

• How is the Fiori App developed? At what point in time at runtime are further parts (views/resources) needed in the app?
• What is the environment the app is running in (device, latency, bandwidth)?

The following screenshot compares the initial loading of UI5 Boilerplate Fiori App with or without the Component-preload.js. On left we see that Component.js is loaded and also the individual view/controller files (5 http requests more). On the right we see the request behaviour with the preloading.

A further advantage is that also further views which are request by the user in the app already loaded and no further requests are necessary.

Prerequisition and Setup

• We assume you have node.js and npm already installed (otherwise do it)
• Install gulp globally. Therefore run the following (on Mac OSX probably with sudo)

npm install gulp -g

Now go in the root folder of the UI5 Boilerplate Fiori Edition and type the following to locally install the necessary node packages:

npm install

You should see that all the necessary packages are successfully installed:

Half of the session deal with good „old“ SAP ABAP technology based stuff, the other half with New-SAP topics like OpenUI5, SAPUI5, SAP Fiori and HANA Cloud Platform. A good mixture (have a look at the full agenda of sitFRA 2015) .

As I’m pregnant since a long time to modify the UI5 Boilerplate (UI5BP) so that it is SAP Fiori compliant and can be integrated into the famous SAP Fiori Launchpad, I took the chance to talk about this topic and modify the original UI5 Boilerplate in a live coding session and create a Fiori Edition. UI5 Boilerplate Fiori Edition was born.

UI5 Boilerplate – Fiori Edition

The original UI5BP targets a Single Page Application (SPA) scenario or the usage of UI5BP as web app in hybrid app scenario in combination with a native container like Apache Cordova, Adobe Phonegap or SAP Kapsel. The UI5BP aims to be as simple as possible, so no component, no shell, no routing. It is especially designed for UI5 newbies to have a running template with navigation, which is working on smartphone and tablets and is fast up and running (not more).

To be a Fiori or not to be

If the UI5BP wants to be „Fiori“ (sound a bit like a small cute bird) and part of the SAP Fiori Launchpad (FLP) it is dynamically loaded by the FLP. For such a scenario a few requirements have to be fulfilled so that no conflicts with other „Fiori’s“ are raised.

First of all to enable the dynamic loading the app needs to be a self-containing UI5 Component (sap.ui.core.UIComponent). So html files like index.html are only relevant while testing the Fiori App standalone. At runtime within FLP these files do not count, FLP will request the Component.js file as start.

As our Fiori App does not know what other Fiori Apps are in the game, any global stuff is strictly forbidden. Each App should work within his own area, which is defined by the Component and not do stuff, which could interfere with other Apps. To communicate with other Apps the FLP provide extra services, e.g. Cross-Navigation. So the main requirements for a Fiori are:

• App needs to be a self-containing UI5 Component
• Use EventBus of the Component, not the global EventBus
• Do not use sap.ui.getCore() to register Models
• Do not define gloabel Id’s, Id’s should be generate by UI5
• Use only UI5 to manipulate the location hash
• …. and more

For more details please have a look on the slides on Slideshare or directly at the source code of UI5BP Fiori Edtion on GitHub.

Sadly currently many of the so called Fiori App Templates within the SAP Web IDE (v1.9.3) in HANA Cloud Platform are still not fully Fiori compliant, they still use the global EventBus. Hopefully this will soon corrected by SAP.

Integration of UI5BP Fiori in SAP Fiori Launchpad

As a result of this modifications the UI5 Boilerplate can now be integrated in the SAP Fiori Launchpad:

You find step-by-step instructions in a dedicated article „Deploy UI5 Boilerplate on Fiori Launchpad of HANA Cloud Platform“ on SAP Community Network.

Have fun and Bembel with Care!

As before the navigation items, here Tiles, are generated automatically from the menu definition file (menu.json). So there is nothing special necessary to switch and use the Launchpad, simply update to current version on UI5BP.

The Launchpad Navigation is now the default navigation mode of the UI5 Boilerplate, although the LeftMenu Navigation (via Master Page) is still available and can be activated via configuration or by a URL Parameter at any time.

Launchpad Navigation

So how does it look like? Here some screenshots of the Launchpad on a smartphone. On the detail pages there is now a Home Icon in the upper right corner which allows navigation back to the Launchpad:

To add further pages and therefore Tiles to the Launchpad within the UI5 Boilderplate nothing has changed. You simply maintain a new entry in the menu.json file and add the corresponding ui5 view and controller file. That is all! More details can be found in the dedicated post „Add Page to UI5 Boilerplate“

Configuration of Navigation Mode

The configuration of the navigation mode is done via the file app/config.js:

Besides this, it is possible with the URL Parameter mode=LeftMenuNavi to overrule the configuration and start the App in LeftMenu Navigation mode:

http://....../index.html?mode=LeftMenuNavi

Screenshots on smartphone with Left Menu Navigation. Instead of the Home Icon there is the Back Navigation Icon enabled:

Additional Information

• UI5 Boilerplate Source on Github
• UI5 Boilerplate Wiki Page

The next major release of OpenUI5 is out (see official post on OpenUI5 Blog). Let’s see which new features were added in the past 3 months and how useful they are. To do so, I added a dedicated page „New Features v1.22“ with some of the new controls to the UI5 Boilerplate and update the „UI5 Boilerplate Demo Website“, so you can see them „live“ and „in action“.  As always we focus on mobile usage.

New Date Input Controls „DatePicker“ and „Calendar“

So far only the DateTime Control was available. A Calender Control was only part of sap.me library, which was not open sourced and only available within in SAPUI5. With OpenUI5 version 1.22 the new Calendar control (sap.m.Calendar) is filling this gap. Another new input control DatePicker (sap.m.DatePicker) is making use of the calendar to select a date. You can compare this three controls and the different way to select a date on the demo page, each with his advantages:

These two new controls do work pretty well on my iPad, good job UI5 team!

New ComboBox, MultiComboBox and MultiInput

The new ComboBox seems to be an alternative to existing Select control or Input control with suggestion functionality. MultiComboBox and MultiInput both work with Tokens. They look pretty nice:

Unfortunately I’m not able to remove Tokens on my device (here iPad), only the keyboard is shown up, but nothing is removed. On desktop you can remove Tokens with a mouse click. On the MultiComboBox you can workaround with the valuehelp, but MultiInput seems not be usable on a device at all with this behaviour. I’m wondering if I do something wrong here as the control is part of sap.m library which is dedicated to mobile devices. Hmmm??? Further investigation seems necessary.

Compact Mode.. and more

There are pretty much more parts in this major release, but last topic I want to have look at is the new Compact Mode display mode. Use the also new ToogleButton to switch on the Compact Mode, which enables displaying more content on the same area, but also brings up some display issue, as I do not switch the menu page to compact mode:

All in all a good job done by UI5 Team and I’m looking forward to v1.24!

Links and further Information

• UI5 Boilerplate on GitHub (Source)
• UI5 Boilerplate Demo Site
• UI5 Boilerplate Wiki Page
• Official Release Post on OpenUI5 Blog