Introduction

Ok, many of you will say, why another blog post regarding hybrid app creation with OpenUI5, cause there exist already some describing that topic. I created this blog post because with the release of Eclipse Mars (4.5) also the first major version of Eclipse THyM (The Hybrid Mobile project) was released. These tool integrates the process of an hybrid app creation with Cordova very comfortable into the Eclipse environment (no console commands like cordova create, cordova platform add, cordova plugin add, cordova build, cordova run ... anymore). In the next steps I describe briefly how a simple hybrid app using OpenUI5 is created for Android with that tool. To not forget to mention the SAP Web IDE Hybrid Application Toolkit. I am a big fan of SAP Web IDE and SAP Web IDE Hybrid Application Toolkit and I am using it as often as possible for my tests and projects. But there are projects/situations in which these tools are not available. So from my point of view it is good to have another option to create a hybrid app in a very comfortable way.

Pre-Conditions

Following tools are necessary and therefore have to be downloaded to the local machine:

• Eclipse Mars or higher versions in the future (Eclipse Downloads)
• Eclipse Thym Plugin (install it via repository site http://download.eclipse.org/thym/releases/latest/ in your Eclipse instance)
• Android SDK (Download Android Studio and SDK Tools | Android Developers)
• OpenUI5 mobile runtime (OpenUI5 - Download); I use the most current stable of version at time of post creation which was 1.28

After you have downloaded and installed the Android SDK you have to download via the Android SDK Manager the latest Android Tools and an Android API (for that blog post I used version 4.4.2 = API version 19). With the Android Virtual Device Manager a device has to be configured which is later used for the emulation of the application. When these steps are done, just one further configuration has to be done in the Eclipse preferences under point Hybrid Mobile -> Android. There the path to the Android SDK has to be entered.

App creation

Create a Hybrid Application Mobile Project in Eclipse

By choosing a new "Hybrid Mobile (Cordova) Application Project" a new THyM project can be created.

On the first wizard screen some standard things like project name have to be defined.

In the next step it has to choosen for which platform(s) the app is created.

Afterwards necessary plugins can be added. It is possible to add plugins from the Cordova plugin registry, from a Git repository or from a local file.

Because for that test I do not use a plugin I skip that step without adding a plugin.

After the wizard is finished the following project structure is available.

App configuration options

Via the config.xml file in the project, the attributes defined in the creation wizard and addtional things can be configured (e.g. plugins can be added, icons/splash screen can be defined, ...). Some things can already be defined via forms. Options not covered in the forms can be added directly in the XML.

Add OpenUI5 mobile runtime to project

In the next step I added the OpenUI5 mobile runtime sources to the project. This is quite simple. Under the resources folder (/www/res) in the project I created a folder openui5. Within the folder I stored the OpenUI5 sources which I extraced from the downloaded OpenUI5 mobile runtime zip file. As you can see in the screenshot I removed the debug sources (*-dbg.js), because I do not need them for that simple test. In a real project these files would be removed when the final build is created by e.g. a gruntjs script.

Add app specific UI5 coding to the project

Now the app specific UI5 coding is added to the project. At that point the coding of the "business part" of the app would start, but because I am "lazy", I created/generated my UI5 coding with SAP Web IDE and downloaded it so that I can use it in my hybrid mobile project. For that test, I just created a simple master/detail Fiori app which displays products out of the well-known Northwind OData service. A good post which describes how you can create such an app in SAP Web IDE is How to use Northwind OData service with SAP Web IDE.

In my project I created a folder "ui5app" in which I stored the sources of my SAP Web IDE Northwind project. So my project looks like following:

The only thing which has to be adjusted in the sources is the service URL for the Northwind service in the Component.js file. In the SAP Web IDE a destination is used to consume the Northwind service. In the hybrid app I replaced that with the absolute URL of the service.

Adjust Cordova generated files to call UI5 sources

The last step to have a working app is to adjust the index.html and the index.js file to load the UI5 library and to call the app specific UI5 sources.

In the index.html file the UI5 bootstrapping was added which loads the UI5 core and sap.m library from the resources folder in which the OpenUI5 source were stored before. Also the theme is set and the resource root for my "northwind_demo" component is set. The "northwind_demo" component is the component defined in the Component.js file stored in the "ui5app" folder in which the sources are stored I created with SAP Web IDE.

Further adaptions are that the stylesheet class "sapUiBody" is added to the body tag. Also a div area with id "content" is defined which is the container for my UI5 app component.

In the index.js file (stored in /www/js folder) I added following coding to the receivedEvent method. That method is called when the Cordova app is ready (deviceready event is raised). The coding creates a UI5 shell and loads the "northwind_demo" component into it using a component container. With that, all adaptions are done.

Run the app on Android Emulator (or Android Device)

After all the previous steps are done, the app is ready to be executed on the created Android Virtual Device. Just use Run As -> Run on Android Emulator for the index.html file and the build of the app and the deployment to the emulator is started. If the emulator is not running, it is started too. If you have configured an Android device you can say also Run As -> Run on Android Device to execute the app on the device. The result for the simple app created in the steps before looks like following on the emulator for a phone.

Master View (list of products):

Detail View (details of a single product):

Conclusion

Of course this is not an incredible app and it does also not use any device specific features via plugins (e.g. camera, contact list, geo ...), but it shows, how fast a hybrid app can be created with THyM. For the future I hope that the THyM project gets more and more features available with the Cordova console commands. For me THyM is definitely an option to be considered in case I can not use the SAP Web IDE Hybrid Application Toolkit. And for all those people who like to "hack" with the Cordova console commands: Of course it is still possible to use them for the created project. Especially for testing with the browser platform (to avoid the long build times for Android) it is possible to open a console at the root folder of the project, type 1) cordova platform add browser, 2) cordova build browser and 3) cordova run browser and you can test the app in the browser (supported Cordova plugins have to be considered).

This BLOG will Guide us what we need to keep in mind to build apps with SAPUI5.

Best practice 1: Determine View creation Approach early

• In SAPUI5 view can be made using
  • HTML
  • XML
  • JSON
  • JavaScript
• Choice is on skillet of development team.
• XML is more simple and HTML can be embedded into an XML view

Features comparison among different view

Best practice 2: Ensure Application Independence

• The application should be accessible via an icon / a bookmark
• Index.html should be the delivery mechanism for the appà
• Build the app so that you can take its functionality and embed it to into any other structure such as the Fiori launch pad, the HTML – based user facing component.

Best practice 3: Use of Component to Encapsulate the App

• An app developed that is independent can typically be build by separate teams working on pieces of the overall functionality
• Requires building the app using the component concept
• The component approach allows you to run the app within a standalone HTML page or within larger context such as the Fiori Launch pad.

Makeup of the componenet.js

General information

• Include metadata such as app name , version , library dependencies
• Specially the rootView to be displayed
• In the example seen on the prior page , there was no rootView element.
• createContent function is used instead of rootView
• createContent allows you more flexibility in the how the view is built

Config Information

• Can specify information like the name of the resource bundle being used for internationalization
• Can specify the URL of an OData service of the model
• Both pieces of config information could also be performed in the createcontent function mentioned above

Routing Information

• Requires for book marking and resuming application UI state.

Best Practice 4: Minimal code in index.html

• Only these bare essentials should be in the index.html
  • Meta
  • The UI5 bootstrap code which loads the UI5 runtime core
  • HTML Body containing the declaration of one or more UI-areas.
  • Minimal logic to point to the componentContainer

Best Practice 5: Make the App Addressable, UI-Focused and responsive

• Allows for “deep linking”
  • Where the user can bookmark places in an app and be able to come back and pick up where they left off.
  • Do not requires that the user has to start at the top page of a website and descend through multiple link just to get information about specific page.
• Focus on the UI by the following MVC approach in keeping data model handling, the UI logic separate.
• Build the app so that it makes the best use of available screen real-estate and navigation regardless of the device(Phone ,tablet ,desktop)
  • Make use of the sap.m library which was designed from the ground up to support this requirement.
  • Create a “Device model” that will allow you to determine things such as if the device is touch-capable.

Device model

• sap.ui.Device library allows you to determine various runtime platform characteristics
• These characteristics are stored in a client-side JSON model
• This model is defined in Component, as seen below, & then is used throughout  application
• Example of device model in List control’s mode attribute

Best Practice 6: Localization support

• Driven explicitly or via the user’s locale settings.
• Sap.m.controls support right --> left language
• Manage the static text of the app separately, in a way that they can be easily swapped from different locale.

Best Practice 7: Make the use of patterns like master details.

• A master detail is a very commonly used designed pattern.
• List shown in the master and information about the selected item shown in the details
• Supported by sap.m.SplitApp control
• SplitApp is a container control which has 2 sections in the form of aggregations master and details page.

Best Practice 8:  create custom utilities to share code

• When developing an app there is always a need to reuse javascript coding across multiple views/controllers
• Store such code in separate files in a util folder

Thanks Note

Thanks to  for providing such a good information.

Thanks to Avijit Dhar of IBM for his help while Learning SAPUI5 App Development.

A Big Thanks to Dipankar Saha and Sudipta Mukherjee from IBM who always encourage me to write such blog.

Hi All

Here's a tutorial I've written on Data Binding in SAPUI5.  This content will be integrated into the standard relase as one of the online tutorial when SAPUI5 1.30 is released later this year.

In the meantime, you can access this content as a stand-alone tutorial with an accompanying ZIP file containing the solutions.

SAPUI5 Data Binding Tutorial Document (Links to PDF document)

Solutions for Data Binding Tutorial Exercises (ZIP file)

This tutorial uses the Web IDE as the development environment and covers JSON models and Resource Bundles.

