Skip to Content

Step 1: Downloading and installing the HANA Studio and Client

Step 2: Installing SAPUI5 toolkit in the HANA Studio

Step 3: Creating system connection with HANA server and creating a workspace repository

Step 4: Creating XS Project in the local repository workspace and deploying on HANA server

Step 5: Testing the XS project, through rest client in a browser

Step 6: Creating an SAPUI5 project

Step 7: Developing the user interfaces, oData Call, integrating SAPUI5 and XS project

Step 8: Testing the application

Step 1: Downloading and installing the HANA Studio and Client

Navigate to the URL : http://scn.sap.com/community/developer-center/hana

Login with your SCN credentials


HANA Studio installation

Click on ‘Download SAP HANA Studio, developer edition’ (version 1.0.48)

Download the appropriate studio

   SAP HANA Studio version.jpg

Upon download completion, extract the files. Start the installation by clicking on the ‘hdbsetup’.

/wp-content/uploads/2013/07/hdbsetup_242073.jpg

HANA Client Installation

Click on ‘Download SAP HANA Client, developer edition’ (version 1.0.48)

Download the appropriate HANA Client

Upon download completion, extract the files. Start the installation by clicking on the ‘hdbsetup’.

Connecting the HANA studio to the HANA Repository Client

In HANA studio, navigate to Windows -> Preferences -> SAP HANA Development -> Repository Access

Set the ‘SAP HANA Repository Client (regi) location’ by clicking on the ‘Browse’ button and navigate through the ‘Program Files’ folder in your system ‘C:\Program Files\sap\hdbclient’ and select the ‘regi’. Click ok.

Repository Access.jpg


Step 2: Installing SAPUI5 toolkit in the HANA Studio

In the HANA studio, navigate to the path ‘Help -> Install new softwares’

Click on Add button. Enter the following details:

NetWeaverOnDemand.jpg

Select the ‘SAP HANA Cloud Tools’ and ‘UI development toolkit for HTML5’

Cloud and UI5 tools.jpg

Click on ‘Next’. It will prompt for credentials, enter your SCN credentials.

Upon download completion, restart the HANA studio.

Navigate to the path ‘File-> New -> Project’ in SAP HANA studio and a new option ‘SAPUI5 Application development’ appears. This ensures that plug-in for UI5 development has been added successfully.

Step 3: Creating system connection with HANA server and creating a workspace repository


System connection with HANA server

Navigate to the ‘SAP HANA Development’ perspective

Navigate to the ‘Navigator’ view. Right click and select ‘Add System’.

SystemConnections.jpg

Enter the ‘Host name’, ‘Instance number’ and description. Click ‘Next’

System Details.jpg

Enter the ‘User Name’ and ‘Password’

Connection Properties.jpg

HANA studio is connected to a HANA Server.

Creating a workspace repository

Navigate to the ‘SAP HANA Repository’ view. Right click and select ‘New Repository Workspace’

RepositoryWorkspace.jpg

Select the ‘system connection’ created in the previous step. Enter the ‘Workspace Name’ and ‘Workspace Root’. Click ‘Finish’

(P.S. Workspace root is the path where the projects gets created in the local workspace)

A local workspace is created which is connected to the HANA server through the system connection.


Step 4: Creating XS Project in the local repository workspace and deploying on HANA server


Creating the XS project

Select the ‘Project Explorer’ view

Create an XS project by selecting File -> New -> Project

Select SAP HANA Development -> XS Project, and choose ‘Next’

In the Project Name field, enter ‘TestXS’

Choose the repository workspace path/folder where this project needs to be created. Click ‘Finish’

A XS project gets created on the local workspace repository (P.S. the project is only available to developer and is not yet shared across the HANA server)

TestXS.jpg

Now right click on the project and navigate to ‘Team -> Share project’. Select ‘SAP HANA Repository’. Select the workspace repository. Select the repository package (location on the server – if you want to create to a particular folder structure. Navigate to the ‘navigator’ view and under ‘content folder create the necessary folder structutre) and click ‘Finish’.

TestXSafterActivate.jpg

Right click again and navigate to ‘Team -> Commit’ (this save the project locally in the repository workspace).

Right click again and navigate to ‘Team -> Activate’. This will share the project to the HANA server.

Creating a schema

Create folder data inside the TestXS project

Right click on the ‘data’ folder. New->File. Enter the name ‘TestSchema.hdbschema’. Click ‘Finish’

/wp-content/uploads/2013/07/hdbschema_242087.jpg

