Skip to Content
Author's profile photo Former Member

How to Create a SAPUI5 HANA Mobile App – Part 1 of 3

Lately I’ve been spending a lot of time on the three big areas of innovation in IT: mobile, cloud, and analytics. SAP has multiple solutions for all of these, so it seemed like a helpful blog to guide people through one possible option. There are many challenges with each area, so I’ll try to point out where I’ve made mistakes, and help to get you through it.

I’m breaking this blog into three parts since it was getting a bit long to put this all together in one, and each component can be a useful topic by itself.

Part 1: Setting up an environment on the HANA Cloud and publishing your first SAPUI5 App

Part 2: Creating content on HANA with ODATA and displaying it with SAPUI5

Part 3: Moving SAPUI5 to an iPhone application with PhoneGap

Let’s get started.

Part 1: Setting up an environment on the HANA Cloud and publishing your first app

SAP is starting to become much more developer friendly. Anyone can now go out and get a HANA cloud environment for free to start developing with. We can publish our SAPUI5 app right on top of this HANA cloud environment on the XS Engine. It’s one of the most exciting components of HANA.


  • Sign up for the HANA Cloud
  • Download and install tools
  • Create a SAPUI5 app
  • Publish and save to the cloud

At the end, we will have something that looks like this:SAPUI5 Mobile App

Sign up for the HANA Cloud

Start here: This is free.Next login to the HANA Cloud cockpit and create a new package like below. Name it trial1 (it must be all lowercase and start with a letter).

Notice the version is 70, which is SP7 and includes a much better version of SAPUI5.

Download and Install Tools

Next we will need to download a number of applications. There are very contradictory instructions for how to install all of these, so I will guide you through how I did it.

    1. Download HANA Client: (I used 64-bit Windows version). Install this.
    2. Download HANA Studio: (I used 64-bit Windows version). Install this.
  • Skip the other files on here.
  • Open up HANA Studio, and from the menu at the top choose Help->Install New Software…
  • Select all boxes and follow defaults to complete.
  • Download the HANA Platform tools zip file from this site: (Latest SDK downloads: SAP HANA Cloud Platform SDK for Java Web: ) *This didn’t make much sense to me either, but it’s later used to make a tunnel to connect to HANA. I’ll explain later.
  • Extract the zip file for HANA SDK tools to something like c:\program files\sap\hana tools\
  • Now you’re ready to log in.

Connect our HANA Studio to the HANA Cloud environment

  • Launch HANA Studio and navigate to the Administrator view.
  • Open up a tunnel to HANA with your Cloud Credentials.
  • Add a new system based on these credentials.
  • Now we’re connected and ready to develop!

Create a SAPUI5 App

  1. Navigate to the HANA Developer view
  2. Navigate to the Project Explorer tab
  3. Create a new SAPUI5 project. In the menu at the top, click on File->New->Other… then select SAPUI5 Application Development->Application Project.
  4. Name your project: SalesByCustomer
  5. Select Mobile radio button.
  6. Keep the development paradigm as Javascript. This seems to be the most common.
  7. Select the checkbox to add a default view. Name this SalesByCustomer
  8. Next, in order to be exposed as an application by HANA and the XS Engine, you need to add 3 files. .xsaccess, .xsapp, and .xsprivileges. You can add all three to the root of the project by right-clicking on the project and selecting New->Other->SAP Hana->Application Development-><XS Application access, app or privileges).
  9. Edit the .xsaccess file and insert the following:
  10. Edit the .xsprivileges file and insert the following:  { “privileges” :  [ { “name” : “Basic”, “description” : “Basic usage privilege” } ]}
  11. No need to edit the .xsapp file.
  12. Now try to test a deployment.
  13. Right-click on your project and select Team->Share…
  14. Share with SAP HANA Repository, and choose your HANA Repository.
  15. Create a new workspace.
  16. Select your repository package as the new package created in the HANA Cloud. Something like p13151351trial.trial1
  17. Let the project create a new sub-package.
  18. Click finish.
  19. Edit the file in your project WebContent->salesbycustomer->SalesByCustomer.view.js.
  20. In the createContent() function, add a piece of test content: new sap.m.Button({text: “Hello”})
  21. Edit the index.html file to point to the HANA resources and change our SCRIPT src to equal this: src=“/sap/ui5/1/resources/sap-ui-core.js”
  22. Right-click on your project, choose Team->Activate All… click on Select All, then okay.
  23. Now if you navigate back to your HANA Cloud Console that you were in before, click on the tab on the left for XS Applications. Choose your package, and now you should see our new application with a link to open it.
  24. Click on the link and you should open your application. It will likely have a 404 error since we haven’t defined an initial launch page. Add that in here to the end of your url: /WebContent/index.html and now you should see a basic mobile app:
  25. Now let’s update the code and add in a data model and table replace the entire view’s createContent() method with this below code. Once it’s complete click on Activate all again.