Regards

Chris W

SAPUI5 is advanced framework which used to provide or design the views , those views will flexible to run in all device breakpoints(like Desktop, Tablet and Mobile).

Android is mobile technology.

Now SAPUI5 application can convert into the Android application using Phone Gap(Cardova) plugin.

Prerequisites:

     1.Android Setup in Eclipse IDE

     2.Phone gap plug in

    3.SAPUI5 libraries

     4.SAPUI5 developed application

     5. Other required changes

1.Android Setup in Eclipse IDE:

         a) Download Android SDK from the link http://developer.android.com/sdk/index.html

        b)Once you have downloaded the SDK , execute the .exe file

   click next

         click next

                 click next

                 click next

                  click Install.

c)Download the ADT plug in from Eclipse. For this go to Help->Install New Software

       Click the ADD button and enter Name and location for the ADT download from https://dl-ssl.google.com/android/eclipse/

      Click OK and select the developer tool as mentioned in the below screen shot and click Next.

       You will see the below screen and click Next button,

        Accept the license agreements and click finish. Eclipse will automatically ask for the restart. Perform the Restart.

      Once you finish this step, Eclipse will restart. Do not open the Android SDK manager and choose the Close button to close all the pop up.

    Go to system preference and specify the path for Android as where you have downloaded the SDK.

          Once you are done with the above step, open the Java perspective.

            Java perspective (Windows -> Open Perspective ->Java) and click the highlighted Android SDK Manager.

         Select the below packages and install.

       Once  performed the above steps, after successful installation, restart the eclipse.

    Create Android Applications in Eclipse:

          Enter the application name , minimum required SDK, Target SDK, Compile With, Theme as shown in below pic and click on “Next” button

click next

      click next

       click next

        click next

        Then you will get project directory in Eclipse Package Explorer

     Create the AVD for this,

   Go to Windows->Android Virtual Device Manager->create->Enter the AVD details as your want, finally you will get created AVD.

Click Start button->launcher, finally will show Android view automatically.

2.Phone gap plug in:

        Download the PhoneGap2.9.0 plug in from link http://phonegap.com/download

       Extract the phonegap2.9.0 zip file.

       Create the www folder under assets folder in the project, copy the cordova.js into www folder.

      Copy the cordova-2.9.0.jar file from phonegap2.9.0->lib->android into the libs folder in the project .

      Create the xml folder in res folder of project and copy the config.xml file into this xml folder.

3.SAPUI5 libraries:

                     For this have to download the zip files sapui5-mobile-static.zip, sapui5-sdk-static.zip andsapui5-static.zip(no need to use these 3 zips files for         one project, have to use based on our requirement).

After downloading the zip file and extract this zip file and copy the resource folder from this zip file into the assets->www folder of project as above screen.

4.SAPUI5 developed application:

                Once SAPUI5 application is ready ,

            then,  have to copy the all content or files into assets->www folder of project.

5. Other required changes:

             changes in AndroidManifest.xml file:

                       add the following code in AndroidManifest.xml file,

          <supports-screensandroid:largeScreens="true"

          android:normalScreens="true"

          android:smallScreens="true"

          android:resizeable="true"

          android:anyDensity="true"/>

          <uses-permissionandroid:name="android.permission.VIBRATE"/>

          <uses-permissionandroid:name="android.permission.ACCESS_COARSE_LOCATION"/>

          <uses-permissionandroid:name="android.permission.ACCESS_FINE_LOCATION"/>

          <uses-permissionandroid:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS"/>

          <uses-permissionandroid:name="android.permission.READ_PHONE_STATE"/>

          <uses-permissionandroid:name="android.permission.INTERNET"/>

          <uses-permissionandroid:name="android.permission.RECEIVE_SMS"/>

          <uses-permissionandroid:name="android.permission.RECORD_AUDIO"/>

          <uses-permissionandroid:name="android.permission.MODIFY_AUDIO_SETTINGS"/>

          <uses-permissionandroid:name="android.permission.READ_CONTACTS"/>

          <uses-permissionandroid:name="android.permission.WRITE_CONTACTS"/>

          <uses-permissionandroid:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

          <uses-permissionandroid:name="android.permission.ACCESS_NETWORK_STATE"/>

          <uses-permissionandroid:name="android.permission.GET_ACCOUNTS"/>

          <uses-permissionandroid:name="android.permission.BROADCAST_STICKY" />

need to change following code in same AndroidManifest.xml file which are highlighted:

          <activity

                          android:name="com.example.horseapp1.MainActivity"

                                android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"

                          android:label="@string/app_name">

                          <intent-filter>

                          <actionandroid:name="android.intent.action.MAIN"/>

                          <categoryandroid:name="android.intent.category.LAUNCHER"/>

                          </intent-filter>

                     </activity>

changes in index.html file:

          add the following 3 lines as like screen in index.html file,

          <scripttype="text/javascript"src="/assets/www/resources/sap/ui/thirdparty/jquery/jquery-1.7.1.js"></script>

                  <scripttype="text/javascript"src="//assets/www/resources/sap/ui/thirdparty/jqueryui/jquery-ui

position.js">         

          </script>

              and,

         <scripttype="text/javascript"src="/ScimsApp/assets/www/cordova.js"></script>

Output:

              After entering the User ID and Password,  the page is navigate next page like below,

Note:Need to include the required SAPUI5 library properly as mentioned above.

Me and my colleguesWerner Schwarz and Patrick Wenger we like SAPUI5 and OpenUI5 a lot. I think it's a great, easy-to-use technology and with SAP Web IDE improving continuously, full WYSIWYG-capabillities are getting closer and closer. I'd like to use OpenUI5 in a lot of private projects in my spare time.

However, in my optinion SAPUI5 is only fun when using it in combination with OData and corresponding OData-Services (especially when working with SAP Web IDE). However, how would you create an OData-Service in "normal/private" live? Only few of us have a SAP Gateway on their night table....

I investigated quite some time and found several approaches. I think all of them are either only half-baked (like every approach using PHP-based OData Producer Library OData Producer Library for PHP - Home, as it only provides Read-Support and you have to generate the files for every database you want to provide a service for) or way too work-intensive to use for rapid prototyping (like using JPA for a specific database schema: xml - How to expose a MySQL database as OData - Stack Overflow).

We wanted something very simple and generic: We wanted to create a generic tool enabling us to provide OData-Services for ANY SQLite database only by copy&paste the corresponding files to a default PHP web hosting - without any special software-systems, further programming or file-generating.

Therefor we (well, mostly Werner) created the php-sqlite-odata library. Check out Werner's GitHub Repository: slup/php-sqlite-odata · GitHub

By copying these files and providing a few configuration information in the Config.class.php-File you can easily provide full OData CRUD-Services for any SQLite-Database. You can also add these Services as Destinations in the SAP HANA(Trial) Cockpit and using them right away in the SAP Web IDE.

We're already covering a lot of the OData standard llike:

• Create
• Read
• Update
• Delete
• Metadata
• count
• inline-count

But as you can see in the documented limitations sections, not the  full OData-Standard is covered yet. Next steps ahead are:

• BLOB-Datatype
• Filtering
• Navigation Links

Also, no security aspects like SQL Injection etc. has been covered yet. So if you want to test it or (even better) improve it, please fork Werner on GitHub

Any comment or contribution is very welcome!

In the next part of this Blog serie I'll provide a step-by-step tutorial using this library in combination with SAP Web IDE,

PS: I'm using phpSQLiteAdmin download | SourceForge.net for creating and maintaining my SQLite databases. This little PHP-File based tool provides phpMyAdmin-like functionality for SQLite databases.

Introduction

Today I'm gonna show you how to install the Hybrid Application Toolkit (HAT) on a Windows machine. Hybrid Application Toolkit (from now on simply HAT) is the tool which allows you to deploy SAP Hybrid applications on mobile devices. Hybrid application (also known as Kapsel applications) can be created by using SAP Web IDE and then deployed on mobile devices with this tool. In order to get more information on this tool and on SAP Web IDE I suggest you to give a look to this page (SAP Web IDE - Enablement). Here you can find a lot of other useful resources for SAPUI5 application development.

This blog is just for Windows: another one, hopefully, will come soon for Mac platform.

HAT installation is NodeJS based: it guides you through all the steps for a successful result. However in order to avoid the needing to start the installation and then going back and forth installing the missing components, with this blog, I'm giving you a sort of good starting point so that when you start the HAT installation it will be as smooth as possible and you will be no longer required to leave the installation process for installing other mandatory software.

This blog has been split in 3 parts:

Prerequisites

In this blog I would like to start with a very blank Windows machine, so I'm gonna show you how to install all the needed tools for SAPUI5 application development. We will go through the installation of the following components:

• Java JDK 8
• Android SDK rel. 24.3.3
• Apache Ant 1.9.5
• SAP Kapsel Plugin 3.8.2
• Node.JS v.0.10.38
• Git client
• Hybrid Application Toolkit 1.5.2
• Cordova 4.2.0
• Plugman

The prerequisites here are nothing more then the following ones:

• Windows 8.1 64bit
• Google Chrome browser
• An account on the SAP HANA Trial Landscape accessible by this link (SAP HANA Cloud Platform)

Further recommendations:

• UAC must be set as by default

• All the commands in the Terminal window must be executed WITHOUT administrator's rights, otherwise you won't be able to perform HAT setup.

Getting started

As I said, for your comfort, I will start from the very beginning, so with a very blank machine. I've split the complete how-to-guide over 3 parts. This is the complete list of the steps we will go through:

Part 1:

• Install Java Development Kit (JDK)
• Install Android SDK
• Install Apache Ant