Enter the following syntax to create a schema:

    

schema_name=”TestSchema”;

Save the file. Commit it and activate it.

Navigate to the navigator view and refresh the ‘catalog’ folder. Observe the newly created schema.

Creating a table

Right click on the ‘data’ folder. New-> File. Enter the name ‘TestTable.hdbtable’. Click ‘Finish’

Enter the following syntax to create a schema:

    

 table.schemaName = "TestSchema";
 table.tableType = COLUMNSTORE;
 table.description = "Test Description";
 table.columns = [
           {name = "Test Name"; sqlType =NVARCHAR; nullable = false; length = 30; comment = "Test name";},
           {name = "Test Id"; sqlType =INTEGER; nullable = false; comment = "Test Id";}
          ];
 table.primaryKey.pkcolumns = ["Test Id"];

Save the file. Commit it and activate it.

Navigate to the navigator view and refresh the ‘catalog’ folder. Observe the newly created table.

Go to ‘SAP HANA Systems’ view. Open the folder catalog and observe the new schema (TestSchema). Expand the folders->Tables. Observe the newly created table (TestTable). Double-click on the table and the table definition opens up.

/wp-content/uploads/2013/07/table_242088.jpg

Creating .xsprivileges file

Right click on the project folder. New-> File. Enter the name ‘.xsprivileges’. Click ‘Finish’

Enter the following syntax

{"privileges":
          [  {"name":"Basic","description":"Basic usage privilege"},
                {"name":"Admin","description":"Administration privilege"}
          ]
}

Creating a role

Right click on the project File -> New ->Other -> SAP HANA Development ->Role

/wp-content/uploads/2013/07/role_242089.jpg

Enter the following syntax to create a role:

 Role TestXS.data::TestRole{
          catalog schema "TestSchema" : SELECT,INSERT,UPDATE,DELETE,DROP;
          application privilege: TestXS::Admin;
}

/wp-content/uploads/2013/07/test_242093.jpg

Importing data in table

  Assigning the necessary privileges

  ‘TestTable’ is created by the SQL compiler on the HANA Server. Hence, the user ‘Dummy_User’ used to create connection between HANA studio and HANA       server will not have the necessary privileges to access the table content (alter,drop,insert etc)

  In order to import data to the table, ‘Dummy_user’ is granted the privileges on the ‘TestTable’, using the following steps.

  Navigate to the ‘SAP HANA system’ view. Expand the security folder.

      /wp-content/uploads/2013/07/image_242237.jpg

     Open the user properties by double-clicking on the object. Select ‘Object Privileges’. Search for ‘TestTable’. Click Ok.

     Assign the necessary privileges(Alter, Drop, Insert etc)

      /wp-content/uploads/2013/07/grantprivileges_242095.jpg

    Creating and importing the data file (flat file)

    Open a notepad and key in some sample data in the TestTable’s structure (Test Name and Test ID).

           “Roger Federer”,852147

           “Andy Murray”,963852

           “Novak Djokovic”,184527

            “RaefalNadal”,985214

    Save it as test.csv file

    Select the project ‘TestXS’. Navigate to File -> Import -> Data from Local File -> Next

     DataFile.jpg

    Select the target system (system connection object). Click on Next

    Select the source file ‘Test.csv’ from the local computer

    In the Target table section. Select the ‘existing’ radio button.

    Click on ‘Select Table’. From the list of catalog select the schema (TestSchema) and the corresponding table (TestTable). Click Ok. Click Next.

     /wp-content/uploads/2013/07/onetoone_242097.jpg

       /wp-content/uploads/2013/07/onetoone_242097.jpg

     Click Next-> Finish. Observe the ‘Job Log’ for import status. It should show successful import.

          Joblog.jpg

    Navigate to the ‘SAP HANA system’ view. Expand the catalog folder. Test Schema -> TestTable

    Right click on the ‘TestTable’ -> Open Data Preview

          DataPreview.jpg


Step 5: Testing the XS project, through rest client in a browser


Testing the XS engine

Enter the URL http://<HANA_ServerIP or host_name>:<port_number>

We get a message ‘SAP XS engine is up and running’

Creating .xsodata file

Now create a folder services in the TestXS project. Inside the services folder, create TestXS.xsodata file(File -> New-> File)

Enter the following syntax in the .xsodata file:

service namespace "Sample.services" {
   "TestSchema". "Sample.data::TestTable"
   as "TestXS" ;
}


Create the .xsaccess file

