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.


Summary:

  • 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: https://account.hanatrial.ondemand.com/. 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: https://hanadeveditionsapicl.hana.ondemand.com/hanadevedition/ (I used 64-bit Windows version). Install this.
    2. Download HANA Studio: https://hanadeveditionsapicl.hana.ondemand.com/hanadevedition/ (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: https://tools.hana.ondemand.com/ (Latest SDK downloads: SAP HANA Cloud Platform SDK for Java Web: neo-java-web-sdk-1.46.16.5.zip ) *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.
Code

createContent : function(oController) {

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

oModel.setData({

  

        “customerSales”: [

            {

                “name”: “Microsoft, Inc”,

                “net”: “$583,000”

            },

            {

                “name”: “Google, Inc”,

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

            },

            {

                “name”: “Facebook”,

                “net”: “$200,003”

            }

        ]

  

});

sap.ui.getCore().setModel(oModel);

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}” })

            ]

    }));

myTable.setModel(oModel);

  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 http://www.mindsetconsulting.com/solutions.html


To report this post you need to login first.

14 Comments

You must be Logged on to comment or reply to a post.

    1. Gavin Quinn Post author

      Gagandeep,

       

      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-1.46.16.5\tools\neo open-db-tunnel -h hanatrial.ondemand.com -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.

      (0) 
      1. 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


        (0) 
        1. Gavin Quinn Post author

          Try running this from the command line:

           

          CALL “HCP”.”HCP_GRANT_SELECT_ON_ACTIVATED_OBJECTS”


          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.

          (0) 
          1. Gagandeep Batra

            Hi Gavin:

             

            It’s not worked:

             

            Statement ‘CALL “HCP”.”HCP_GRANT_SELECT_ON_ACTIVATED_OBJECTS”‘

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

             

            Regards

            GB

            (0) 
            1. Gavin Quinn 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’)

              (0) 
  1. Uday Kumar Kanike

    Hi Gavin,

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

     

    Thanks

    Uday

    (0) 
    1. Gavin Quinn Post author

      Uday,

       

      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!

      (0) 
  2. Shaunak Kar

    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.

    Cheers

    Shaunak

    (0) 
  3. Devisha Bhavik

    Hi,

     

    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?

     

    -Bhavik

    (0) 
  4. Mahsum sansar

    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.

    Regards,

    Mahsum

     

    (0) 

Leave a Reply