Part 2:

• Download and install SAP Kapsel Plugin
• Configure some environment variables (JAVA_HOME, ANT_HOME, KAPSEL_HOME, ANDROID_HOME and PATH)
• Install a GIT client
• Install Node.js
• Install Kapsel CLI
• Install Cordova 4.2.0
• Install Plugman

Part 3:

• Download HAT
• Setup HAT
• Run HAT and test its connectivity with SAP Web IDE
• Deploy your first Kapsel app to local Hybrid App Toolkit

So, let's focus here just on the first part!

Install Java Development Kit (JDK)

Java Development Kit is required by the Android SDK, so as first step we need to install this component. In this guide I'm using JDK 8, but 7 is fine as well.

1) Go to JDK download page "Java SE Development Kit 8 - Downloads", accept the license agreement and download the JDK according to your Windows platform (32 or 64 bit)

2) Once the download is finished double click on the downloaded file to start the installation

3) Leave all by default and click Next at every step. When you reach the step where you can change the installation path, take note of this path because it will be required later when you are going to configure the JAVA_HOME system variable

4) When the installation finishes, you can check that all worked fine by opening a Terminal window and typing the command "java -version". You should get something like this

Install Android SDK

For the Android SDK you can go to the following URL: Download Android Studio and SDK Tools | Android DevelopersNow you have two possibilities:

• download the complete Android Studio suite which contains in bundle the Android SDK
• download the stand-alone version of SDK without the Android Studio.

In this guide, I'll follow the second approach, but the first one is fine as well: just write down the path where the bundled SDK tool is installed.

1) Go to the download URL and click on Other Download Options

2) Choose the recommended download option (for Windows), which is the one by the installer

3) Once the download is finished, double click on the downloaded file to start the installation

4) Accept the UAC request by clicking on Yes

5) Click on Next on the Welcome screen

6) Click on Next on the screen where the current installed Java version is verified

7) Choose if you want to install this just for you or for everyone and click on Next

8) Take note of the installation path (it will be required later) and click on Next

9) Click on Install

10) When the installation is completed click on Next

11) Choose to Start the SDK Manager and click on Finish

12) The SDK manager starts: if you get an error like this, it's because most probably you are behind a firewall and you need to configure your proxy settings; so click on Close and read the APPENDIX to this section named Configure proxy for Android SDK Manager.

If you have no "Failed to fetch" error, you can continue with next step

13) Now you need to specify the packages you want to install. For this H2G we will choose to install Android 4.4.2 (API19). This because, at moment, this is the highest supported Android version by the latest Kapsel plugin. You can install newer versions of Android, but the installation process will always check and require the presence of API 19 to work. You can skip installing the Glass Development Kit preview because it's not needed for this guide and will probably ask you to accept a separate license in the next step. In my case there are just 11 packages to install. Click on the Install 11 packages button

14) Select the root Android SDK License, click on Accept License and then on Install

15) The installation of the required packages starts. It might require some time depending on your network speed, so be patient. If you get an error saying "Stopping ADB server failed (code -1)" at the beginning of the installation process, don't worry, it's normal!

16) When the installation finishes, we need to create an Android Virtual Device(AVD) in order to test our Android applications. Of course, this shouldn't be mandatory, because I could test my applications just by using my Android phone, but at moment the HAT setup looks for it, so we need to configure it. In the future probably this won't be a mandatory step.

In order to create your first AVD, select Tools --> Manage AVDs, click on the Device Definitions tab, select a suitable device for your Android emulator (i.e. Nexus 4) and click on Create AVD

17) Specify the required parameters (this is just an example and click on OK)

18) When the summary screen appears click on OK

19) You should be able to get your emulator in the list

20) You can close the tool.

NOTE: Using the Android Emulator with this kind of ARM processor might result very slow. I suggest you to use (if possible) Virtual Machine Acceleration as explained here. In this way you can have a better emulated device for your development.

Install Apache Ant

For the Apache Ant software installation, you can download it from Apache Ant - Binary Distributions

The latest version at the time I'm writing this guide is 1.9.5.

1) Download this version

2) Select the downloaded zip file, right click on it and choose Extract All

3) Just put the extracted folder on your C: drive's root. A subfolder will be automatically created

4) Rename the new folder simply with "apache-ant"

Good job so far! Please continue with the part 2 of this H2G!

APPENDIX

Configure proxy for Android SDK Manager

1) Click on Tools --> Options

2) Enter your proxy settings (i.e. for SAP Network proxy:8080)

3) Close SDK Manager and reload it by double clicking on the SDK Manager executable

Introduction to part 2

This is the continuation of this blog. At the end of this series of  parts, you should be able to successfully install your Hybrid Application Toolkit with minimum effort. In the previous part we have already seen how to install JDK, Android SDK and Apache Ant.

Now I'm going to show you how to install Kapsel, how to configure some environment variables and how to install a bunch of other components like GIT, Node.js, Kapsel CLI, Cordova and Plugman. This is the complete list of the steps we will go through in this part:

• Download and install SAP Kapsel Plugin
• Configure some environment variables (JAVA_HOME, ANT_HOME, KAPSEL_HOME, ANDROID_HOME and PATH)
• Install a GIT client
• Install Node.js
• Install Kapsel CLI
• Install Apache Cordova 4.2.0
• Install Plugman

Download and install SAP Kapsel Plugin

SAP Kapsel Plugin is included in the SAP Mobile Platform SDK package, which can be downloaded from the SAP Store at this link. Download is free.

1) Click on Trial Version. Once you have filled the contact form and sent it, you will receive an email with the download link

2) Once downloaded the package you can extract it. You can do it in the current folder because we won't need the entire package, but just a small part

3) Navigate to the extracted folder down to the path SMP3SDKInstaller_3_8_2_win\modules\KapselSDK. You will find another zip file. Right click on it and select Extract all

4) Just extract it in the C:\KapselSDK folder: this is what you should get at the end

Configure some environment variables (JAVA_HOME, ANT_HOME, KAPSEL_HOME, ANDROID_HOME and PATH)

Let's now configure a bunch of system variables.

First of all, let's set the JAVA_HOME. The steps listed here for setting the JAVA_HOME variable are the same for all the other 3 variables. For the PATH variable you just need to append a new string to the existing PATH. You will see this later.

These are the variables you need to configure:

NOTE: Of course, in your case the paths can be different, if you have specified different folders during the previous steps.

NOTE: The ANDROID_HOME variable is NOT mandatory, but it's better to have it because it's much easier to set up the PATH variable for the Android tools.

So let's see how to configure the JAVA_HOME: then you can do the same also for the other variables.

1) Right click on the Start button and choose System. Alternatively you can open the Control Panel and navigate to System and Security --> System

2) Click on Advanced System Settings

3) Click on Environment Variables

4) In the System Variables panel click on New

5) Enter the variable name JAVA_HOME and its value according to the table above and click on OK

6) Do the same for all the other variables.

7) Once all the 4 environment variables have been set up we can configure the path. In the System Variables panel, select the PATH variable and click on Edit

8) Append to the PATH variable the following string(including the first semicolon) and click on OK

;%JAVA_HOME%\bin;%ANT_HOME%\bin;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

9) At the end, you can check if you have done all correctly by typing one by one the following commands

echo %JAVA_HOME%

echo %ANT_HOME%

echo %ANDROID_HOME%

echo %KAPSEL_HOME%

path

You should get something like this

For each variable you receive the related path. Check that they are all correct. All the environment variables have been properly configured.

Install a GIT client

A GIT client is another very important tool for HAT: it's used to manage source code on the GIT server. There are many GIT clients available on the web, what we really need is a GIT client which works in the Terminal window. You can check if you have such a Git client installed on your machine by opening a Terminal window, typing the word "git" and hitting ENTER. You should get something like this

This means that the Git client is installed. If you don't have the Git installed you can follow this procedure to install it.

1) Download the Git client from here Git. Feel free to download the latest version

2) Start the installation process by double clicking on the installation file

3) Click on Next at the Welcome screen

4) Click on Next at the License information

5) Choose the path where you want to install it or leave the proposed one and click on Next

6) At the Select Components screen simply click on Next

7) Click again on Next to create a shortcut in the Start Menu

8) You come now to an important step: here you need to choose how you would like to use Git from the command line. Choose the second option and click on Next

9) At next screen you are called to decide how Git client needs to deal with the line ending conversions. Let's choose the first option and click on Next

10) The installation starts. At the end simply click on Finish

11) Close any open Terminal window and reopen a new one and issue again the "git" command. You should see that the Git client is now installed

12) In case you are behind a proxy firewall and you need to manually configure the proxy settings for Git, you can do it by following the steps listed in the APPENDIX to this part under the chapter How to configure proxy for Git

Install Node.js

Node.js is the main tool for HAT setup: the script which installs HAT uses this tool for executing the installation instructions.

It can be freely downloaded from https://nodejs.org/

The installation of Node.js brings in bundle a package manager which is called "npm" and can be used from the command line. This package manager is an important tool here for next steps. The "npm" tool is able to connect to some remote repository and install the package specified in the command line. For this reason, since it needs to connect to the internet network, it might be required to configure the proxy settings for it, in case your machine is behind a proxy firewall. The HAT installation will automatically ask you for proxy information and will set the npm configuration for you. In case you need to do it manually you can by following the steps listed in the APPENDIX to this part under the chapter How to configure proxy for npm

NOTE: You MUST NOT install the latest version, but just a specific version which is 10.3x. In this guide I'm going to install the 10.38 - 64bit.

1) Download the application

2) Double click on the download file to launch the installation process

3) Click on Next at the Welcome screen

4) Accept the license agreement and click on Next