Create the file directly under TestXS project. Enter the following syntax in the file:

{
     "exposed" : true
}


Create.xsapp file

Create the file directly under TestXS project. Enter the following syntax in the file:

{}


Activate and commit the project

Browser Extensions

Add two extensions to the Google Chrome browser ‘JSON View’ and ‘XML Tree’(by logging in to the chrome store)

Construct the URL to access the xsodata (Navigate to ‘SAP HANA System’ view. Expand the project structure in the ‘Content’ folder. Use the folder structure to construct the URL)

http://<HANAServerName>:<port number>/<Folder structure>/TestXS.xsodata

http://<HANAServerName>:<port number>/TestXS/services/TestXS.xsodata

Following xml is returned,

<service xml:base="http://<ServerName>:<Port>/Sample/services/TestXS.xsodata/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:app="http://www.w3.org/2007/app" xmlns="http://www.w3.org/2007/app">
<workspace>
<atom:title>Default</atom:title>
<collection href="TestXS">
<atom:title>TestXS</atom:title>
</collection>
</workspace>
</service>t:

http://<HANAServerName>:<port number>/TestXS/services/TestXS.xsodata/TestXS?jason

Following xml is returned,

<feed xml:base="http://<HANAServer>:<Port>/Sample/services/TestXS.xsodata/" xmlns:d="http://schemas.microsoft.com/ado/2007/08/dataservices" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns="http://www.w3.org/2005/Atom">
<title type="text">TestXS</title>
<id>http://<HANAServer>:<Port>/Sample/services/TestXS.xsodata/TestXS</id>
<author>
<name/>
</author>
<link rel="self" title="TestXS" href="TestXS"/>
<entry>
<id>http://<HANAServer>:<Port>/Sample/services/TestXS.xsodata/TestXS(184527)</id>
<title type="text"/>
<author>
<name/>
</author>
<link rel="edit" title="TestXS" href="TestXS(184527)"/>
<category term="Sample.services.TestXSType" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme"/>
<content type="application/xml">
<m:properties>
<d:TestName m:type="Edm.String">Novak Djokovic</d:TestName>
<d:TestId m:type="Edm.Int32">184527</d:TestId>
</m:properties>
</content>
</entry>
<entry>
<id>http://<HANAServer>:<Port>/Sample/services/TestXS.xsodata/TestXS(852147)</id>
<title type="text"/>
<author>
<name/>
</author>
<link rel="edit" title="TestXS" href="TestXS(852147)"/>
<category term="Sample.services.TestXSType" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme"/>
<content type="application/xml">
<m:properties>
<d:TestName m:type="Edm.String">Roger Federer</d:TestName>
<d:TestId m:type="Edm.Int32">852147</d:TestId>
</m:properties>
</content>
</entry>
<entry>
<id>http://<HANAServer>:<Port>/Sample/services/TestXS.xsodata/TestXS(963852)</id>
<title type="text"/>
<author>
<name/>
</author>
<link rel="edit" title="TestXS" href="TestXS(963852)"/>
<category term="Sample.services.TestXSType" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme"/>
<content type="application/xml">
<m:properties>
<d:TestName m:type="Edm.String">Andy Murray</d:TestName>
<d:TestId m:type="Edm.Int32">963852</d:TestId>
</m:properties>
</content>
</entry>
<entry>
<id>http://<HANAServer>:<Port>/Sample/services/TestXS.xsodata/TestXS(985214)</id>
<title type="text"/>
<author>
<name/>
</author>
<link rel="edit" title="TestXS" href="TestXS(985214)"/>
<category term="Sample.services.TestXSType" scheme="http://schemas.microsoft.com/ado/2007/08/dataservices/scheme"/>
<content type="application/xml">
<m:properties>
<d:TestName m:type="Edm.String">RaefalNadal</d:TestName>
<d:TestId m:type="Edm.Int32">985214</d:TestId>
</m:properties>
</content>
</entry>
</feed>


Step 6: Creating an SAPUI5 project


In the HANA studio, navigate to the path File -> New -> Other -> SAPUI5 Application Development -> Application Project. Click Next.

Enter the project name as ‘TestUI’. Choose between Desktop or mobile, so that the SAP runtime engine understand whether to render for a mobile application or desktop application

/wp-content/uploads/2013/07/desktopmobile_242221.jpg

Observe that an initial view would be created. Click Next.

Enter the initial view name and select a type of view to be created. SAPUI5 allows us to create :

– JavaScript View

– JSON view

– XML view

– HTML view

