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
Upon download completion, extract the files. Start the installation by clicking on the ‘hdbsetup’.
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.
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:
Select the ‘SAP HANA Cloud Tools’ and ‘UI development toolkit for HTML5’
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’.
Enter the ‘Host name’, ‘Instance number’ and description. Click ‘Next’
Enter the 'User Name' and 'Password'
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’
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)
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’.
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’
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.
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
Enter the following syntax to create a role:
Role TestXS.data::TestRole{ catalog schema "TestSchema" : SELECT,INSERT,UPDATE,DELETE,DROP; application privilege: TestXS::Admin;
}
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.
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)
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
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.
Click Next-> Finish. Observe the ‘Job Log’ for import status. It should show successful import.
Navigate to the ‘SAP HANA system’ view. Expand the catalog folder. Test Schema -> TestTable
Right click on the ‘TestTable’ -> Open Data Preview
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
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.
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.
Observe the following folder structure for the 'TestUI5' project in the HANA studio
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.
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