5) For the destination folder you can leave the proposed one (the default for 64bit should be C:\Program Files\nodejs\) and click on Next

6) Click on Next again on the screen named Custom Setup

7) Click on Install to start the installation

8) If you get the User Access Control popup, click on Yes to install the "node.js" program

9) Click on Finish when the installation finishes

Install Kapsel CLI

This step will install the Command Line Interface for Kapsel. This is a very short step. All you have to do is just to run the following command in a Terminal window:

npm install -g c:\KapselSDK\cli (of course if you have installed the Kapsel plugin in a different folder you have to adapt this line)

You should get something like this:

NOTE: If you get errors here it's because most likely you have not properly configured your proxy settings for npm. Please follow the steps listed in the APPENDIX to this part under the chapter How to configure proxy for npm

Install Apache Cordova 4.2.0

Apache Cordova can be even installed during the HAT setup, but for sake of simplicity I'm going to install it here. It's important to mention that if you want to install Cordova during the HAT setup, you don't have to take care of the version to install, because the HAT setup will automatically propose you the right version: doing it in this phase requires that you know exactly which is the right version to install. For HAT 1.5.2, which is the the version one I'm going to install in the 3rd part of this blog, the right Cordova version is 4.2.0 and this is exactly what I'm going to install here.

The installation is pretty simple: it's done through the "npm" command. You need just to open a Terminal window and run the command:

npm install -g cordova@4.2.0

NOTE: If you get errors here it's because most likely you have not properly configured your proxy settings for npm. Please follow the steps listed in the APPENDIX to this part under the chapter How to configure proxy for npm

Install Plugman

Plugman is a tool for installing/uninstalling plugins for Apache Cordova.

The installation of Plugman is achieved through an npm command as well:

npm install -g plugman

In case you are behind a proxy firewall and you need to manually configure the proxy settings for Plugman, you can do it by following the steps listed in the APPENDIX to this part under the chapter How to configure proxy for Plugman

Let's continue now with the third and last part!

APPENDIX

How to configure proxy for npm

These are the steps if you want to manually configure the proxy for the "npm" command:

1) Run the command

npm config list

to check that there is any proxy set for npm. Should you need to delete any old proxy information from npm configuration you can use the two commands:

npm config del proxy

npm config del https-proxy

2) Run

npm config set proxy <protocol>:://<proxyhost>:<proxyport>

to set the http proxy

3) Run

     npm config set https-proxy <protocol>:://<proxyhost>:<proxyport>

to set the https proxy

4) Run again the

     npm config list

command

5) Check that now the proxy information is set correctly

How to configure proxy for Git client

These are the steps if you want to manually configure the proxy for the "git" command:

1) Run the command

git config --list

to check that there is any proxy set for Git. Should you need to delete any old proxy information from Git configuration you can use the two commands:

     git config --global --unset http.proxy

     git config --global --unset https.proxy

2) Run

git config --global http.proxy <protocol>:://<proxyhost>:<proxyport>

to set the http proxy

3) Run

     git config --global https.proxy <protocol>:://<proxyhost>:<proxyport>

to set the https proxy

4) Run again the

     git config --list

command

5) Check that now the proxy information is set correctly

How to configure proxy for Plugman

These are the steps if you want to manually configure the proxy for the "plugman" command:

1) Run the command

plugman config list

to check that there is any proxy set for Plugman. Should you need to delete any old proxy information from Plugman configuration you can use the two commands:

plugman config del proxy

plugman config del https-proxy

2) Run

plugman config set proxy <protocol>:://<proxyhost>:<proxyport>

to set the http proxy

3) Run

     plugman config set https-proxy <protocol>:://<proxyhost>:<proxyport>

to set the https proxy

4) Run again the

     plugman config list

command

5) Check that now the proxy information is set correctly

Introduction to part 3

This is the final part of this blog. All the prerequisites should have been successfully installed at this point if you have followed the previous two parts.

In this final part we are going to see the following things:

• Download HAT
• Setup HAT
• Run HAT and test its connectivity with SAP Web IDE
• Deploy your first Kapsel app to local Hybrid App Toolkit

Download HAT

Hybrid Application Toolkit can be downloaded for free from the SAP Store at this link.

As you already did for Kapsel, you just need to register, wait for the download links to be sent by email and download the product.

1) Once downloaded the package you should have a file named SAP_HAT_local. Right click on it and Extract All

2) Extract the file directly in the root of your C drive. A subfolder will be automatically created for you.

3) If you want you can rename this folder to something else, like for example to "hat152"

Setup HAT

It's time now to start your Hybrid Application Toolkit installation.

1) Open your HAT folder and double click on the setup.cmd file. It's the one with Type=Windows Command Script.

2) The installation process is launched. The setup script looks for another components, which we have not yet installed, but that the script automatically installs by itself. This component is "bower". It's a sort of tool which allows the script to easily install other missing libraries

3) It might happen that you are behind a proxy in your company and you have forgot to configure it for any of Npm, Git and Plugman tools. No worries! You can specify your proxy settings here and the HAT setup will manage all the needed configurations for you. The proxy must be entered in the form <http|https>://<host>:<port> (i.e. http://proxy:8080). This is what I'm doing right now.

If you are not behind a firewall, this step, of course, will not be required

4) After all the required packages have been all successfully installed by bower, the main page of HAT setup is opened. HAT setup is web based, so it's all managed by some web pages on a temporary web server automatically created by Node.js. This is how the main page looks like: you just need to click on the Check All button and all the prerequisites will be checked by the script, which will also take care of installing all other missing things

5) Since we have already installed some components and configured all the environment variables, the first page of checks should go forward very smooth

6) Again you might get an error like this complaining that you are probably behind a proxy and you need to configure it. This time is for Plugman: you have here the chance to configure it during the installation. Just click on the first text box

7) A popup window appears and here you need to enter your proxy settings in the same format you did previously. Then click on Set

8) Do the same for the HTTPS protocol, too

9) Go to the top left corner of the page and click again on the Check All button

10) The setup will restart, but this time you should pass that Plugman configuration test without any problem. When all the tests on the first page have been successfully completed a popup appears to inform you that you are going to be automatically redirected in a few seconds to the next page. If you are in hurry or tired to wait you can simply click on Next Step

11) In this second page, at step 3, you are requested to provide the link to your SAP Web IDE instance (i.e. https://webide-<your_account>.dispatcher.hanatrial.ondemand.com/). You can enter of course more than one, but for this H2G we are fine with just one single link. In particular, here I'm using my SAP Web IDE from the HANA Trial Landscape. Once you have copied the link in the text box, simply click on Save

12) In the next step you are requested to provide a password for the local keystore, which is going to be created on your machine in order to host all the passwords required for HAT. Just enter twice the password you have chosen and click on Generate

13) Click on Yes, if you get the User Access Control popup

14) You are redirected now to page 3. At step 2 you need to provide some information regarding the Companion app. Fields are already pre-filled for you, so you can leave the proposed values and click on Save

15) The Companion app is getting built. You need to wait a little bit depending on your hardware's power

16) When this process ends you are invited to close the page because setup completed successfully!

Run HAT and test its connectivity with SAP Web IDE

1) Open your HAT folder and double click on the run.cmd file

2) Enter your keystore password (the one you have previously defined)

3) HAT starts to listen on port 9010.

4) This port can be changed, of course, but you will need to edit the config.json file in the HAT folder and then put the same port number in SAP Web IDE under Tools --> Preferences --> Hybrid Application Toolkit

5) In this screen you can also test HAT connectivity by clicking on the Test Connection button.You should get the message that the connection is available

NOTE: If you are using Firefox it might happen that the connectivity is not working at the first attempt: this because of the https protocol on localhost. So you might get the following error:

What you have to do is just to add the https://localost:9010 site to your browser exceptions by following the steps listed in the APPENDIX to this part under the chapter Fix HAT connectivity issue with Firefox.

Deploy your first Kapsel app to local Hybrid App Toolkit

You are ready now to deploy your first Kapsel application to your local Hybrid App Toolkit

1) Open SAP Web IDE and create a new Kapsel app (if you don't have one yet) based on one of the Kapsel templates

2) Right click on the name of the project and choose Deploy --> Deploy to local Hybrid App Toolkit

3) The application is downloaded from the Cloud and "mobilised" by HAT. You can follow the process in the background by opening the SAP Web IDE console window through the menu View --> Console

4) When the process finishes, you get a completion message; click on OK to close it

5) If you go on your file system, you should have a subfolder named SAPHybrid under your user folder. This subfolder contains another subfolder for each project you have deployed to your local HAT. In this case I have just one project

6) You can now run the deployed application on your device/emulator.

Congratulations! You have successfully installed and tested your Hybrid Application Toolkit!

APPENDIX

Fix HAT connectivity issue with Firefox

1) Open another page on your browser and enter the URL address https://localhost:9010

2) Click on I Understand the Risks --> Add Exception

3) Click on Confirm Security Exception

4) You get this message. Don't ask me why it mentions "Chrome" even though you are on Firefox

5) Retest your connection now, it should be fine

There is an important difference in the way the virtual keyboard behaves and affects available screen space in browsers on iOS and Android smartphone and tablet devices. There have been multiple issues raised in the past in relation to the way the iOS devices provide virtual keyboard compared to Android. Some users are confused and sometimes this looks like a limitation of the UI framework.

Usually, it is expected that browsers behave almost identically on Android and iOS but this is not always so. Here is some important information developers and users need to know about how the virtual keyboards affect the viewport in browsers on both platforms.

Android

When a virtual keyboard is triggered

What happens when a user triggers the virtual keyboard on an Android device, is that the viewport dimensions are updated and the UI code can react to the decreased dimensions.