These views allow us to work with data in the XML and JSON format, along with the traditional MVC pattern. It also creates a controller along with the view, where the business logic can be implemented.

In our case, we select an ‘JavaScript’ view.

/wp-content/uploads/2013/07/viewtype_242223.jpg

Click Next. Summary of the SAPUI5 project details is displayed. Observe the libraries that get added with the project. These get deployed on the HANA server in a similar folder structure and is rendered at the run-time.

/wp-content/uploads/2013/07/summary_242224.jpg

Observe the following folder structure for the ‘TestUI5’ project in the HANA studio

SAPUI5project.jpg


Step 7: Developing the user interfaces, oData Call, integrating SAPUI5 and XS project


TestUI.js file

Open the TestUI.js file and enter the following code in the createContent method:


var oModel = new sap.ui.model.odata.ODataModel("/Sample/services/TestXS.xsodata/",false);
oTable = new sap.ui.table.Table("Test",{visibleRowCount:5});
oTable.setTitle("Test Details");
var testID = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "TestID"}),               
                    template: new sap.ui.commons.TextView().bindProperty("text", "TestId")  ,
                     width: "100%"});
oTable.addColumn(testID);
var testName = new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "TestName"}),               
                        template: new sap.ui.commons.TextView().bindProperty("text", "TestName")  ,
                         width: "100%"});
oTable.addColumn(testName);
oTable.setModel(oModel);
oTable.bindRows("/TestXS");
return oTable;

Save the file.

The code creates two columns for the Test Name and Test Id columns.(Observe that in the template we bind the exact column names to the table columns, which allows the data binding to the table)

Data is procured through Model (Observe the path /Sample/services/TestXS.xsodata/, which is same as the url’s used for testing the oData services in step 5)

Model is set to the table and the rows are bound to ‘/TestXS’ (observe in Step 5, while creating the .xsodata file the “schema.table” name was given an alias name which in our case is, “TestSchema”. “Sample.data::TestTable” as “TestXS”. Hence the rows are bound to the /TestXS)

In a nutshell,

Data from XS server is procured in a Model.

Table is set to a model, table rows are set to the model structure, columns are bound to the exact model structure name.

indext.html file

Point to the SAP UI libraries on the HANA server

Replace

<script src="/esources/sap-ui-core.js"

with

<script src="/sap/ui5/1/resources/sap-ui-core.js"

Add the UI libraries for, table and UX3 to support the table UI element.

Replace

data-sap-ui-libs="sap.ui.commons"

with

data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3"

Integrating SAPUI5 and XS project

In TestXS project, create a folder ‘UI’


Right click on the SAPUI5 project. Team -> Share Project

Select ‘SAP HANA repository’ and click Next

In the selected Repository workspace, browse and select the ‘TestXS’ project and navigate to the ‘UI’ folder. Click Ok. Click Finish.

Refresh the ‘TestXS’ project.

Browse through the ‘TestXS’ project to observe the ‘TestUI5’ project structure inside the ‘UI’ folder.

Commit and activate the ‘TestXS’ project.

UIandXS.jpg

Now, the SAPUI5 (TestUI) and XS (TestXS) project is integrated and deployed on the HANA server.



Step 8: Testing the application

Construct the URL to access the indext.html inside the ‘TestXS’ project. ( Sample -> UI -> TestUI -> WebContent -> index.html )

Open a browser and enter the following URL:

http://<HANAServerName>:<Port>/Sample/UI/TestUI/WebContent/index.html

Table loads successfully with data

/wp-content/uploads/2013/07/output_242226.jpg

To report this post you need to login first.