createContent : function(oController) {

var oModel = new sap.ui.model.json.JSONModel();



        “customerSales”: [


                “name”: “Microsoft, Inc”,

                “net”: “$583,000”



                “name”: “Google, Inc”,

                “net”: “$3,321,000”



                “name”: “Facebook”,

                “net”: “$200,003”






var myTable = new sap.m.Table({

        columns: [

                new sap.m.Column({

                header: new sap.m.Label({text:“Customer”})


                new sap.m.Column({

                header: new sap.m.Label({text:“Net Sales”})




myTable.bindItems(“/customerSales”, new sap.m.ColumnListItem({

        cells : [

            new sap.m.Text({ text : “{name}” }),

            new sap.m.Text({ text : “{net}” })




  var myPage = new sap.m.Page({

title: “Net Sales by Customer”,

content: [ myTable]


  return myPage;


Now you should see the application by refreshing your browser page:

In the next blog we will show how to create real data in HANA, expose it via an ODATA service, and tie it into the SAPUI5 view.

See more of our work at

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Gagandeep Batra
      Gagandeep Batra


      Thanks for sharing,


      Can you please let us know how to "Open up a tunnel to HANA with your Cloud Credentials."




      Author's profile photo Former Member
      Former Member
      Blog Post Author



      Good call out, it looks like I skipped over that step in the instructions. It's actually kind of an obnoxious part of the whole process. As part of the HANA platform tools, there is a tunnel tool that needs to be run from the command line. You put in this syntax: C:\Program Files\sap\neo-java-web-sdk-\tools\neo open-db-tunnel -h -u P1054736 -a p1054736trial --id mindsetdemo1       (switch out for your names), and then it prompts for your HANA cloud password. It will then generate a one-time password which you insert into HANA Studio under our system connection properties. The obnoxious part is that if you lose connection (which happens a lot), you have to do this again. And each time you apply it to HANA Studio, it has to restart a lot of your development.

      Author's profile photo Gagandeep Batra
      Gagandeep Batra

      Hi Gavin thanks for reply:

      I try to create the above senario but when i try to activate the object using  Choose Team->Activate All... click on Select All

      then it is giving error like below:


      User is not authorized to execute specified operation;

      do i need to provide some access for package or some thing else

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Try running this from the command line:



      I go through some of this in the part 2 of the blog. Let me know if this works, and I'll note it here.

      Author's profile photo Gagandeep Batra
      Gagandeep Batra

      Hi Gavin:


      It's not worked:



      successfully executed in 1.599 seconds  (server processing time: 386 ms 667 µs) - Rows Affected: 0




      Author's profile photo Former Member
      Former Member
      Blog Post Author

      When you created your workspace, did you create it in the DEV or NEO space? I ran into something similar to this when using DEV instead of NEO. Also, when I added the project, if I didn't do it on a low enough level in the package, it will not allow you to create / read the project.


      I also ran this at a later point, but worth a shot: call "HCP"."HCP_GRANT_ROLE_TO_USER"('p1054736trial.mindsetdemo1.SalesByCustomer::MODEL_VIEW','p1054736')

      Author's profile photo Uday Kumar Kanike
      Uday Kumar Kanike

      Hi Gavin,

                 Nice blog. Is there a free trial version available for newbie's on HANA development ? Please share those details.




      Author's profile photo Former Member
      Former Member
      Blog Post Author



      Everything in the blog is completely free of charge. You can use the links above to sign up for a HANA Cloud Developer account with no payments. Enjoy!

      Author's profile photo Gagandeep Batra
      Gagandeep Batra

      Hi Gavin,

      for step 25  can you provide the code for table.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Gagandeep,


      I just updated the code. It looks like it was lost in my copy/paste. Enjoy!

      Author's profile photo Former Member
      Former Member

      Hey Gavin,

      This is excellent stuff. I have never used any SAP technologies before but I followed the instructions to the tee and a bit of other research(with opening a tunnel) and it worked like a charm at the first go.
      Thank You.



      Author's profile photo Devisha Bhavik
      Devisha Bhavik



      I was following your blog. Instead of doing it on HANA Cloud, I am trying to do on HANA on Premise.


      I developed Hello World SAP UI5 application and before sharing the project to SAP HANA repository, I could run the application as HTML.


      But, After sharing the project to HANA repository, I tried to test the page and I am getting 404 not found error.


      Can you please let me know what could be wrong?



      Author's profile photo Devisha Bhavik
      Devisha Bhavik



      FYI to others..

      Looks like I missed to add .xsapp and .xsaccess files.



      Author's profile photo Former Member
      Former Member

      Hi Gavin,

      thanks for this awesome tutorial.

      It seems like some links are dead, could you write down what you inserted in the .xsaccess?

      Thanks in advance.