Interaction with UI while the keyboard is shown

In order for the user to continue interacting with the UI while the keyboard is shown, scrolling up and down should be performed because only the viewport has been shrunk.

iOS

When a virtual keyboard is triggered

On the contrary, in iOS devices, when the virtual keyboard is shown, the viewport size does not change. The virtual keyboard is displayed as an overlay, so a large portion of the screen will be hidden behind the keyboard panel.

Interaction with UI while keyboard is shown

If a user wants to interact with the UI while the keyboard is displayed, the keyboard should be first closed via a special button for the purpose. This should be done because some important portions of the UI might happen to be below the keyboard and therefore inaccessible until the keyboard is closed.

A code sample

A code sample is available at http://output.jsbin.com/xonabu.

It can be opened using an Android or an iOS browser for monitoring changes to viewport size while displaying and hiding the virtual keyboard. Check the following images for preview if you don't have a mobile device at hand.

If you experience issues when ordering SAP Web IDE or when accessing SAP HANA Cloud Platform this might be helpful:

• If you experience issues with buying in SAP Store, i.e. with ordering, paying or not receiving the email confirmation from SAP Store, please get support by creating a Support Request in the SAP Store Help area

  • Note that not all users have the buyer role in SAP Store. Only individuals with authorization to purchase on behalf of a company will have it.

  • Also note that certain users have multiple S-User IDs or P-User IDs. Please make sure you’re using the right user ID to act as a buyer.

• Should you have technical issues with SAP Store itself or are unable to create a SAP Store Support Request, please send an email to store.admin@sap.com

• If you have received your email confirmation, but have issues with SAP HANA Cloud Platform provisioning, i.e. with your Account or the SAP User given in the email, please report an SAP Incident (component BC-NEO-CIS) via SAP’s Support Portal. For details please see SAP HANA Cloud Documentation -> Get Support.

I'm writing this blog post to share my experience on a specific development task on SAP Netweaver Portal 7.3: one of our customers asked for an SAPUI5 Application based on the SAPUI5 libraries deployed on Portal Java AS. It isn't a common way of integrating an SAPUI5 application, the standard approach is to build an application using the libraries available on SAP Gateway or where the SAPUI5 UI ABAP addon is installed.

In our customer scenario we didn't have any ABAP server available so we proposed to use the native SAPUI5 portal libraries on Netweaver's AS Java (this libraries are included in standard installation since Netweaver 7.3 ehp1 SP05).

There is a simple way to check if your portal server has these libraries: try the following url

http://<server-url>:<server-port>:sapui5

if you display a page like this one

you got it and you can start your development!