16 Comments

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

  1. Stuart Hill

    Regarding Installation I have exception in hdbstudio, see below from Step 2

    http://scn.sap.com/community/developer-center/front-end/blog/2013/07/07/native-development-in-sap-hana-and-consuming-the-odata-services-in-sapui5.

    “eclipse requirement org.eclipse.core.expressions 3.3.0”

    Software being installed: SAP JVM Tools 1.8.42 (com.sap.jvm.profiling.feature.group 1.8.42) Missing requirement: SAP JVM Tools 1.8.42 (com.sap.jvm.profiling.feature.group 1.8.42) requires ‘org.eclipse.core.expressions 3.3.0’ but it could not be found

    Solution:

    in ..C:\Program Files\SAP\hdbstudio\plugins

    ..I exchanged

    ..C:\Program Files\SAP\hdbstudio\plugins\org.eclipse.core.expressions_3.4.400.v20120523-2004.jar

    ..for

    ..http://repo1.maven.org/maven2/org/eclipse/core/expressions/3.3.0-v20070606-0010/expressions-3.3.0-v20070606-0010.jar

    Is this correct? Environment Tried with similar issues are Windows 7 and 8 (32 bit/64-Bit).

    (0) 
  2. Madhumitha S

    Hi ,

    You have mentioned in you blog to repoint the import file to below location>

    <script src=“/sap/ui5/1/resources/sap-ui-core.js”  >

    How do i ensure that the import files are in the mentioned location?Is the path same for all HANA XS developers.

    Also after activating the SAP UI 5 Project ,

    I made changes to one of the files and commited that file again and activated that files.

    My new code changes are not getting reflected.

    Is any server restart required for file changes to reflect?

    Please reply

    (0) 
  3. satish chowdary

    Hi  Jagannathan,

    As mentioned in the blog. i tried to execute as it is..I was stuck after creation of TestSchema. I am able to activate the schema successfully. But the schema was

    not created. i can see the schema by  executing following command.

    Select * from public.schemas. in which Has_privileged column has FALSE.

    how to make it true and continue with next steps. Even in Developer guide i face the same issue

    (0) 
    1. Krishna Tangudu

      can u check if you can give access through “Security” folder to that schema to the user??

      or

      GRANT SELECT ON SCHEMA <SCHEMANAME> to <USERNAME> ?

      Also Try

      ´┐╝call _SYS_REPO.GRANT_SCHEMA_PRIVILEGE_ON_ACTIVATED_CONTENT(‘select’,'<SCHEMANAME>’, ‘<username>’);

      (0) 
  4. rahul kumar

    HI Jagannathn,

    I tried to write .xsodata according to your blog but I failed to execute the example.When I was trying  to activate my existing .xsodata then it was giving syntax error.

    I would really appreciate if you give some suggestion.

    (0) 
  5. Manish Danani

    Just for all those who are trying to install Eclipse components the location for downloading cloud components in step below:


    Step 2: Installing SAPUI5 toolkit in the HANA Studio


    The new location is

    Netweavwer On Demand Components –

    https://tools.hana.ondemand.com/juno


    Also, the below link is useful for resolving download/install type of issues:


    SAP Development Tools for Eclipse Installation: FAQ and Known Issues

    Regards,

    Manish Danani

    ERP, EAI Actavis

    (0) 
  6. Connor Nelson

    I understand the code for a table converting a table to xsodata is this

    Enter the following syntax in the .xsodata file:

       

    1. service namespace “Sample.services” {  
    2.    “TestSchema”. “Sample.data::TestTable”  
    3.    as “TestXS” ;  

    Does anyone know what it would look like for an Attribute View?

    Thanks

    (0) 
    1. Tugba Koc

      To expose an attribute view, it would look like:

      service namespace “sample.services” {

        “sample.odata::attribute_view”

        as “Sample”

        keys generate local “ID”;

      }

      (0) 
      1. Connor Nelson

        Thanks for your responseTugba,

        I was looking to do an attribute view I had previously created in Navigator.

        I found this to work:

         

        service namespace “sample.services”{

        “Package/AttributeView.attributeview” as “sample”

        key (“ColumnID”) ;

        }

        (0) 
    2. Daniel K

      Hi Connor

      In latest SAP HANA SPS10, the service definition is like below.

      service {

      “ABCDemo.models::CA_ABCREPORT” as “ABC_DISPLAYLIST”

      keys (“primaryKey”);

      }

      Note : Remove the .atrributeview or .calculationview   and  “/”  before the view name if any.

      ABC_DISPLAYLIST is a service definition name and CA_ABCREPORT is the calculation view.

      ABCDemo is the project name

      models is the folder name to create the views in the project.

      (0) 
  7. Giri Sreerangam

    After integrating SAPUI5 project and XS project. I am seeing an extra folder (bin) under SAPUI5 project. I am on SP7.

    Any ideas? why was I seeing a extra folder?

    Regards

    Giri

    (0) 
  8. Amit Sharma

    I am not able to provide privileges to user for table TestTable as options (alter, drop and so on ) are coming in read only mode. please suggest something here.

    (0) 
    1. Connor Nelson

      Go to the security tab>Users>double click Your User>Object Privileges tab. Then add the Schema that you want the privileges on. To the right are all the privileges you can grant. then in the upper right corner press the activate user button to save the changes. Hope that helps

      (0) 

Leave a Reply