If you don't have the libraries available in your portal installation don't give up, you still have an option: you can use openui5 library (http://openui5.org) deploying it as J2EE application or KM Folder and referencing it in your application. This is an open source version of the library that has almost the same features of SAPUI5 excluding some advanced parts (e.g charts).

Once you have the library we can start developing the application in NWDS: you need to create a new Development Component Project of type Enterprise Portal - Portal Application Standalone.

Choose the related software component and the name of your new DC to go on in the creation wizard.

Once you have the DC you need to create a Portal Application Object of type AbstractPortalComponent that represents the application we're going to code.

Put the object inside the DC project we created above.

Give your component a name and put it inside a package and it is done, now we can start to code the application.

A SAPUI5 application always starts with an HTML page that loads the sapui5 library javascripts and the application specific libraries. So the first thing we need to develop is this kind of page. Using an abstractPortalComponent the easiest way I found to do this is to create an JSP page and include it in the doContent method of the abstract portal component class.

Here is my simple implementation. In this method you can include any external file you need in your application (external css, javascript libraries...)

package my.sdn;
import com.sapportals.portal.prt.component.*;
import com.sapportals.portal.prt.resource.IResource;
public class sdnappui5 extends AbstractPortalComponent
{    public void doContent(IPortalComponentRequest request, IPortalComponentResponse response)    {    //Include jsp    IResource reportSource = request.getResource(IResource.JSP,"jsp/sample.jsp");        response.include(request,reportSource);        //Here you can include any external resource such as CSS, Javascripts and so on    }
}

Now we need to create our sample.jsp with the SAPUI5 application logic.

Go to dist/PORTAL-INF/jsp project folder and create an JSP page called sample.jsp.

In this page you can put your SAPUI5 application, here is my sample code:

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Sample SDN Application</title>    <script id="sap-ui-bootstrap"            src="sapui5/resources/sap-ui-core.js"            data-sap-ui-theme="sap_bluecrystal"            data-sap-ui-libs="sap.ui.commons">    </script></head><body><div id="content"></div>     <script src="/irj/go/km/docs/documents/sdnsample/app.js"></script></body></html>

As you can see it is really simple: the only things you have to do is to load the SAPUI5 libraries in the bootstrap script in the head section referencing the SAPUI5 library location (remember to change it to your local folder or application if you deployed openui5 library instead), and then include your script with application logic. I always prefer to create an external app.js file where I put the SAPUI5 application files to separate the business logic and to be independent from the java deploy for the modifications: if I need to change the behaviour of my application I only need to change the corresponding file on portal km without any deploy.

Of course this is a developer choice, you can put your javascript in the html markup or in a project folder too: find your preferred way in sapui5 development!

I won't go deeper in SAPUI5 application development because there are so many excellent resources on this topic on scn: if you need an help please search and you'll find almost all you need.

Now that we have developed our application let's focus on how to display it into the portal: we need to deploy it at first so build and deploy it on your portal application server. Once you deployed your DC you should see it in the Portal Content Directory, in the Portal Applications.

Create an iview starting from this portal application (Right Click - Copy on your application and then Paste as PCD Object in the PCD location you wish).

Once you have the iview you can test you application with the iview preview.

That's it, enjoy with SAPUI5 development in Java Portal Applications!

Just a note when integrating this kind of SAPUI5 in portal navigation: the old-fashioned portal framework page (classic) works in compatibility mode only, then your SAPUI5 will be displayed in Quirks IE5 mode. This means you can't use the HTML5 and CSS3 advanced features in this scenario, then take care of this limitations when your SAPUI5 application can't be integrated in an HTML5 compliant SAP Portal.

In Part 1 and 2 we've extended the Leave Request Application. Now we need to deploy this App to the Fiori Launchpad.

Part 1: Open the SAP Fiori Demo Cloud Edition, Extend the S1 view

Part 2: Add A Control with the Layout Editor

Part 3: Deploying to the SAP Fiori Launchpad

Deploying to SAP Fiori Launchpad

For this part of the exercise, you will deploy the extended app to the SAP Fiori Launchpad (FLP). And consume it from the SAP Fiori Launchpad. In the process you’ll customize the FLP tile for the extended app.

The first step in the deployment to FLP is to deploy the app to HCP.
Go to the SAP Web IDE browser tab. Select the application project, right-click, select “Deploy > Deploy to SAP HANA Cloud Platform”

If this is the first time you connect with HCP’s Git repository, you’ll need to provide some details

Provide your HCP credentials if requested to

Set the version number to “1.0.0” and make sure that the “Activate” checkbox is marked. Otherwise the application will not be available.

Click “Deploy”

A notification that the application was successfully deployed to HCP appears.

You can test the application on HCP by clicking on the “Open the active version of the application” link in the notification.
In a new tab you will see your application.

Go back to the SAP Web IDE. Refresh the browser tab. You’ll see green dots next to the files in the workspace. That means that the files were submitted successfully to the HCP’s Git repository.

After completing this step of deploying the app to HCP (and activating it), it is time to deploy the app to the FLP.

There are several ways to do it, we’ll do it from the “Application Status” popup.
Select the project, right-click it, select “Deploy > Application Status”

Provide the HCP credentials, if required

Verify that the application is “STARTED” with the correct version “1.0.0” and it is “Active”. You can also see that the application is not deployed on FLP.
click the “Register to SAP Fiori Launchpad” button.

Provide your HCP credentials, if required.

The “Register to SAP Fiori Launchpad” wizard is launched.
Do not change the defaults and click “Next”

You reached the step of the app tile configuration.
First fill in the “Title” (“Leave Request XX”).
Fill-in the “Subtitle” (“Demo”).
You’ll see that the tile to the right reflects your changes.

Click “Browse” to customize the tile’s icon

In the popup search field type “request”, select “create-leave-request” and click “OK”
(you remember this Icon?)

The tile reflects all the changes you made.
Click “Next”.

In the “Group” select “My Apps” and click “Next”

Click “Finish” to deploy to FLP

A notification that the application was successfully deployed to FLP appears.
Click “SAP Fiori Launchpad” to launch the Fiori Launchpad and access the extended app you developed.

The Fiori Launchpad is launched

Scroll down to “My Apps” where the application’s tile is and click on the app’s tile to launch the app

The extended app is launched

You can test that the extended logic (“toast”) is working

Done!

More Web IDE stuff published by Technology RIG

See you

Claudi

In Part 1 you used the Web IDE of the SAP Fiori Demo Cloud Edition to extend the S1 of the Leave Request Application.

In this Exersice we replace the S1 view with the original view, opened the new S1 view with the layout editor and add a control. Because of the last release (1.12) we can now switch from the Extensibility Pane to the Layout Editor, to modify a new Extension.

Part 1: Open the SAP Fiori Demo Cloud Edition, Extend the S1 view

Part 2: Add A Control with the Layout Editor

Part 3: Deploying to the SAP Fiori Launchpad

Extending a Fiori Application – Extend a view with Layout Editor

Open the extensibility pane (“Tools > Extensibility Pane”)

If Extensibility Pane is grey, check if you have selected your project!

Provide your HCP credentials (if required)

And preview the application

Select “S1”, right-click on it and select “Replace with a copy of the original view”

We’ll receive a notification that the view has been replaced. Now we only refresh the application by clicking “OK”.

On the right side Select “S1Custom (Replacement for S1)”, right-click on it and select “Open Layout Editor”

This will close the Extensibility Pane and open the Layout Editor

As Data Set choose AbsenceTypeCollection and click “OK”

You should see the preview of the S1 view. But you cannot change the existing controls at this point (for this use the extension points in the Extensibility Pane).

On the left pane open the “Display” container and drag and drop the “Icon” control at the top of your view.

Change the Icon: Click on the “Src” Field and overwrite the Expression “create-leave-request” and click “OK”

Change the “Width” to “100%”

Save and test it by clicking “Run”

Close the Preview Tab

In the last part I will show you how you can add this extended App to the Fiori Launchpad of the SAP Demo Cloud Edition.

More Web IDE stuff published by Technology RIG

See you

Claudi

For this blog, we use the SAP Fiori Demo Cloud Edition.

We will begin by locating the “My Leave Request” App and launch SAP Web IDE in your browser.

We will extend a Controller Hook of the S1 view, and used the Layout to extend a replaced view (Part 2) and deploy it to our Fiori Launchpad (FLP) (Part 3).

Part 1: Open the SAP Fiori Demo Cloud Edition, Extend the S1 view

Part 2: Add A Control with the Layout Editor

Part 3: Deploying to the SAP Fiori Launchpad

Locating Fiori Application

For this part of the exercise, you will access a library of Fiori applications that are available from SAP Fiori Demo Cloud Edition in order to choose the application to extend (customize).

Open the SAP Fiori Demo Cloud Edition

Click “See Demo In Action” to experience Fiori applications available from SAP

You can experience with various applications by clicking the relevant tile that launches the application. We’ll try “My Leave Request”. This is the application we’d like to extend.

Open the Web IDE

Continuing from the previous chapter where we located the “My Leave Request” app. Click the “Extend” button

Click the “Get Started” button.If you are a SAP employee skip step 3-5.

If you aren’t registered click on Register. If you have an Account enter your User Credentials and Click Log On (skip step 4 and 5)

To register enter your Name, Email and a Password, accept the Conditions and click Register

You will get an email, there click on the Activation Button. Go back to your Fiori Logon (see Step 3) and log on with your new credentials.

Wait a few seconds for the account generation

Click the “Extend” icon and then select “Develop Apps” option

In the search field type “leave” to easily locate the “My Leave Request” app we want to extend

Launch “SAP Web IDE”, which is the recommended tool to develop and extend Fiori and SAPUI5 apps directly from the Fiori Cloud Demo

Confirm the extension project generation by clicking “OK”

Provide your credentials

You can change the name of the extension project. Click “OK” to proceed.

The SAP Web IDE is launched with the generated extension project

Extending a Fiori Application - Extending a Controller

For this part of the exercise, you will modify the application’s logic. Whenever a user click a date or a range – a “toast” with the selection will appear at the bottom of the screen.

The graphical extensibility pane (“Tools > Extensibility Pane”) is the easiest way to preview the app and extend it. If Extensibility Pane is grey, check if you have selected your project!

Provide your HCP credentials (if required)

And preview the application

First we need to find the extension point for the user selecting a date.

In the “Outline” pane filter for “Show extensible elements”, drill-down “Controllers > S1”

Select “extHookTapOnDate”, right-click on it and select “Extend UI Controller Hook". extHookTabOnDate is the Controller which is used when we choose a date or a date range

We’ll receive a notification that the extension code stub was created. We’ll open the extension code directly from the notification. Click “Go to extension Code”

The extension code is available in the Editor pane

Replace the hook implementation comment with the following blue marked code. The Code Snippet checks whether we have selected a single day or a range of dates. The result is shown in a small pop up which is called “toast”.

sap.ui.controller("hcm.emp.myleaverequests.hcmempmyleaverequestsExtension.view.S1Custom",
  {

                  extHookTapOnDate:function() {

                              var arr = this.cale.getSelectedDates(); 

                               if (arr.length=== 1) { 

                                               sap.m.MessageToast.show(arr[0]); 

                               } else if (arr.length > 1) { 

                                               var index = arr.length - 1; 

                                               var orderedArr = []; 

                                               for (var date in arr) { 

                                                               orderedArr.push(Date.parse(arr[date])); 

                                               } 

                                               orderedArr.sort(); 

                                               sap.m.MessageToast.show(new Date(orderedArr[0]).toDateString() + " - " + new Date(orderedArr[index]).toDateString()); 

                               } 

                }

});

Beautify it (Edit > Beautify)

And do not forget to save!

Click the “Run” icon to test the application. Choose index.html in the pop up

A new browser tab is opened with the application running in it

Test it with a single date selected

Test it with a date range

Close the Preview Tab

In the next part we will replace the S1 view and extend the new view with the layout editor.

More Web IDE stuff published by Technology RIG

See you

Claudi

Introduction

In this blog I'm going to show you the solution to one of the two exercises we presented to the SAP Web IDE Design Council 2015.

At the end of this exercise, you will gain knowledge on how to create a new SAP Fiori application using SAP Web IDE. You will learn how to use some of the new features of the product like the code editor, the layout editor and how to run the application using mock data. The final step will be to create a valid run configuration to run the application with some specific parameters. As optional steps you will learn how to deploy your new application firstly to SAP HANA Cloud Platform and then how to do it on your SAP FIORI Launchpad.

This blog has been split in 3 parts:

Prerequisites

The few prerequisites for the execution of this exercise are the following:

An account on the HANA Trial Landscape

You need to registerhere. Once you have your account, you can run your instance of SAP Web IDE using the following link: https://webide-<your_account>.dispatcher.hanatrial.ondemand.com/ where <your_account> is the account you received after registering.

An account on the SAP public gateway system

You can read the following SCN page for getting more information: http://scn.sap.com/community/developer-center/front-end/blog/2014/06/22/how-to-configure-an-external-gw-system-with-sap-river-rde

A destination in the HANA Trial Landscape cockpit

You have to go on your HANA Trial Landscape cockpit and create a new destination as in this screen shot:

A subscription to the HANA Trial Landscape Fiori Launchpad (required only if you intend to follow the optional chapter as well)

It can be obtained by following this procedure:

1. Open the HANA Trial Landscape cockpit and click on Subscriptions. Check that the "flpportal" application is among your subscriptions. If not, you can add it by clicking on the button New Subscription

2. Click on Services and check that the SAP HANA Cloud Portal service is enabled. If not, please enable it.

3. Click on the small person icon in this page

4. Click on Roles and check that your user is correctly assigned to the TENANT_ADMIN role. If not, please assign your user to it.

Table Of Contents

1.0 CREATING A NEW APPLICATION WITH SAP WEB IDE

1.1 ADDING A NEW OBJECTATTRIBUTE TO THE DETAIL VIEW

1.2 RUNNING THE APPLICATION WITH MOCK DATA

1.3 CREATING RUN CONFIGURATIONS

1.4 DEPLOYING THE APP TO HANA CLOUD PLATFORM

1.5 DEPLOYING THE APP TO SAP FIORI LAUNCHPAD (optional)

1.0 CREATING A NEW APPLICATION WITH SAP WEB IDE

Open SAP Web IDE from the Trial Landscape. You should use a link like this:

https://webide-<your_account>.dispatcher.hanatrial.ondemand.com

where “<your_account>” is the account you have been assigned to after the registration to the HANA Trial landscape.

1. Open SAP Web IDE

2. From the top menu click on File --> New --> Project from Template

3. Select the SAP Fiori Master Detail Application template and click on Next

4. Enter a name for your project (i.e. "DCExercise") and click on Next

5. Select the Service Catalog source and the es1 destination from the drop down list. This is the destination that you should have already created previously according to the prerequisites

6. Enter the credentials to the system

7. Select the GWDEMO service and click on Next

8. Enter a project namespace (i.e. “com.dcexercise”) and fill the Master Section with the following values:

9. Fill the Detail Section with the following values and click on Next:

10. Click on Finish

11. Test the application by selecting the index.html file in the project explorer and clicking on the Run button on the top toolbar

12. The application starts successfully. You might need to enter your credentials for the OData service again.

1.1 ADDING A NEW OBJECTATTRIBUTE TO THE DETAIL VIEW

Let’s start now by customising a little bit our application by using the Code Editor and the Layout Editor features.

NOTE: pay attention that the layout of your workstation might not be the same of the one presented here in these screenshots. Of course this is NOT a problem for the completion of the exercise.

1. Expand the view folder of your project and double click on the Detail.view.xml file

2. The file will be opened in code editor mode on the right side of SAP Web IDE

3. Open a new line before the one containing the first ObjectAttribute of the ObjectHeader. It should fall between lines 23-24, so the new line will have the number 24

4. Start typing “<O” and you will automatically get the suggestion for the remaining part of the tag. Hit <ENTER> and the editor will complete the word for you

5. Type a space and start typing “te”. Now you can hit <CTRL> + <SPACEBAR> and get the list of the available attributes for this tag: another way is to simply click on the small down arrow you get on the right of the word you are typing.

Select “text” and hit <ENTER>

6. The string ‘text=””’ will be added automatically. You just need to complete the property by entering, between the double quotes, the string “ProdID”. This will be just a placeholder because we are going to replace this text with the field binding later in this exercise

7. Move the cursor after the last double quote and type “>”: the tag will be automatically closed by the editor

8. Save the file

9. Right click on the Detail.view.xml file in the project explorer and select Open With --> Layout Editor

10. The Layout Editor is opened in a new tab on the right side of SAP Web IDE. Select the ProdID control we have added previously and, in the Object Attribute properties browser, click on the button “…” related to the Text property

11. Select the ProductID Data Field and click on OK. In this way we are binding that control with this Data Field

12. On the left side of the layout editor expand the Display tab in the controls’ palette; drag a new Object Attribute control just below the {[i18n]detailText}

13. You might need to keep the <CTRL> key pressed while dragging in order to adjust the position of the control

14. As you did before for the ProductID, bind this new control to the SupplierName and click on OK

15. This is what you should have at the end.

16. Save the file and test the application again

17. You can see the new field added to the detail view.

Let's go to the second part of this blog.

This is the continuation of the blog presented here.

This blog has been split in 3 parts:

In this second part we are going to see how to run the application with mock data and how to create run configurations.

1.2 RUN THE APPLICATION WITH MOCK DATA

For this part of the exercise, you will use the Mock Data Server to run the application with mock data.

1. Select the index.html file in the application and, from the toolbar menu, select Run --> Run with Mock Data

2. The application is executed with some on the fly randomly generated data. The Mock Data Server takes the metadata.xml file in the model folder and generates the random data for you

3. Open the model folder and right click on the metadata.xml file. Select Edit Mock Data

4. Select the ProductCollection entity set, since that is the collection used by our application, and click on the Generate Random Data button

5. Some random data are generated to populate the table according with the field types. Make sure that the Use the data above as my mock data source checkbox is selected and click on OK

6. If you look now in your model folder you will find a new file named ProductCollection.json

7. Double click on this file and you will get its content. It contains the generated data in a JSON format

8. Reopen the mock data generator as described at step 3 and change one of the records (i.e. the 4th record). You can change for example the ProductName and set it equal to Apple and the UnitPrice equal to 200. Then click on OK

9. Run the application again with mock data and you will see the changes in the SAP Web IDE preview. Close the preview when finished

10. Right click on the name of the project and select Project Settings

11. In the Mock Data section, choose Generate data for the Mock Data Source parameter. Click on Save

12. If you run the application again with mock data you will get back to randomly on the fly generated data and the saved ProductCollection.json file now is no longer taken into account

1.3 CREATING RUN CONFIGURATIONS

For this part of the exercise, you will be creating a couple of run configurations in order to execute your app under some specific constraints.

1. Right click on the index.html file in your application and select Run --> Run Configurations

2. Select the Web Application branch and, if there are already some existing run configurations under it, remove them all with the Delete button

3. Keeping the Web Application branch selected, click on the button New Run Configuration

4. Enter a name (i.e. “RunWithMockData”) and make sure that the application file path points to the “/index.html” file. When you open the run configurations tool by right clicking directly on the index.html file, this field comes automatically populated

5. Scroll down the page and select the Open with mock data checkbox. Then click on Save

6. On the top right corner you will get the message that the project settings have been saved

7. You can test the new run configuration by clicking on the Run now button

8. The application is executed according to your settings, so in this case it’s displayed with mock data

9. Create a new run configuration by entering i.e the name RunWithoutFrame and deselecting the Open with frame checkbox. Then click on Save and test this new run configuration by clicking on the Run Now button

10. The application is executed without the usual frame of the web preview

11. Now, no matter where your cursor is located inside the project explorer, if you open the Run menu, you can always run your application with the specified settings

Let's continue with the final part of this exercise!

This is the continuation of the blog presented here.

This blog has been split in 3 parts:

In this third part we are going to see how to deploy the application to the HANA Cloud Platform. As an optional step I'll show you how to deploy the app to SAP Fiori Launchpad.

1.4 DEPLOYING THE APP TO HANA CLOUD PLATFORM

In this part of the exercise you will learn how to take the application you have built so far and deploy to the HCP. After deployment you will be able to run the app from HCP, as well.

1. Select the name of the project, right click on it and choose Deploy --> Application status. We are starting from this point so that you verify that so far we have never deployed to HCP

2. Enter your HCP password and click on Login

3. As you can see here so far we have not yet deployed the app to HCP. So, since we want to do it right now, click on Deploy

4. Here you can enter the application name, its version and you can decide if you want to activate this version automatically as soon as the application has been deployed. All the fields come pre-filled. Leave all as by default and click on Deploy

5. The application has been deployed to HPC and the first version has been created. Now you can do two things: the first one is to Open the active version of the application

6. Enter again the credentials for the ES1 system, if required, and click on Log In

7. The application is running directly on your HANA Platform. Notice the application’s URL, which is no longer tied to the SAP Web IDE tool

8. Alternatively, you can Open the application’s page in the SAP HANA Cloud Platform cockpit

9. In this case the following page is opened. Here you can administer your HANA applications. For example, here you can check the application’s URL and verify that the application is started

10. When finished, click on the Versioning tab. Here you can check all the versions that have been pushed to the HANA repository. You can activate or deactivate a specific version and do a lot of other administrative functions. You can now close this page

11. Once back here to this message you can click on the Close button. At moment we are not going yet to register the app to SAP Fiori Launchpad because we’ll do it in the next chapter

12. Refresh the SAP Web IDE tool

13. Now you can see some new fancy symbols on the left of each folder or file in the project explorer. In this case the green ball means that the file/folder has been committed and it is up to date with the one on HCP

14. If you search in the documentation you should be able to find a description for all the available decorations

1.5 DEPLOYING THE APP TO SAP FIORI LAUNCHPAD (optional step)

Finally, you can deploy your SAP Fiori application to the SAP Fiori Launchpad in order to be consumed by users. Please ensure that you have properly subscribed to the Fiori Launchpad Portal in the Trial Landscape as described in the Prerequisites chapter on the first part of this blog.

1. Select your project in the Project Explorer, right click on it and select Deploy --> Register to SAP Fiori Launchpad

2. Enter your SCN password if required

3. Enter a description for this new application and click on Next

4. Enter a Title and a Subtitle for your tile in the FLP and click on the Browse button to choose an icon for your app

5. Type “e-learn” in the search box, select the e-learning icon and click on OK

6. The new icon is assigned to the tile. Click on Next

7. Choose the Category, the Content Package and the Group for this application. The first two selections are made automatically by the system because they are mandatory. For the third you can choose the Sample Group and click on Next

8. Click on Finish

9. Your application has been successfully registered to FLP. Now you can open the registered application in your browser

10. The application is running fine. You might need to enter the ES1 credentials again

11. Alternatively, you can open your SAP Fiori Launchpad in another browser tab

12. This is how the tile for your app looks like. By clicking on this tile you can run your application

13. Congratulations! You have successfully deployed your first app to SAP Fiori Launchpad!

As we had several inquiries about how to build up a UI5 application in a Windows Phone hybrid app recently, we have investigated a bit in that area. You may have heard that there is a problem regarding restrictions with Windows Store Apps and several JavaScript libraries. Unfortunately UI5 is one of them.

But nevertheless, we figured out a way you should be able to run a UI5 application in a hybrid container on Windows Phone 8. As an example I will describe a way you can achieve that when using Visual Studio 2013 (express should do it). Prerequisites are at least Windows 8 as operating system, Node.js and the Windows Phone SDK 8 installed. The Visual Studio installation should prompt you for those parts. Additionally you need a version of the OpenUI5 Runtime Mobile (which you may get from OpenUI5 - Download). It should work with all versions 1.28.11 and higher.

Step by Step

1. Create a new JavaScript project in VS of the type Blank App (Apache Cordova)

2. Replace winstore-jscompat.js

• go to merges/windows/scripts
• The VS2013 does not ship with the latest winstore-jscompat file, so you may need to get it from here MSOpenTech/winstore-jscompat · GitHub
• If there is not the latest one in your project, please replace it with the one from GitHub

3. Unzip the UI5 resources

• Place the resources folder of the downloaded UI5 version in the project
• We have used a folder called ui5 but you also my choose another name

4. Edit the index.html

• Include cordova.js, scripts/platformOverrides.js and scripts/index.js in the head
  
• Include the UI5 bootstrap in the head after the platformOverrides.js
• You should point to the folder where you have unzipped the UI5 resources like this: "./ui5/resources/sap-ui-core.js"
• Note that in our example an alert is used, for which a Cordova notification plugin has to be installed (org.apache.cordova.dialogs)

<!DOCTYPE html><html><head>    <meta charset="utf-8" />    <title>UI5CordovaApp</title>    <!-- Cordova reference, this is added to your app when it's built. -->    <script src="cordova.js"></script>    <script src="scripts/platformOverrides.js"></script>    <script src="scripts/index.js"></script>    <script src="./ui5/resources/sap-ui-core.js"            id="sap-ui-bootstrap"            data-sap-ui-libs="sap.m"            data-sap-ui-theme="sap_bluecrystal"></script>    <!-- only load the main library "sap.m" and the Blue Crystal theme -->    <script>        var btn = new sap.m.Button({            text: 'Hello World',            press: function () {                navigator.notification.alert("Hello");            }        });        btn.placeAt('content');    </script></head><body class="sapUiBody">    <div id="content"></div></body></html>

5. Have fun implementing!

• To make a build, you should choose Windows Phone (Universal) from the dropdown list

If you experience any issues please let us know (Issues · SAP/openui5 · GitHub). For any further information regarding Cordova and its plugins check out Apache Cordova API Documentation.

Hello everyone,

This blog is on my experiences with SAP HANA GeoMap features. Many applications now-a-days incorporate maps to visualize geo-spatial data as part of their content. I will explain how the data can be exposed from HANA as GeoJson using XSJS and its consumption by Leaflet Map Client (Open Source).

The application basically explains 2 features:

• You can plot markers with different color icons differentiating between each other in terms of high, medium and low priority, Regions etc.
• On clicking each marker you can get data from HANA using XSJS in the form of JSON format and can bind with SAP UI5 Controls say be it is in Table format/Pie chart/Donut chart etc. Idea is to load a UI5 or any single/multiple component in a call out window of Geo marker when clicked. By doing this we can convey more information in graphical fashion via GeoMaps.

We can get the latitude and longitude of a marker when clicked and on the basis of this we can get analytical data from HANA XSJS service by passing latitude and longitude as parameters. I am consuming the data returned from the XSJS service in my application using AJAX. I used Leaflet.js APIs to plot the MAP.

More information on Leaflet can be found in the links http://leafletjs.com/.

It is done by following the steps below:

1. Create a simple XS Project

   2. Create an html page say index.html

JSON:

3.  Create one view file and name it as map.view.js

sap.ui.jsview("views.map",
{  getControllerName: function() {    return null;
},    createContent: function(oController) {  var oShell = new sap.ui.ux3.Shell("myShell", {  });  oShell.addWorksetItem(new sap.ui.ux3.NavigationItem("wi_news",  {subItems:[  new sap.ui.ux3.NavigationItem("wi_geoview", {key:"wi_news_enhet",text:"GeoView"}),  ]})),  oShell.attachWorksetItemSelected(function(oEvent) {  var itemKey = oEvent.getParameter("id");  oShell.setContent(getContent(itemKey));  });  var donutChart = new sap.viz.ui5.Donut({            width:"133%",            height: "160px",            plotArea: {                'colorPalette': ['#91DA47', '#F8F218', '#F33D39' , '#FFA444']            },                // posi neu neg prob            dataset: topSalesDataset = new sap.viz.ui5.data.FlattenedDataset({                // a Bar Chart requires exactly one dimension (x-axis)                 dimensions: [{                    axis: 1, // must be one for the x-axis, 2 for y-axis                     name: 'Sentiments',                    value: "{Sentiments}"                }],                // it can show multiple measures, each results in a new set of bars                 // in a new color                 measures: [{                    name: 'Value', // 'name' is used as label in the Legend                     value: '{Value}' // 'value' defines the binding for the                 }],                // 'data' is used to bind the whole data collection that is to be                 // displayed in the chart                 data: {                    path: "/"                }            })  });    var oModel = new sap.ui.model.json.JSONModel();    oModel.loadData("services/getSenti.xsjs");    donutChart.setModel(oModel);  var oTable1Map = new sap.ui.table.Table({        title: "Stringency of Rainfall Scarce Regions",        visibleRowCount: 4,        firstVisibleRow: 4,        border: 2,        editable:false,        }).addStyleClass("mapClass");    var oColumn1 = new sap.ui.table.Column({  label: new sap.ui.commons.Label({  text: "Region ID"  }),  template: new sap.ui.commons.TextField({editable:false}).bindProperty("value", "id"),  sortProperty: "id",  filterProperty: "id",  width: "50px"  });     oTable1Map.addColumn(oColumn1);        var oColumn = new sap.ui.table.Column({        label: new sap.ui.commons.Label({        text: "Region Name"       }),         template: new sap.ui.commons.TextField({editable:false}).bindProperty("value", "region"),         sortProperty: "region",         filterProperty: "region",         width: "50px"        });       oTable1Map.addColumn(oColumn);    oTable1Map.addColumn(new sap.ui.table.Column({        label: new sap.ui.commons.Label({        text: "Severity"        }),        template: new sap.ui.commons.TextField({editable:false}).bindProperty("value", "Severity"),        sortProperty: "Severity",        filterProperty: "Severity",        width: "40px"        }));    var aContent = {};       function getContent(id)    {  if (!aContent[id]) {  if(id == "wi_geoview") {  aContent[id] = new sap.ui.core.HTML("html93", {  content:  "<div id='map' style='height:520px;width:100%;border: 1px solid #AAA;'>"+  "</div>",  preferDOM : false,  afterRendering : function(e) {  var markera;  var map = L.map( 'map', {  center: [40.0, 5.0],  minZoom: 3,  maxZoom: 18,  zoom: 3  });  L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {  attribution:'&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',  subdomains: ['otile1','otile2','otile3','otile4']  }).addTo( map );  var markerData = [];                 function getMarkerData()  {  return $.ajax(  {                 url: "services/getGson.xsjs",                  dataType: "json",                 success: function(markerData, textStatus, jqXHR) {return markerData;},                 error: function(jqXHR, textStatus, errorThrown) {alert("You're not logged in to SAP HANA!! Try again.");}  });  }   $.when(getMarkerData()).done(function(jsonData)  {  for( var i=0; i < jsonData.length; ++i)  {  markera = L.marker( [jsonData[i].Latitude, jsonData[i].Longitude], {icon: L.icon({  iconUrl:  jsonData[i].Marker,  iconRetinaUrl: 'images/pin24.png',  iconSize: [20, 30],  iconAnchor: [9, 21],  popupAnchor: [0, -14]  })})  .addTo( map )  markera.bindPopup("<div id='mapbutton'/>")  markera.on("popupopen", onPopupOpen)  markera.on('click', function(e)  {  var oModel1=new sap.ui.model.json.JSONModel();  var jURL="services/proactive_services.xsjs";  jQuery.ajax({  url: jURL,  async :false,  TYPE: 'POST',  data: {  "service": "Lat_Lng",  "lat_value":e.latlng.lat,  "long_value":e.latlng.lng  },  method: 'GET',  dataType: 'text',  success: function(data) {  oModel1.loadData(data);  }  });         oTable1Map.setModel(oModel1);  oTable1Map.bindRows("/");   });  }  function onPopupOpen()  {  var tempMarker = this;  oTable1Map.placeAt("mapbutton");  // donutChart.placeAt("mapbutton");  }  });  }   });  }  else  {  aContent[id] = null; }}return aContent[id];  }  //Initialize the default content  oShell.setContent(getContent("wi_geoview"));  oShell.placeAt("sample1");       }
});

Clearly, we can see markers plotted on map with different colors signifying the attributes of that location

Now, as you click on the markers, latitude and longitude are passed as parameters and the corresponding data is returned from the HANA Database for that particular and can be shown as:

Similarly, we can show donut chart, or any other custom charts, for the particular location. As in the below example it is used for showing social sentiments on any campaign/product, etc.

We can also show Business Card or mix of UI5/custom interlinked/disconnected components. I will be covering this in my next blog. Till then enjoy being innovative and stay tuned!

Hope you find this blog interesting!

Thank You and Happy Coding,

Kapil Jain

Dear users of SAPUI5,

as of today (July 30th 2015) applications will have the opportunity to refer to specific versions of SAPUI5 from SAP HANA Cloud Platform (HCP). With this feature applications can now control themselves to switch to a different version of SAPUI5 based on their release and upgrade schedule.

The following snippet shows the current way of referring to UI5 on HCP:

<script id="sap-ui-bootstrap"    type="text/javascript"    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"    data-sap-ui-theme="sap_bluecrystal"    data-sap-ui-libs="sap.m"></script>

This will refer to the latest available version of UI5 on HCP. This version is controlled by the SAPUI5 team and will be normally updated in bi-weekly cycles with each HCP delivery. As this is a dynamic version it is not recommended to use this for applications. For testing purposes and for e.g. JSBin code snippets it is helpful because you can validate fixes later on once the update is available with that dynamic version.

If you want to use a specific version of UI5 you will be able to add the version as segment into the path of the bootstrap script tag:

<script id="sap-ui-bootstrap"    type="text/javascript"    src="https://sapui5.hana.ondemand.com/1.28.9/resources/sap-ui-core.js"    data-sap-ui-theme="sap_bluecrystal"    data-sap-ui-libs="sap.m"></script>

This will load the specific version from HCP. This version is static and will not be changed anymore.

The difference in the URLs is a version segment between the host part and the resources segment:

• dynamic - always the latest version

https://sapui5.hana.ondemand.com/resources/sap-ui-core.js

• static - specific version - here: 1.28.9

https://sapui5.hana.ondemand.com/1.28.9/resources/sap-ui-core.js

In addition cache control is different for dynamic and static resources. Whereas dynamic resources have a max-age of one week static resources have a max-age of 10 years. In both cases CORS (https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) headers will be set so that you will be able to consume resources from the central location without any proxy in between.

• https://sapui5.hana.ondemand.com/resources/sap-ui-core.js

Access-Control-Allow-Origin:*

Cache-Control:max-age=604800, public

• https://sapui5.hana.ondemand.com/1.28.9/resources/sap-ui-core.js

Access-Control-Allow-Origin:*

Cache-Control:max-age=315360000, public

Another important aspect for SAPUI5 on HCP is the usage of Akamai (available since March 17th) to distribute static resources as close as possible to you. Static versions will automatically benefit of Akamai. More details about the Akamai enablement can be found here: http://scn.sap.com/community/developer-center/front-end/blog/2015/04/01/sapui5-is-now-delivered-via-akamai-cdn.

If you are interested in the available versions of SAPUI5 on HCP you can have a look into the version overview. It lists the available versions and their maintenance status:

• Version Overview: https://sapui5.hana.ondemand.com/versionoverview.html (which is available as of July 30)
• SAPUI5 maintenance strategy: https://sapui5.hana.ondemand.com/docs/maintenancestrategy.pdf

Now - our next step is to enable the multi-version support also for OpenUI5 on HCP. Stay tuned!

Enjoy and best regards,

Peter Muessig on behalf of the SAPUI5 team